|
|
|
var margin = {top: 20, right: 10, bottom: 30, left: 200}, |
|
width = 830 - margin.left - margin.right, |
|
height = 300 - margin.top - margin.bottom; |
|
|
|
var xScale = d3.scaleLinear().range([0, width]); |
|
|
|
var yScale = d3.scaleBand().range([0, height]); |
|
|
|
var colScale = d3.scaleOrdinal(d3.schemeCategory20); |
|
|
|
var cat1 = [ |
|
{"key":"Health Impacts", "value":"#fee8c8"}, |
|
{"key":"Air Quality", "value": "#fdbb84"}, |
|
{"key":"Water and Sanitation", "value":"#e34a33"}, |
|
]; |
|
|
|
var cat2 = [ |
|
{"key":"Water Resources", "value": "#edf8fb"}, |
|
{"key":"Agriculture", "value":"#bfd3e6"}, |
|
{"key":"Forests", "value":"#9ebcda"}, |
|
{"key":"Fisheries", "value":"#8c96c6"}, |
|
{"key":"Biodiversity and Habitat", "value": "#8856a7"}, |
|
{"key":"Climate and Energy", "value":"#810f7c"} |
|
]; |
|
|
|
var BAR_WIDTH = 10; |
|
|
|
var svg1 = d3.select("#chart1").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
var svg2 = d3.select("#chart2").append("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom) |
|
.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
var xAxis1 = svg1.append("g") |
|
.attr("class", "axis x--axis"); |
|
var yAxis1 = svg1.append("g") |
|
.attr("class", "axis y--axis"); |
|
|
|
var xAxis2 = svg2.append("g") |
|
.attr("class", "axis x--axis"); |
|
var yAxis2 = svg2.append("g") |
|
.attr("class", "axis y--axis"); |
|
|
|
var legend1 = d3.select("#legend1"); |
|
var legend2 = d3.select("#legend2"); |
|
|
|
function update(svgChart, myData, attrX, attrY, xAxis, yAxis, legend, colorCategories){ |
|
var fnAccX = function(d) { return d[attrX]; }; |
|
var fnAccY = function(d) { return d[attrY]; }; |
|
|
|
var spaceForBar = (height/myData.length) - BAR_WIDTH; |
|
|
|
xScale.domain([0, d3.max(myData, fnAccX)]); |
|
yScale.domain(myData.map(fnAccY)); |
|
|
|
var bars = svgChart.selectAll(".bars") |
|
.data(myData); |
|
|
|
//Enter |
|
var barsEnter = bars.enter() |
|
.append("rect") |
|
.attr("class", "bars") |
|
.attr("width", 0); |
|
|
|
//Exit |
|
bars.exit() |
|
.transition() |
|
.duration(1000) |
|
.attr("width", 0) |
|
.remove(); |
|
|
|
//Update |
|
bars.merge(barsEnter) |
|
.attr("x", 0) |
|
.attr("y", function(d,i) {return (spaceForBar/2 + i * (BAR_WIDTH + spaceForBar));}) |
|
.style("fill", function (d) {return setColorByCategory(d.category);}) |
|
.attr("height", BAR_WIDTH) |
|
.transition().duration(1000) |
|
.attr("width", function(d) { |
|
var value = xScale(fnAccX(d)); |
|
if(isNaN(value)){ |
|
return 0; |
|
} |
|
else { |
|
return value; |
|
} |
|
}); |
|
|
|
xAxis.transition() |
|
.duration(1000) |
|
.call(d3.axisTop(xScale).ticks(10)); |
|
|
|
yAxis.transition() |
|
.duration(1000) |
|
.call(d3.axisLeft() |
|
.scale(yScale).tickArguments(function(d) {return yScale(fnAccY(d));})); |
|
|
|
var group = legend.selectAll("div") |
|
.data(colorCategories.map(function(d){return d.key;})) |
|
.enter().append("div") |
|
.attr("transform", function(d, i) { return "translate(0," + (i * 20) + ")"; }); |
|
|
|
group.append("i") |
|
.attr("width", 18) |
|
.attr("height", 18) |
|
.style("background", function(d,i){ |
|
console.log(colorCategories[i].key + " " + colorCategories[i].value); |
|
return colorCategories[i].value;} |
|
); |
|
|
|
group.append("text") |
|
.style("font-size","9pt") |
|
.text(function(d,i){return colorCategories[i].key;}); |
|
} |
|
|
|
function setColorByCategory(category) { |
|
for (var i=0; i < cat1.length; i++){ |
|
if(cat1[i].key === category){ |
|
return cat1[i].value; |
|
} |
|
} |
|
for (i=0; i < cat2.length; i++){ |
|
if(cat2[i].key === category){ |
|
return cat2[i].value; |
|
} |
|
} |
|
} |
|
|
|
function selectedCountry(myData) { |
|
window.location.hash = '#country'; |
|
var country = d3.select("#country"); |
|
country.select("h1").text(myData.Country); |
|
|
|
var rank = d3.select("#rank"); |
|
rank.select("p").text("Overall Rank: " + myData.Rank + "/178"); |
|
|
|
var EPI = d3.select("#EPI"); |
|
EPI.select("p").text("EPI Score: " + myData.EPI); |
|
|
|
var change = d3.select("#change"); |
|
change.select("p").text("10-Year Change: " + myData["10-Year Percent Change"] + "%"); |
|
|
|
var dataChart1 = []; |
|
var dataChart2 = []; |
|
for (var attr in myData["Enviromental Healh"]["Health Impacts"]){ |
|
dataChart1.push( { |
|
"key":attr, |
|
"value":myData["Enviromental Healh"]["Health Impacts"][attr], |
|
"category":"Health Impacts" |
|
}); |
|
} |
|
for (attr in myData["Enviromental Healh"]["Air Quality"]){ |
|
dataChart1.push( { |
|
"key":attr, |
|
"value":myData["Enviromental Healh"]["Air Quality"][attr], |
|
"category":"Air Quality" |
|
}); |
|
} |
|
for (attr in myData["Enviromental Healh"]["Water and Sanitation"]){ |
|
dataChart1.push( { |
|
"key":attr, |
|
"value":myData["Enviromental Healh"]["Water and Sanitation"][attr], |
|
"category":"Water and Sanitation" |
|
}); |
|
} |
|
for (attr in myData["Ecosystem Vitality"]["Water Resources"]){ |
|
dataChart2.push( { |
|
"key":attr, |
|
"value":myData["Ecosystem Vitality"]["Water Resources"][attr], |
|
"category":"Water Resources" |
|
}); |
|
} |
|
for (attr in myData["Ecosystem Vitality"].Agriculture){ |
|
dataChart2.push( { |
|
"key":attr, |
|
"value":myData["Ecosystem Vitality"].Agriculture[attr], |
|
"category":"Agriculture" |
|
}); |
|
} |
|
for (attr in myData["Ecosystem Vitality"].Forests){ |
|
dataChart2.push( { |
|
"key":attr, |
|
"value":myData["Ecosystem Vitality"].Forests[attr], |
|
"category":"Forests" |
|
}); |
|
} |
|
for (attr in myData["Ecosystem Vitality"].Fisheries){ |
|
dataChart2.push( { |
|
"key":attr, |
|
"value":myData["Ecosystem Vitality"].Fisheries[attr], |
|
"category":"Fisheries" |
|
}); |
|
} |
|
for (attr in myData["Ecosystem Vitality"]["Biodiversity and Habitat"]){ |
|
dataChart2.push( { |
|
"key":attr, |
|
"value":myData["Ecosystem Vitality"]["Biodiversity and Habitat"][attr], |
|
"category":"Biodiversity and Habitat" |
|
}); |
|
} |
|
for (attr in myData["Ecosystem Vitality"]["Climate and Energy"]){ |
|
dataChart2.push( { |
|
"key":attr, |
|
"value":myData["Ecosystem Vitality"]["Climate and Energy"][attr], |
|
"category":"Climate and Energy" |
|
}); |
|
} |
|
var title1 = d3.select("#titleChart1").select("p") |
|
.text("Enviromental Healh Score: " + myData["Enviromental Healh"].Value); |
|
var title2 = d3.select("#titleChart2").select("p") |
|
.text("Ecosystem Vitality Score: " + myData["Ecosystem Vitality"].Value); |
|
|
|
update(svg1, dataChart1, "value", "key", xAxis1, yAxis1, legend1, cat1); |
|
update(svg2, dataChart2, "value", "key", xAxis2, yAxis2, legend2, cat2); |
|
|
|
} |
|
|
|
d3.csv("epi2014.csv", function(err, data) { |
|
if(err) { |
|
console.err(err); |
|
alert(err); |
|
return; |
|
} |
|
|
|
data.forEach(function (d) { |
|
d["EPI Score"]=+d["EPI Score"]; |
|
}); |
|
|
|
$.getJSON("world.json",function(worldMap){ |
|
|
|
worldMap.features.forEach(function(d){ |
|
data.forEach(function (e){ |
|
if(d.properties.name.indexOf(e.Country) !== -1 || e.Country.indexOf(d.properties.name) !== -1 ){ |
|
d.properties.indicators = {}; |
|
d.properties.indicators.Country = e.Country; |
|
d.properties.indicators.Rank = +e.Rank; |
|
d.properties.indicators.EPI = +e["EPI Score"]; |
|
d.properties.indicators["10-Year Percent Change"] = +e["10-Year Percent Change"]; |
|
d.properties.indicators["Enviromental Healh"] = {}; |
|
d.properties.indicators["Ecosystem Vitality"] = {}; |
|
d.properties.indicators["Enviromental Healh"].Value = +e["Environmental Health"]; |
|
d.properties.indicators["Ecosystem Vitality"].Value = +e["Ecosystem Vitality"]; |
|
d.properties.indicators["Enviromental Healh"]["Health Impacts"] = {}; |
|
d.properties.indicators["Enviromental Healh"]["Air Quality"] = {}; |
|
d.properties.indicators["Enviromental Healh"]["Water and Sanitation"] = {}; |
|
d.properties.indicators["Ecosystem Vitality"]["Water Resources"] = {}; |
|
d.properties.indicators["Ecosystem Vitality"].Agriculture = {}; |
|
d.properties.indicators["Ecosystem Vitality"].Forests = {}; |
|
d.properties.indicators["Ecosystem Vitality"].Fisheries = {}; |
|
d.properties.indicators["Ecosystem Vitality"]["Biodiversity and Habitat"] = {}; |
|
d.properties.indicators["Ecosystem Vitality"]["Climate and Energy"] = {}; |
|
d.properties.indicators["Enviromental Healh"]["Health Impacts"]["Child Mortality"] = +e["Child Mortality"]; |
|
d.properties.indicators["Enviromental Healh"]["Air Quality"]["Household Air Quality"] = +e["Household Air Quality"]; |
|
d.properties.indicators["Enviromental Healh"]["Air Quality"]["Air Pollution - Average Exposure to PM2.5"] = +e["Air Pollution - Average Exposure to PM2.5"]; |
|
d.properties.indicators["Enviromental Healh"]["Air Quality"]["Air Pollution - Average PM2.5 Exceedance"] = +e["Air Pollution - Average PM2.5 Exceedance"]; |
|
d.properties.indicators["Enviromental Healh"]["Water and Sanitation"]["Access to Sanitation"] = +e["Access to Sanitation"]; |
|
d.properties.indicators["Enviromental Healh"]["Water and Sanitation"]["Access to Drinking Water"] = +e["Access to Drinking Water"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Water Resources"]["Wastewater Treatment"] = +e["Wastewater Treatment"]; |
|
d.properties.indicators["Ecosystem Vitality"].Agriculture["Agricultural Subsidies"] = +e["Agricultural Subsidies"]; |
|
d.properties.indicators["Ecosystem Vitality"].Agriculture["Pesticide Regulation"] = +e["Pesticide Regulation"]; |
|
d.properties.indicators["Ecosystem Vitality"].Forests["Change in Forest Cover "] = +e["Change in Forest Cover "]; |
|
d.properties.indicators["Ecosystem Vitality"].Fisheries["Fish Stocks"] = +e["Fish Stocks"]; |
|
d.properties.indicators["Ecosystem Vitality"].Fisheries["Coastal Shelf Fishing Pressure"] = +e["Coastal Shelf Fishing Pressure"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Biodiversity and Habitat"]["Terrestrial Protected Areas (National Biome Weights)"] = +e["Terrestrial Protected Areas (National Biome Weights)"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Biodiversity and Habitat"]["Terrestrial Protected Areas (Global Biome Weights)"] = +e["Terrestrial Protected Areas (Global Biome Weights)"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Biodiversity and Habitat"]["Marine Protected Areas"] = +e["Marine Protected Areas"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Biodiversity and Habitat"]["Critical Habitat Protection"] = +e["Critical Habitat Protection"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Climate and Energy"]["Trend in Carbon Intensity"] = +e["Trend in Carbon Intensity"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Climate and Energy"]["Change of Trend in Carbon Intensity"] = +e["Change of Trend in Carbon Intensity"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Climate and Energy"]["Trend in CO2 Emissions per KwH"] = +e["Trend in CO2 Emissions per KwH"]; |
|
d.properties.indicators["Ecosystem Vitality"]["Climate and Energy"]["Access to Electricity"] = +e["Access to Electricity"]; |
|
} |
|
}) |
|
}); |
|
|
|
var map = L.map('map', { zoomControl:false }).setView([39, -1], 1.8); |
|
map.dragging.disable(); |
|
map.scrollWheelZoom.disable(); |
|
var layer = L.geoJson(worldMap, { |
|
clickable: true, |
|
style: function(feature) { |
|
return { |
|
stroke: true, |
|
color: "#0d174e", |
|
weight: 1, |
|
fill: true, |
|
fillColor: setColorByEPI(feature.properties.indicators), |
|
fillOpacity: 1 |
|
}; |
|
}, |
|
onEachFeature: function (feature, layer) { |
|
layer.on({ |
|
click: function(e) { |
|
if (e.target.feature.properties.indicators === undefined){ |
|
console.log(feature); |
|
} |
|
selectedCountry(e.target.feature.properties.indicators); |
|
} |
|
}); |
|
}, |
|
}); |
|
layer.addTo(map); |
|
var legend = L.control({ |
|
position: 'bottomleft' |
|
}); |
|
legend.onAdd = function() { |
|
var div = L.DomUtil.create('div', 'legend'), |
|
values = [10,20,30,40,50,60,70,80,90]; |
|
div.innerHTML += 'EPI SCORE<br>'; |
|
for (var i = 0; i < values.length; i++) { |
|
div.innerHTML += |
|
'<i style="background:' + setColorByForLegend(values[i] + 1) + '"></i> '+ values[i] + (values[i + 1] ? ' – ' + values[i + 1] +'<br>' : '+'); |
|
} |
|
return div; |
|
}; |
|
legend.addTo(map); |
|
}); |
|
|
|
function setColorByForLegend(epi) { |
|
if (epi > 90) return "#1a9850"; |
|
else if (epi > 80) return "#66bd63"; |
|
else if (epi > 70) return "#a6d96a"; |
|
else if (epi> 60) return "#d9ef8b"; |
|
else if (epi > 50) return "#ffffbf"; |
|
else if (epi > 40) return "#fee08b"; |
|
else if (epi > 30) return "#fdae61"; |
|
else if (epi > 20) return "#f46d43"; |
|
else if (epi > 10) return "#d73027"; |
|
} |
|
|
|
function setColorByEPI(indicators) { |
|
if (indicators === undefined) return "#ffffbf"; |
|
else if (indicators.EPI > 90) return "#1a9850"; |
|
else if (indicators.EPI > 80) return "#66bd63"; |
|
else if (indicators.EPI > 70) return "#a6d96a"; |
|
else if (indicators.EPI > 60) return "#d9ef8b"; |
|
else if (indicators.EPI > 50) return "#ffffbf"; |
|
else if (indicators.EPI > 40) return "#fee08b"; |
|
else if (indicators.EPI > 30) return "#fdae61"; |
|
else if (indicators.EPI > 20) return "#f46d43"; |
|
else if (indicators.EPI > 10) return "#d73027"; |
|
} |
|
|
|
|
|
}); |