Tarea 4 - EPI Visualization

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

ISIS4822 - Visual Analytics
201224710 - Felipe Matè
201224714 - David Ricardo Mayorga
Tarea 4. 3D EPI Data Visualization

Expresividad

Los datos que se muestran en la visualización original corresponden a los datos que se tienen, no se están creando ni inventando la información ni las escalas de medición. Ahora bien, los canales que decidieron usar no son los mejores para visualizar esta información. Hicieron uso de una dimensión adicional que, aunque llamativa, obstruye la mirada al momento de observar detenidamente los datos. Esto ocasiona que no sea posible determinar cuál es un máximo en la visualización, o incluso qué tan lejos está un parámetro de su nivel máximo, además de no poder identificar el valor de este si no fuera por la tabla de al lado. Este constante movimiento de alternar la vista entre la tabla y la gráfica se vuelve por ende, molesto. La visualización de las diferentes áreas se vuelve confusa al final, sin poder entender bien que nos quiere decir la visualización. Adicionalmente los colores que manejan son fácilmente confundibles con el color del fondo y pueden agotar al espectador.

Efectividad

Para la visualización usan uno de los canales peor ranqueados: volúmenes. Hay que tener mucho cuidado al usar este canal, pues tiene muchas problemáticas presentes en la visualización como la obstrucción, ocasionando que se sobrepongan datos encima de otros. Hacen uso de la forma y de los colores para diferenciar entre atributos que son dos canales buenos de usar para atributos categóricos, pero la forma, el área e incluso el ángulo no es el mejor canal para atributos ordinales. En este caso usan la forma para indicar también la cantidad del atributo, lo cual lo vuelve un atributo ordinal. Los colores siempre son buenos de usar, pero en éste caso el problema radica en la falta de intensidad, los cual los hace mezclables con el fondo blanco, cansando la mirada del espectador. Para la visualización del mapamundi, se recomienda usar más delimitaciones de figuras que la suma de muchos puntos. Aunque sirve de esta forma, puede ponerse en tela de juicio si un grupo de puntos sean en verdad el país seleccionado (lo que efectivamente sucede en este caso: Polonia está señalada en vez de Alemania).

Nuestra propuesta

La visualización propuesta trata de cerca el hecho que se tiene solo atributos cuantitativos en una misma escala. Por eso se ha decidido que la longitud es el mejor canal para representar la información. Algunos atributos se pueden agregar lo que permite tener una visión más global del país.

Referencicias

http://epi.yale.edu/sites/default/files/2014_epi_framework_indicator_scores_friendly_0.xls

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

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

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.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" name="grup" id="groupParents"> Aggregate Categories
    </label>
  	<label>
      <input type="checkbox" id="groupGrandparents">  Environmental Health/Ecosystem Vitality
    </label>

var grandparentlabels= ["Environmental Health","Ecosystem Vitality"];

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);
 }, 10000);
  
 var sortTimeoutGP = setTimeout(function() {
    d3.select("#groupGrandparents").property("checked", true).each(groupGrandparents);
  }, 20000);
  
/*
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 groupParents() {
  var BAR_HEIGHT = 37;
 
      //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;
  
  clearTimeout(sortTimeoutGP);
  
		var y0= y.domain(data.map(this.checked
      ? function(d) { return d.grandparent; }
      : function(d) {
      //TODO desagregar
      			VAR_HEIGHT= 18;
						return d.label; }))
    .copy();
 //x.domain([0, d3.max(parentvalues)]);

svg.selectAll(".bar")
  	.attr("y", function(d,i) { return  margin.top + i*BAR_HEIGHT})//y(grandparentlabels); }) //si pudiera anotarlos por mi solito margin.top, height/2
    .style("fill", function(d,i) {return [colScale[0],colScale[7]];} )
    .attr("width", function(d,i) { return x(grandparentvalues[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.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>
  <div class="container">
    <div class="row">
      <div class="col-lg-5-5 text-left">
        <article>
          <div class="brandon-textregular left-indented">
            <div style="color:#000000;">OVERALL RANK</div>
            <div style="font-size:19px;color:#0000;"><b>6/178 </b></div>
            <br/>
            <div style="color:#000000;">OVERALL SCORE</div>
            <div style="font-size:12px;color:#111212;">80.47/100</div>
            <br/>
            <table id="table-1">
              <tr>
                <td>GDP/CAPITA<br/>$44,010</td>
                <td style="border-right: 2px solid #697173;border-left: 2px solid #000000;">MILLION PEOPLE<br/>81.89</td>
                <td>SQUARE KM<br/>357,054</td>
              </tr>
            </table>
            <br/>
          </div>
        </article>
      </div>
      <div class="col-lg-1-1 text-left"></div>
      <div class="col-lg-5-5 text-left">
      </div>
    </div>
  </div>
</div>

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

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

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