Draft Plebiscito Sortable barchart

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

forked from emilioalvarado's block: EPI Interactive Bar Chart

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

.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>
<label><input type="checkbox">Sort values</label>
<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 = 350 - 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","#ff7575","#21f628"]);

// Cargue de los Datos  
d3.tsv("MunicipiosPlebiscito2016VIS.csv", function(error, data){

// Get every column value
  var elements = Object.keys(data[0])
    .filter(function(d){
      return (d != "Municipio");
    });
  
  var headerNames = d3.keys(data[0]).filter(function(key) {         return  ((key != "Municipio") & (key != "Ganador")); });
  
  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.Municipio;}))
      .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(headerNames.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.Municipio + " : " + d[selection];
    });
  
    
    function getColor(d) {
        var color = "";
        console.log(d);
        switch (d) {
          case "Votos por el No":
            color = "#FF0000";
            break;
          case "Votos Zuluaga 2da vuelta":
            color = "#ff7575";
            break;
          case "Votos por el Sí":
            color = "#21f628";
            break;

default:
              color = "#919191";
        }
      return color
    }
  
  
  
  //Ordenar los valores
   d3.select("input").on("change", change);

var sortTimeout = setTimeout(function() {
    d3.select("input").property("checked", true).each(change);
  }, 2000);

svg.selectAll(".rectangle")
        .sort(function(a, b) { return xi(a.Municipio) - xi(b.Municipio); });

var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };

transition.selectAll(".rectangle")
        .delay(delay)
        .attr("x", function(d) { return xi(d.Municipio); });

transition.select(".x.axis")
        .call(xAxis)
        .selectAll("g")
        .delay(delay);
  }

});
  
</script>
</body>

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

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