D3OG

All examples By author By category About

f94f

Full window Github gist

Tarea 4 - Visualization horizontal v3

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 4 - Visualization horizontal v3

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

<!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" name="grup" id="groupParents"> Categories
    </label>

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>

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