Tarea 4 - Visualization horizontal v3

.block

license: mit

README.md

Built with blockbuilder.org

forked from damayor's block: Tarea 3 - Grades Visualization

What?

Table with attributes "code" and "grade"

Why?

Tasks

Present and enjoy

Compare and summarize all the course grades. Identify a specific grade of a student.

Targets

Grades distribution

How?

Align continous values and express them in a continous scale.

Marks

Lines

Channels

Length for cuantitative grade Hue for range grades

Short review

De acuerdo a los datos, se tiene un atributo categórico y un cuantitativo. De acuerdo a los conceptos aprendidos, el mejor canal para representar éstos datos es la longitud en una escala alineada. Por ello se decidió realizar un diagrama de barras utilizando la longitud de la barra para representar la nota obtenida. Se decidió realizar horizontal para poder tener una mejor visualización sobre los códigos de los usuarios.

Por otro lado tambien es posible detallar la nota específica de cada usuario ("Detail on demand") y veríficar de acuerdo al matiz(hue) si aprobó, reprobó o pasó raspando.

forked from damayor's block: Tarea 3 - Grades Visualization horizontal

forked from damayor's block: Tarea 3 - Grades Visualization horizontal

forked from damayor's block: Tarea 4 - Visualization horizontal v3

forked from f94f's block: Tarea 4 - Visualization horizontal v3

data.json

[
 {
   "grandparent": "Environmental Health",
   "parent": "Health Impacts",
   "label": "Child Mortality",
   "value": 100
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Air Quality",
   "label": "Household Air Quality",
   "value": 95
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Air Quality",
   "label": "Air Pollution - Average Exposure to PM2.5",
   "value": 82.24
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Air Quality",
   "label": "Air Pollution - Average PM2.5 Exceedance",
   "value": 58.27
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Water and Sanitation",
   "label": "Access to Sanitation",
   "value": 100
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Water and Sanitation",
   "label": "Access to Drinking Water",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Water Resources",
   "label": "Wastewater Treatment",
   "value": 95.18
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Agriculture",
   "label": "Agricultural Subsidies",
   "value": 38.62
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Agriculture",
   "label": "Pesticide Regulation",
   "value": 92
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Forests",
   "label": "Change in Forest Cover ",
   "value": 31.35
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Fisheries",
   "label": "Fish Stocks",
   "value": 8.33
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Fisheries",
   "label": "Coastal Shelf Fishing Pressure",
   "value": 18.46
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": " Biodiversity and Habitat",
   "label": "Terrestrial Protected Areas (National Biome Weights)",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": " Biodiversity and Habitat",
   "label": "Terrestrial Protected Areas (Global Biome Weights)",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": " Biodiversity and Habitat",
   "label": "Marine Protected Areas",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": " Biodiversity and Habitat",
   "label": "Critical Habitat Protection",
   "value": 0
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Trend in Carbon Intensity",
   "value": 65.24
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Change of Trend in Carbon Intensity",
   "value": 27.82
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Trend in CO2 Emissions per KwH",
   "value": 58.26
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Access to Electricity",
   "value": 100
 }
]

index.html

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

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}
  
  .over{
display:inline;
}

.axis {
  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>
  <h1> Germany EPI Score </h1>  
  <!--label><input type="checkbox" label="sort"> Sort values</label-->
  	<label>
      <input type="checkbox" name="grup" id="groupParents"> Categories
    </label>
  	<!--label>
      <input type="checkbox" name="grupP" id="groupGrandparents">  Environmental Health/Ecosystem Vitality
    </label-->   

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<script>
var data = [
 {
   "grandparent": "Environmental Health",
   "parent": "Health Impacts",
   "label": "Child Mortality",
   "value": 100
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Air Quality",
   "label": "Household Air Quality",
   "value": 95
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Air Quality",
   "label": "Air Pollution - Average Exposure to PM2.5",
   "value": 82.24
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Air Quality",
   "label": "Air Pollution - Average PM2.5 Exceedance",
   "value": 58.27
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Water and Sanitation",
   "label": "Access to Sanitation",
   "value": 100
 },
 {
   "grandparent": "Environmental Health",
   "parent": "Water and Sanitation",
   "label": "Access to Drinking Water",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Water Resources",
   "label": "Wastewater Treatment",
   "value": 95.18
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Agriculture",
   "label": "Agricultural Subsidies",
   "value": 38.62
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Agriculture",
   "label": "Pesticide Regulation",
   "value": 92
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Forests",
   "label": "Change in Forest Cover ",
   "value": 31.35
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Fisheries",
   "label": "Fish Stocks",
   "value": 8.33
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Fisheries",
   "label": "Coastal Shelf Fishing Pressure",
   "value": 18.46
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": " Biodiversity and Habitat",
   "label": "Terrestrial Protected Areas (National Biome Weights)",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": " Biodiversity and Habitat",
   "label": "Terrestrial Protected Areas (Global Biome Weights)",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": " Biodiversity and Habitat",
   "label": "Marine Protected Areas",
   "value": 100
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Trend in Carbon Intensity",
   "value": 65.24
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Change of Trend in Carbon Intensity",
   "value": 27.82
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Trend in CO2 Emissions per KwH",
   "value": 58.26
 },
 {
   "grandparent": "Ecosystem Vitality",
   "parent": "Climate and Energy",
   "label": "Access to Electricity",
   "value": 100
 }
]

var parentlabels= [
 " 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"];
  
var parentvalues= [100,78.5,100,95.18,65.31,31.35,13.4,100,62.77];
  
 var grandparentvalues = [92.83, 72.73];
  
var margin = {top: 20, right: 20, bottom: 30, left: 155},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom; 
  
var x = d3.scale.linear()
    .range([0,width]);

var y = d3.scale.ordinal()
    .rangePoints([0,height-margin.bottom]);


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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
		.tickSize(0);
var BAR_HEIGHT = 17;
  
var colScale = d3.scale.ordinal()
    .range([    "#ff8c00","#f9bb00","#ff6100","#555f9f",, "#10599c","#0099cc","#216342", "#339966","#009900"]);
  

  /*
var tip = d3.tip()
  	.attr('class', 'd3-tip')
  	.offset([-10, 0])
  	.html(function(d) {
      if(d.grade<3.0)
    		return "<strong>Grade:</strong> <span style='color:red'>" + d.grade + "</span>";
      else if(d.grade>3.0 && d.grade <3.5)
    		return "<strong>Grade:</strong> <span style='color:yellow'>" + d.grade + "</span>";
      else
        return "<strong>Grade:</strong> <span style='color:lightgreen'>" + d.grade + "</span>";
  });
  
  */
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 + ")");

//svg.call(tip);  
  

  
//d3.tsv("grades.tsv", type, function(error, data) {
 // if (error) throw error;

  //y.domain(data.map(function(d) { return d.grandparent; }));
  //y.domain(data.map(function(d) { return d.parent; }));
  y.domain(data.map(function(d) { return d.label; }));
  x.domain([0, d3.max(data, function(d) { return d.value; })]);
  
  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(0," + margin.top +  ")")
      .call(yAxis);
  		

  svg.append("g")
      .attr("class", "x axis")
      .call(xAxis)
    .append("text")
      .attr("x", 9)
      .attr("dx", 60.2+"em")
      .style("text-anchor", "end")
  		.text("EPI score");
        

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
   		.attr("x", 0 )//function(d) { return x(d.grade); })
      .attr("y", function(d) { return margin.top+y(d.label); })
  				//.attr("y", function(d) { return margin.top+y(d.parent); })
  				//.attr("y", function(d) { return margin.top+y(d.grandparent); })
  		//.on('mouseover', tip.show)
  		//.on('mouseout', tip.hide)
  		//.on("click", clicked) ??
      .attr("height", BAR_HEIGHT)//height/data.length )//y.rangeBand())
  		/*.attr("width",0)
    	.transition()
    	.duration(2000)*/
  		.attr("width", function(d) { return x(d.value); })
  	.style("fill", function(d) {return colScale(d.parent);} );
  
  
function type(d) {
  d.value = +d.value;
  return d;
}
  
//d3.select("input").on("change", change);
d3.select("#groupParents").on("change", groupParents);
d3.select("#groupGrandparents").on("change", groupGrandparents);

	var sortTimeoutP = setTimeout(function() {
    d3.select("#groupParents").property("checked", true).each(groupParents);
  }, 2000);
  
  var sortTimeoutGP = setTimeout(function() {
    d3.select("#groupGrandparents").property("checked", true).each(groupGrandparents);
  }, 2000);
  
/*
function clicked(d) {
  var x, y, k;

  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = centroid[0];
    y = centroid[1];
    k = 4;
    centered = d;
  } else {
    x = width / 2;
    y = height / 2;
    k = 1;
    centered = null;
  }

  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

  g.transition()
      .duration(750)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
      .style("stroke-width", 1.5 / k + "px");
}
*/
  
function change() {
/*    clearTimeout(sortTimeout);

    // Copy-on-write since tweens are evaluated after a delay.
    var y0 = y.domain(data.sort(this.checked
        ? function(a, b) { return b.value - a.value; }
        : function(a, b) { return d3.ascending(a.label, b.label); })
        .map(function(d) { return d.label; }))
        .copy();

    svg.selectAll(".bar")
        .sort(function(a, b) { return y0(a.label) - y0(b.label); });

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

    transition.selectAll(".bar")
        .delay(delay)
        .attr("y", function(d) { return y0(d.label)+margin.top; });

    transition.select(".y.axis")
        .call(yAxis)
      .selectAll("g")
        .delay(delay);
 */ }
  
function groupParents() {
  var BAR_HEIGHT = 37;
  /*y.domain(data.map(function(d) { return d.parent; }));
  svg.selectAll(".bar")
    .enter()
    .append("rect")
  	.attr("y", function(d) { return margin.top+y(d.parent); })*/
  /*var pdata = d3.nest()
  .key(function(d) { return d.parent;})
  .rollup(function(d) { 
   	return d3.mean(d, function(g) {return g.value; });})
  .entries(data);
  
  pdata.forEach(function(d) {
 	d.parent = d.key;
 	d.value = d.values;
	});*/
      
      //code to sort
      clearTimeout(sortTimeoutP);
  
		//var y0= y.domain(data.map(function(d) { return d.parent; })).copy();
 
  	var y0 = y.domain(data.map(this.checked
        ? function(d) { return d.parent;}
        : function(d) {
      //TODO desagregar
      			VAR_HEIGHT= 17;
						return d.label; }))
        //.map(function(d) { return d.parent; })
        .copy();

    svg.selectAll(".bar")
  	.attr("y", function(d,i) { return margin.top+y(d.parent); })
    .attr("width", function(d,i) { return x(parentvalues[i/2]); })

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

    transition.selectAll(".bar")
        .delay(delay)
        .attr("y", function(d) { return y0(d.parent)+margin.top; })
    		.attr("height", BAR_HEIGHT)
    		
    transition.select(".y.axis")
        .call(yAxis)
      .selectAll("g")
        .delay(delay);
} 
/*  
function groupGrandparents() {
  
   var BAR_HEIGHT = 167;
  
  /*y.domain(data.map(function(d) { return d.grandparent; }));
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
  .attr("y", function(d) { return margin.top+y(d.grandparent); })
}*//*   
  
  clearTimeout(sortTimeoutGP);
  
		var y0= y.domain(data.map(function(d) { return d.grandparent; }))   ;
 //x.domain([0, d3.max(parentvalues)]);

    svg.selectAll(".bar")
    //.append("rect")
  	.attr("y", function(d) { return margin.top+y0(d.grandparent); })
    //.style("fill", function(d) {return [colScale[0],colScale[5]];} )
    .attr("height", BAR_HEIGHT)
    .attr("width", function(d,i) { return x(grandparentvalues[i] );})

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

    /*transition.selectAll(".bar")
        .delay(delay)
        .attr("y", function(d) { return y0(d.grandparent)+margin.top; })
    		.attr("height", BAR_HEIGHT)
    		.attr("width", function(d,i) { return x(grandparentvalues[i] );})
	

    transition.select(".y.axis")
        .call(yAxis)
      	.selectAll("g")
        .delay(delay);
}*/
</script>
  
  <div>
        <article>
          <br/>
            <div class="over" style="margin: 1px;""color:#697173;" >OVERALL RANK</div>
          <div class="over" style="margin: 40px;" "color:#697173;">OVERALL SCORE</div>
          <br/>
          <div class="over" style= "margin: 1px;" "font-size:12px; color:#909596;">6/167</div>
            <div class="over"  style="margin: 129px;" "font-size:12px; color:#909596;">80.47/100</div>
            <br/>
          <br/>
            <table id="table-1">
              <tr>
                <td>GDP/CAPITA<br/>$44,010</td>
                <td style="border-right: 2px solid #697173;border-left: 2px solid #697173;">MILLION PEOPLE<br/>81.89</td>
                <td>SQUARE KM<br/>357,054</td>
              </tr>
            </table>
            <br/>
        </article>
      </div>