VA Asig 1

Visualización propuesta a partir de Who works the longest hours?

Sin interacción: Comparar tendencias. El tamaño de cada cuadro permite distinguir cuáles países tienen un mayor número de horas de trabajo anuales.

Con interacción del usuario: Al mover el slide bar "Weekly hours worked" se ocultarán todos los países, y se irán mostrando aquellos con una cantidad de horas cercana a las del usuario.

forked from mbostock's block: Treemap

<!DOCTYPE html>
<style>

form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

svg {
  font: 10px sans-serif;
}
  
  .labelfila {
    width:170px; 
    max-width:170px; 
    display: inline-block; 
    vertical-align: top;
  }
  
  .rangefila {
    width: 180px;
  }
  
  .numerofila {
    vertical-align: top;
  }
  
  .resulcelda {
    display: block;
    vertical-align: top;
    text-align: center;
  }

</style>
<svg width="960" height="570"></svg>
<form>
  
 
  <script src="https://d3js.org/d3.v4.min.js"></script>
  
  <script>
     function getValorAlpha(paramNumResul, paramDataHours) {
            var absol = Math.abs(paramNumResul - paramDataHours);
            return Math.pow(0.5, absol/8.0);       
     }
    
     function showVal(strLabel, newVal){
       document.getElementById(strLabel).innerHTML=newVal; 
       
       var whw = document.getElementById('lr1').innerHTML;
       var adl = document.getElementById('lr2').innerHTML;
       
       var numResul = (whw * 52) - (adl * 8);
       if (numResul < 0) numResul = 0;
   
       document.getElementById('bloque3').style.display = 'inline-block';
       document.getElementById('resul').innerHTML = numResul + " hours";
       
        var transic = d3.transition()
            .duration(250)
            .ease(d3.easeLinear);
       
          d3.selectAll("rect").transition(transic).attr("fill", function(d) { 
            //var sal = "rgba(*,*,*," + newVal/255 + ")";
       
            var sal = color(d.parent.data.id);
            sal = sal.replace("rgb", "rgba");
            sal = sal.replace(")", "," + getValorAlpha(numResul, d.data.hours) + ")");
            
            //console.log("valorAlpha="+valorAlpha);
            
            return sal;
          });     
       
          d3.selectAll("text").attr("fill", function(d) { 
            var sal = "rgba(0,0,0," + getValorAlpha(numResul, d.data.hours) + ")";
            return sal;
          });         
     }
    
      function prueba(newVal){
          d3.selectAll("rect").attr("fill", function(d) { 
            //var sal = "rgba(*,*,*," + newVal/255 + ")";
            var sal = color(d.parent.data.id);
            sal = sal.replace("rgb", "rgba");
            sal = sal.replace(")", "," + newVal/255 + ")");
            console.log(sal); 
            return sal;
          });
        
          d3.selectAll("text").attr("fill", function(d) { 
            var sal = "rgba(0,0,0," + newVal/255 + ")";
            return sal;
          });        
        
//        document.getElementById('resulprueba').innerHTML = color(d.parent.data.id);
        //document.getElementById('resulprueba').innerHTML = Math.abs(0 -55);
      }

</script>

<div id="bloque1" style="display: inline-block;">
    <div id="range1" style="display: block;">
      <div class="labelfila"><label>Weekly hours worked: </label></div><input type="range" id="weeklyhours" min="0" max="45" value="0" class="rangefila" oninput="showVal('lr1',this.value)" onchange="showVal('lr1',this.value)" />
  
      <label id="lr1" class="numerofila">0</label>
    </div>  
    <div id="range2" style="display: block;">
      <div class="labelfila"><label>Annual days leave: </label></div><input type="range" id="annualdaysleave" min="0" max="60" value="0" class="rangefila" oninput="showVal('lr2',this.value)" onchange="showVal('lr2',this.value)" />
  
      <label id="lr2" class="numerofila">0</label>
    </div>
</div>

<div id="bloque2" style="display: inline-block;">  
  <label id="relleno">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
</div>
  
<div id="bloque3" style="width:213px; display: none; vertical-align: top;">  
  <label id="preresul" class="resulcelda" style="font-size: 120%;">Your work:</label>
  <label id="resul" class="resulcelda" style="color: #f00; font-weight: bold; font-size: 150%;">999 hours</label>
</div>
  
  
  
  
    
</form>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
    color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
    format = d3.format(",d");

var treemap = d3.treemap()
    .tile(d3.treemapResquarify)
    .size([width, height])
    .round(true)
    .paddingInner(1);

d3.json("paises.json", function(error, data) {
  if (error) throw error;

var root = d3.hierarchy(data)
      .eachBefore(function(d) { d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
      .sum(sumBySize)
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

treemap(root);

var cell = svg.selectAll("g")
    .data(root.leaves())
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });

cell.append("rect")
      .attr("id", function(d) { return d.data.id; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("fill", function(d) { return color(d.parent.data.id); })
      .attr("horas", function(d) { return d.data.hours; });

cell.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.data.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#" + d.data.id; });

cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
    .selectAll("tspan")
      .data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g) ; })
    .enter().append("tspan")
      .attr("x", 4)
      .attr("y", function(d, i) { return 13 + i * 10; })
      .text(function(d) { return d; });

cell.append("title")
      .text(function(d) { return d.data.id + "\n" + d.data.hours + " hours"; });

d3.selectAll("input")
      .data([sumBySize, sumByCount], function(d) { return d ? d.name : this.value; })
      .on("change", changed);

/*var timeout = d3.timeout(function() {
    d3.select("input[value=\"sumByCount\"]")
        .property("checked", true)
        .dispatch("change");
  }, 2000);*/

/*function changed(sum) {
    timeout.stop();

treemap(root.sum(sum));

cell.transition()
        .duration(750)
        .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
      .select("rect")
        .attr("width", function(d) { return d.x1 - d.x0; })
        .attr("height", function(d) { return d.y1 - d.y0; });
  }*/
  
  
});

function sumByCount(d) {
  return d.children ? 0 : 1;
}

function sumBySize(d) {
  return d.size;
}

</script>

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