EPI Interactive Bar Chart

Built with blockbuilder.org

Please click the 'Open' link at the bottom of the viz to view the full image.

Credits

Emilio Alvarado
Adriana López

About

This bar chart is constructed from a TSV file storing the Environment Performance Index (EPI) of all countries.

The explanation about EPI variables can be found in http://epi.yale.edu/. The dataset was located in the section: http://epi.yale.edu/downloads. The data for 2014 can be downloaded from: http://epi.yale.edu/sites/default/files/2014_epi_framework_indicator_scores_friendly_0.xls.

The next section presents the visualization analysis based on Tamara's Analytics framework.

What, Why and How Analysis

What: The dataset is formed by a table, with an ordinal attribute (the countries) and some quantitative attributes (Year, EPI Score, 10-Year Percent Change, Environmental Health, Ecosystem Vitality, EH - Health Impacts, EH - Air Quality, EH -Water and Sanitation, EV - Water Resources, EV - Agriculture, EV - Forests, EV - Fisheries, EV- Biodiversity and Habitat and EV - Climate and Energy).

Why: The following are the two main tasks this viz is made for:

Present (action) the distribution (target) of he EPI variables scores among the whole countries.
Discover (action) special features (target) as the countries with the less score in a specific variable.

How: We used the line as the mark and the length as the channel. The visualization presents the data for each variable. For this task, you can filter the EPI variable with the selector on the top of the viz.

Decisions

1. We used the line mark and the channel length to represent the quantitative attributes (EPI variables), since the length is the best positioned channel in perception assessments of experts.

2. The data is only sorted by the "EPI Score", which let identify the highest and the lowest score, and know which country has the best and worst total score.

3. The color channel was not used to represent the ordinal attribute of the countries, because the number of countries (178) need many hues or scales luminescence, which does not really contribute with the representation. The country label on each data was used instead, which let identify the score obtained for each country according the selected variable.

4. The color channel was used to represent the EPI variables according the EPI color code, because this color coding is familiar to the EPI community.

5. A conventions table was used at the left of the viz, to show the whole EPI color scale.

What was not so well?

The country labels were in vertical direction, which is some uncomfortable for the user, so we inclined them to 45°.

......................................................................................

forked from jonahwilliams's block: Interactive Bar Chart I

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>

/*.rectangle {
	fill: steelblue;
}*/
.rectangle:hover {
	fill: orange;
}
.axis {
  font: 12px sans-serif;
}

body {
  font: 11px sans-serif;
}
  
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="drop" align=center></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 45, right: 80, bottom: 150, left: 180},
    width = 3500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
var svg = d3.select("body").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 color = d3.scale.ordinal()
		.range(["#FF0000","#60497A","#F79620", "#F5C918", "#FF6600", "#707FBE", "#3669B3", "#009ACC", "#008C8C", "#3EBCA2","#2DB45F"]);

d3.tsv("EPI.tsv", function(error, data){

// filter year
	var data = data.filter(function(d){
    return d.Year == '2014' 
      /*&& (d.Country == 'Germany'
          ||d.Country == 'Colombia'
          ||d.Country == 'Bolivia')*/;});//todo
	// Get every column value
	var elements = Object.keys(data[0])
		.filter(function(d){
			return ((d != "Year") & (d != "Country"));
		});
  
  var epiNames = d3.keys(data[0]).filter(function(key) { 		     return  ((key != "Year") & (key != "Country") & (key != "EPI Score")& (key != "10-Year Percent Change")); });
  
	var selection = elements[0];

var y = d3.scale.linear()
			.domain([0, d3.max(data, function(d){
				return +d[selection];
			})])
			.range([height, 0]);

var x = d3.scale.ordinal()
			.domain(data.map(function(d){ return d.Country;}))
			.rangeBands([0, width]);

var xAxis = d3.svg.axis()
		.scale(x)
	  .orient("bottom");

var yAxis = d3.svg.axis()
		.scale(y)
	  .orient("left");
  
  var legend = svg.selectAll(".legend")
		  .data(epiNames.slice())
		  .enter().append("g")
		  .attr("class", "legend")
		  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
		  .attr("x",  - 180)
		  .attr("width", 18)
		  .attr("height", 18)
		  .style("fill", color);

legend.append("text")
		  .attr("x", -160)
		  .attr("y", 9)
		  .attr("dy", ".35em")
		  //.style("text-anchor", "end")
		  .text(function(d) { return d; });

svg.append("g")
    	.attr("class", "x axis")
    	.attr("transform", "translate(0," + height + ")")
    	.call(xAxis)
    	.selectAll("text")
    	.style("font-size", "12px")
      	.style("text-anchor", "end")
      	.attr("dx", "-.8em")
      	.attr("dy", "-.55em")
      	.attr("transform", "rotate(-45)" );

svg.append("g")
    	.attr("class", "y axis")
    	.call(yAxis);

svg.selectAll("rectangle")
		.data(data)
		.enter()
		.append("rect")
		.attr("class","rectangle").attr("fill","steelblue")
		.attr("width", width/data.length-1)
		.attr("height", function(d){
			return height - y(+d[selection]);
		})
		.attr("x", function(d, i){
			return (width / data.length) * i ;
		})
		.attr("y", function(d){
			return y(+d[selection]);
		})
		.append("title")
		.text(function(d){
			return d.Country + " : " + d[selection];
		});

var selector = d3.select("#drop")
    	.append("select")
    	.attr("id","dropdown")
    	.on("change", function(d){
        	selection = document.getElementById("dropdown");

y.domain([0, d3.max(data, function(d){
				return +d[selection.value];})]);

yAxis.scale(y);

d3.selectAll(".rectangle")
           		.transition()
	            .attr("height", function(d){
					return height - y(+d[selection.value])
          console.log(+d[selection.value]);
				}).attr("fill", getColor(selection.value))
				.attr("x", function(d, i){
					return (width / data.length) * i ;
				})
				.attr("y", function(d){
					return y(+d[selection.value]);
				})
           		.ease("linear")
           		.select("title")
           		.text(function(d){
           			return d.Country + " : " + d[selection.value];
           		});
      
           	d3.selectAll("g.y.axis")
           		.transition()
           		.call(yAxis);

});

selector.selectAll("option")
      .data(elements)
      .enter().append("option")
      .attr("value", function(d){
        return d;
      })
      .text(function(d){
        return d;
      })

function getColor(d) {
      	var color = "";
        console.log(d);
        switch (d) {
          case "Environmental Health":
            color = "#FF0000";
            break;
          case "Ecosystem Vitality":
            color = "#60497A";
            break;
          case "EH - Health Impacts":
            color = "#F79620";
            break;
          case "EH - Air Quality":
            color = "#F5C918";
            break;
          case "EH -Water and Sanitation":
            color = "#FF6600";
            break;
          case "EV - Water Resources":
            color = "#707FBE";
            break;
          case "EV - Agriculture":
            color = "#3669B3";
            break;
          case "EV - Forests":
            color = "#009ACC";
            break;
          case "EV - Fisheries":
            color = "#008C8C";
            break;
          case "EV- Biodiversity and Habitat":
            color = "#3EBCA2";
            break;
          case "EV - Climate and Energy":
            color = "#2DB45F";
            break;
          
          default:
              color = "#919191";
    		}
      return color
    }

});
  
</script>
 
  
  <img src="https://i.dailymail.co.uk/i/pix/2014/10/29/1414603177623_wps_63_EPI_score_JPG.jpg" alt="EPI Table" style="width:803px;height:518;">
  
  
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js