Tarea4-Task4.2

Homework 4.
Laura Cortes 201326232
Anamaria Mojica 201316580

For the analysis:

What:
Table:
categorical attributes.
categorical attribute.

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:
Analyze: Present the information for the consumption of the citizens. It is presumable that people will explore through countries without knowing exactly which attribute is going to be interesting for them. Through the visualization is expected that people have the ability to identify outliers, trends for a specific country and the summary for the selected country. Finally, is hoped that they find dependencies between attributes.
How:
For encoding the information it is used a 3D graph, is not ordered but it is aligned and for the mapping of the attributes they use volume,color hue and saturation. They try to summarize the data of each country making a map and representing the embed information through those 3D graphs. Criticism:
Effectiveness: The principle say that in the visualization should encode most important attributes with highest ranked channels. In this visualization it is used height (depth), in volumes, to express the quantitative scale. Which does not represent in a clear way the scale for the human and can compare the values with each other. However in the diagram is express the values explicit with number. The highest ranked channels are not used in this visualization properly.Position is used circularly that in the context of the data does not make sense. Furthermore this distribution generates occlusion.

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.

<!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>

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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js