D3 Examples - Tarea 4 - Visualization horizontal d3.v4

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.
xxxxxxxxxx
 
<!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>
​
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://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 margin = {top: 20, right: 20, bottom: 30, left: 155},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom; 
  
var x = d3.scaleLinear()
    .range([0,width]);
//var x = d3.scale.linear()
//    .range([0,width]);
var y = d3.scaleOrdinal()
    .range([0,(height-margin.bottom)]);
​
​
var xAxis = d3.axisTop(x)
    //.scale(x)
    //.orient("bottom")
        .tickArguments(10);
​
  //nup, no funcionó
var yAxis = d3.axisLeft(y);
    //.orient("left")
        //.tickSize(0);
var BAR_HEIGHT = 37;
  
var colScale = d3.scaleOrdinal()
    .range(["#009900", "#339966", "#216342", "#0099cc", "#10599c" ,"#555f9f", ,"#ff6100","#f9bb00", "#ff8c00"]);
​
  /*
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("transform", "rotate(-90)")
      .attr("x", 3.28)
      .attr("dx", "0.976em")
      .style("text-anchor", "end");
        
​
  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;
}
  
/*
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;
  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); })
} 
  
function groupParents() {
  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); })
}   
  
</script>
    
Tarea 4 - Visualization horizontal d3.v4

What?

Why?

Tasks

Targets

How?

Marks

Channels

Short review
