D3 Examples - Tarea4-Task4.2

Tarea4-Task4.2

Homework 4.
Laura Cortes 201326232
Anamaria Mojica 201316580

For the analysis:

What:

Items: each row represent the environmental performance index (EPI) for 178 countries with the respective ranks, and features listed below:

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

EV - Climate and Energy

Child Mortality

Household Air Quality

Air Pollution - Average Exposure to PM2.5

Air Pollution - Average PM2.5 Exceedance

Access to Sanitation

Access to Drinking Water

Wastewater Treatment

Agricultural Subsidies

Pesticide Regulation

Change in Forest Cover

Fish Stocks

Coastal Shelf Fishing Pressure

Terrestrial Protected Areas (National Biome Weights)

Terrestrial Protected Areas (Global Biome Weights)

Marine Protected Areas

Critical Habitat Protection

Trend in Carbon Intensity

Change of Trend in Carbon Intensity

Trend in CO2 Emissions per KwH

Access to Electricity

Why:

How:

Criticism:

Effectiveness:

Expressiveness: The principle says that the codification should express all but, only the attributes from the dataset. They are using the saturation of some colors such as green and blue, so that, gives the idea that some attributes are more important than others which is not necessarily true. Nevertheless the visualization includes every indicator clearly.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.x.axis path {
  display: none;
}
​
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
​
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0,0,0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
​
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>
    <div id="filter">
    <b>Countries:</b>
  </div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
​
//Margins
var margin = {top: 40, right: 20, bottom: 100, left: 65},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
//axis Variables (scale)
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
​
var y = d3.scale.linear()
    .range([height, 0]);
​
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
  
//create svg  
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 + ")");
      
//create the dropdown-list
var dropDown = d3.select("#filter").append("select").attr('class','select')
                                        .attr("name", "country-list")
                                        .on('change',onchange);
  
  //File
var selectedValue = "Switzerland.csv";
​
// create message-Popout
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    if(d.Value)
    {return "<strong>Index:</strong> <span style='color:#feff32'>" + d.Value + "</span>"}
    else{return "<strong>Index:</strong> <span style='color:#feff32'>" + "NA" + "</span>"};
  });
  
 //load multiple files
  queue()
    .defer(d3.csv,selectedValue)
    .defer(d3.csv, "data2014.csv")
    .await(loadData)
 
  //load file
  function loadData (error,land,countries){
   if (error) throw error;
  
    //create tip
svg.call(tip); // create svg
​
    //domain axis variables
  x.domain(land.map(function(d) { return d.Features; }));
  y.domain([0, d3.max(land, function(d) { return parseFloat(d.Value) || -1; })]);
​
      
  //load countries in the selector
        var options = dropDown.selectAll("option")
         .data(countries)
         .enter()
           .append("option");
        options.text(function (d) {  return d.Rank+". " + d.Country; })
       .attr("value", function (d) { return d.Country; })
       .attr("id", function (d) { return d.Rank; });
      
      
      
  //add x axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(10," + height + ")")
      .call(xAxis)
       .selectAll("text")   
            .style("text-anchor", "end")
            .attr("dx", "-.em")
            .attr("dy", ".55em")
            .attr("transform", function(d) {
                return "rotate(-20)" 
                });
    
    // add y axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Index");
​
      // load graph
  svg.selectAll(".bar")
      .data(land)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Features)+6; })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(parseFloat(d.Value) || -1); })
      .attr("height", function(d) { return height - y(d.Value); })
        .style("fill",function(d,i){if(i==0){return "RGB(247,150,70)";}
                                  else if(i==1|| i==2||i==3){return "RGB(245,201,24)";}
                                  else if(i==4||i==5){return "RGB(250,110,44)";}
                                  else if(i==6){return "RGB(214,127,190)";}
                                  else if(i==7|| i==8){return "RGB(54,105,179)";}
                                  else if(i==9){return "RGB(0,154,204)";}
                                  else if(i==10|| i==11){return "RGB(0,140,140)";}
                                  else if(i==11|| i==12||i==13||i==14)
                                  {return "RGB(62,188,162)";}
                                  else{return "RGB(0,128,0)";}})
        .style("hover","brown")
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
    
} 
    
  //method on change drop-down
  function onchange(){
    selectedValue = d3.select('select').property("value")+".csv";
    
    //Load multiple data again 
    queue()
    .defer(d3.csv,selectedValue)
    .defer(d3.csv, "data2014.csv")
    .await(reLoad)
   function reLoad(error,country,countries)
   {
        // Scale the range of the data again
  x.domain(country.map(function(d) { return d.Features; }));
  y.domain([0, d3.max(country, function(d) { return parseFloat(d.Value) || -1; })]);
     
     // Make the changes
    svg.select(".x axis") // change the x axis
            .transition()
                    .duration(750)
            .call(xAxis);
  svg.select(".y axis") // change the y axis
                    .transition()
                    .duration(750)
                    .call(yAxis);
 svg.selectAll(".bar")   // change bars
                    .data(country)
                    .selectAll(".bar")
            .attr("height", function(d) { return height - y(d.Value); });
​
   }
  }
  
  //pre-procesing
  function type(d) {
  d.Features = d.Features;
  d.Value = parseFloat(d.Value) || -1;
  return d;
}
</script>
​
    