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
';
for (var i = 0; i < values.length; i++) {
div.innerHTML +=
' '+ values[i] + (values[i + 1] ? ' – ' + values[i + 1] +'
' : '+');
}
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";
}
});