Merge pull request #26 from SDG-data/viz-list

One visualization per Goal page

_includes/footer.html

@@ -52,6 +52,9 @@ <h2 class="footer-heading">{{ site.title }}</h2>
 
   <script src="{{site.baseurl}}/assets/site.js"></script>
   {% if page.js %}
-  <script src="{{site.baseurl}}/assets/{{page.js}}"></script>
+  {% for file in page.js %}
+  <script src="{{site.baseurl}}/assets/{{file}}"></script>
+  {% endfor %}
+
   {% endif %}
 </footer>

assets/data-loader.js

@@ -0,0 +1,57 @@
+//Common fnctions for data Loading
+// Base URL
+var version = "v0.05";
+var dataurl = "https://raw.githubusercontent.com/SDG-data/SDGs/"+version+"/";
+//Read Goals, Targets and Indicators
+var sdgs = [];
+var stats = {};
+
+files = ["goals","targets","indicators"];
+var data_loaded = 0;
+function load_data(){
+  //Reset and Read into memory the SDGs
+  sdgs = {};
+  stats = {};
+  files.forEach(function (f) {
+    console.log("Loading "+f);
+    d3.json(dataurl+f+".json", function (error, data) {
+      //for (var attrname in data) { sdgs[attrname] = data[attrname]; }
+      sdgs[data.meta.id]=data;
+      if (Object.keys(sdgs).length == 3) {
+        page_main();
+        data_loaded=1;}
+  });
+});
+}
+
+function append(htype,hookElement,id,classes,value,link){
+  var wrapper = document.createElement("div");
+  var newListItem = document.createElement(htype);
+  wrapper.setAttribute("id", id);
+  newListItem.setAttribute("class", classes);
+  if (typeof link !== 'undefined') {
+    newListItem.setAttribute("href", link);
+  }
+  var ListValue = document.createTextNode(value);
+  newListItem.appendChild(ListValue);
+  hookElement.appendChild(wrapper).appendChild(newListItem);
+}
+
+function append_raw(hookElement,content){
+  var wrapper = document.createElement("div");
+  wrapper.innerHTML=content;
+  hookElement.appendChild(wrapper);
+}
+
+function append_row(hookElement,row){
+ var table = document.getElementById(hookElement);
+  var rowObject = table.insertRow(0);
+  for (var i in row){
+    cell = rowObject.insertCell(i);
+    cell.innerHTML = row[i];
+  }
+}
+
+function array_num(size,num){
+  return Array.apply(null, new Array(size)).map(Number.prototype.valueOf,num);
+}

assets/list.js

@@ -1,32 +1,12 @@
-// Base URL
-var version = "v0.05"
-var dataurl = "https://raw.githubusercontent.com/SDG-data/SDGs/"+version+"/"
-//Read Goals, Targets and Indicators
-var sdgs = [];
-var stats = {};
-
-files = ["goals","targets","indicators"];
-var data_loaded = 0;
-function load_data(){
-  //Reset and Read into memory the SDGs
-  sdgs = {};
-  stats = {};
-  files.forEach(function (f) {
-    console.log("Loading "+f);
-    d3.json(dataurl+f+".json", function (error, data) {
-      //for (var attrname in data) { sdgs[attrname] = data[attrname]; }
-      sdgs[data.meta.id]=data;
-      if (Object.keys(sdgs).length == 3) {
-        update_stats();
-        load_data_state();
-        data_loaded=1;}
-  });
-});
-}
 
 //When page loadded, read data and URL state, if any
 $( document ).ready(load_data());
 
+function page_main(){
+  update_stats();
+  load_data_state();
+}
+
 function load_data_state(){
   var data_state= getURLParameter('data');
   switch(data_state) {
@@ -229,29 +209,6 @@ function list_targets(){
   }
 }
 
-function append(htype,hookElement,id,classes,value){
-  var wrapper = document.createElement("div");
-  var newListItem = document.createElement(htype);
-  wrapper.setAttribute("id", id);
-  newListItem.setAttribute("class", classes);
-  var ListValue = document.createTextNode(value);
-  newListItem.appendChild(ListValue);
-  hookElement.appendChild(wrapper).appendChild(newListItem);
-}
-
-function append_row(hookElement,row){
- var table = document.getElementById(hookElement);
-  var rowObject = table.insertRow(0);
-  for (var i in row){
-    cell = rowObject.insertCell(i);
-    cell.innerHTML = row[i];
-  }
-}
-
-function array_num(size,num){
-  return Array.apply(null, new Array(size)).map(Number.prototype.valueOf,num);
-}
-
 function add_goals(){
   $('#load-all').addClass("active");
   document.getElementById("dashboard-title").innerHTML = "SDG Goals";

assets/viz-101.js

@@ -0,0 +1,54 @@
+
+//When page loadded, read data and URL state, if any
+$( document ).ready(load_data());
+
+function page_main(){
+  add_goals_sidebar();
+  add_goals();
+  load_vizrefs();
+}
+
+function add_goals_sidebar(){
+  $('#sidebar').addClass("active");
+  var sdgList = document.getElementById("sidebar");
+  var goals=sdgs.goals.goals;
+  for (var i in goals){
+    var goal= goals[i];
+    append('a',sdgList,"",""," "+goal.goal+": "+goal.short+".","#goal-"+goal.goal,"");
+  }
+}
+
+function add_goals(){
+  var sdgList = document.getElementById("dashboard-content");
+  var goals=sdgs.goals.goals;
+  for (var i in goals){
+    var goal= goals[i];
+    append('div',sdgList,"goal-"+goal.goal,"h3"," "+goal.goal+": "+goal.title+".");
+  }
+}
+
+function append_viz(vizHook,viz){
+  append('div',vizHook,"viz-"+viz.goal,"h4 lead",viz["viz-title"]);
+  append('a',vizHook,"viz-"+viz.goal,"","Relevant target: "+viz.target,"/web/list/?data=list_targets#");
+  append('p',vizHook,"viz-"+viz.goal,"",viz.description);
+  append_raw(vizHook,viz.embed);
+  append('a',vizHook,"viz-"+viz.goal,"","Source: "+viz["source-name"],viz["source-link"]);
+  append('hr',vizHook,"","","");
+}
+
+var visualizations={};
+function load_vizrefs(){
+  // Load Visualizations references from the json file
+  d3.json("/web/assets/viz-101.json", function (error, data) {
+    for ( var i in data.visualizations){
+      var viz=data.visualizations[i];
+      var vizHook = document.getElementById("goal-"+viz.goal);
+      console.log(viz,vizHook);
+      if (vizHook === null){
+        throw new Error("Something went badly wrong!");
+      }
+    //append(htype,hookElement,id,classes,value,link)
+    append_viz(vizHook,viz);
+  }
+  });
+}

assets/viz-101.json

@@ -0,0 +1,72 @@
+{
+  "visualizations": [
+    {
+      "goal": 1,
+      "target": 1.1,
+      "viz-title": "Extreme poverty IS decreasing",
+      "description":"If developing countries were to grow at the rates they achieved during the 2000’s the global poverty headcount could decline from 14.5% in 2011 to 4.9% in 2030 – short of ‘ending poverty’.",
+      "source-name":"World Bank",
+      "source-link":"http://blogs.worldbank.org/futuredevelopment/poverty-will-only-end-2030-if-growth-shared",
+      "embed": "<img src='http://blogs.worldbank.org/futuredevelopment/files/futuredevelopment/blog_post_chart_11128_image001.png'>"
+    },
+    {
+      "goal": 2,
+      "target": 2.2,
+      "viz-title": "World Map of Food Supply (kcal per capita per day), 1961-2009",
+      "description":"",
+      "source-name":"Max Rosner",
+      "source-link":"http://ourworldindata.org/wp-content/uploads/datamaps/kcalPerCapita_since1961_FAO/kcalPerCapita_since1961_FAO.html",
+      "embed": "<iframe width='600px' height='400px' src='http://ourworldindata.org/wp-content/uploads/datamaps/kcalPerCapita_since1961_FAO/kcalPerCapita_since1961_FAO.html'></iframe>"
+    },
+    {
+      "goal": 2,
+      "target": 2.3,
+      "viz-title": "Yield Gap for Major Crops",
+      "description":"",
+      "source-name":"Food and Agriculture Organization of the United Nations (FAO)",
+      "source-link":"http://www.fao.org/nr/gaez/about-data-portal/yield-and-production-gaps/en/",
+      "embed": "<a href='http://www.fao.org/nr/gaez/about-data-portal/yield-and-production-gaps/en/'><img src='http://www.fao.org/uploads/pics/GAEZportal_Page_6.png'></a>"
+    },
+    {
+      "goal": 5,
+      "target": "5.1, 5.5, 5.c",
+      "viz-title": "Female Representation in National Parliaments",
+      "description":"",
+      "source-name":"No Ceilings",
+      "source-link":"http://noceilings.org/map/#FEREPNTP&2013",
+      "embed": "<a href='http://noceilings.org/map/#FEREPNTP&2013'><img src='http://noceilings.org/map/embed/FEREPNTP-2013-w.png' alt='No Ceilings embedded map' width='600px' border='0'/></a>"
+    },
+    {
+      "goal": 6,
+      "target": 6.1,
+      "viz-title": "Overall Water Risk - Current Conditions",
+      "description":"",
+      "source-name":"World Resources Institute",
+      "source-link":"http://tinyurl.com/obhrvx3",
+      "embed": "<a href='http://tinyurl.com/obhrvx3'><img style='width: 600px;' border='0' alt='Overall water risk - Current conditions' src='/web/assets/img/6_water_risk.jpg'></a>"
+
+    },
+    {
+      "goal": 14,
+      "target": 14.1,
+      "viz-title": "Marine Pollution - Clean Waters Index",
+      "description":"",
+      "source-name":"Ocean Health Index",
+      "source-link":"http://www.oceanhealthindex.org/Goals/Clean_Waters",
+      "embed": "<a href='http://www.oceanhealthindex.org/Countries'><img style='width: 600px;' border='0' alt='Clean waters index' src='/web/assets/img/14_clean_waters.jpg'></a>"
+    },
+    {
+      "goal": 16,
+      "target": 6.1,
+      "viz-title": "Homicides per 100,000 per year",
+      "description":"",
+      "source-name":"Max Rosner",
+      "source-link":"http://ourworldindata.org/data/violence-rights/homicides/#world-map-of-homicide-rates-today-max-roserref",
+      "embed": "<a href='http://www.ourworldindata.org/data/violence-rights/homicides/#world-map-of-homicide-rates-today-max-roserref'><img style='width: 600px;' border='0' alt='Clean waters index' src='http://ourworldindata.org/VisualHistoryOf/Violence/StaticImages/Homicides-per-100_000-per-year.png'></a>"
+    }
+  ],
+  "meta": {
+    "id": "Visualization",
+    "description": "One Visualization per goal"
+  }
+}

data-overview.md

@@ -0,0 +1,28 @@
+---
+layout: empty
+title: One Visualization per Goal
+permalink: /data-101/
+js:
+ - data-loader.js
+ - viz-101.js
+---
+
+<div class="row">
+  <div class="col-sm-2 col-md-2 sidebar" id="sidebar">
+   <ul class="nav nav-sidebar" >
+
+   </ul>
+
+  </div>
+  <div class="col-sm-9 col-sm-offset-2 col-md-10 col-md-offset-2 main">
+   <h1 id='dashboard-title' class="page-header">{{page.title}}</h1>
+   <div class="row ">
+   <p id='dashboard-content' class="sub-header"></p>
+  </div>
+ </div>
+</div>
+
+
+
+  </body>
+</html>

fulllist.md

@@ -2,7 +2,9 @@
 layout: empty
 title: Full List
 permalink: /list/
-js: list.js
+js:
+ - data-loader.js
+ - list.js
 redirect_from:
   - /
 ---