leonardobareno/.block

## .block
border: no
height: 650
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>
  <!--label><input type="radio" name="mode" value="sumBySize" checked> Size</label>
  <label><input type="radio" name="mode" value="sumByCount"> Count</label-->

  <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>
  <!--input type="range" id="rangeprueba" min="0" max="255" value="0" class="rangefila" oninput="prueba(this.value)" onchange="prueba(this.value)" />
  <label id="resulprueba">0</label-->


</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>

## paises.json
{
 "name": "paises",
 "children": [
  {
   "name": "asia",
   "children": [
    {
     "name": "asia_fa",
     "children": [
      {"name": "South Korea", "size": 866, "hours": 2193},
      {"name": "Japan", "size": 406, "hours": 1733}
     ]
    },
    {
     "name": "asia_me",
     "children": [
      {"name": "Israel", "size": 602, "hours": 1929},
      {"name": "Turkey", "size": 550, "hours": 1877}
     ]
    }
   ]
  },
  {
   "name": "europe",
   "children": [
    {
     "name": "europe_ea",
     "children": [
      {"name": "Greece", "size": 690, "hours": 2017},
      {"name": "Russian Federation", "size": 646, "hours": 1973},
      {"name": "Hungary", "size": 629, "hours": 1956},
      {"name": "Poland", "size": 612, "hours": 1939},
      {"name": "Estonia", "size": 553, "hours": 1880},
      {"name": "Czech Republic", "size": 468, "hours": 1795},
      {"name": "Slovak Republic", "size": 422, "hours": 1749},
      {"name": "Slovenia", "size": 349, "hours": 1676}
     ]
    },
    {
     "name": "europe_we",
     "children": [
      {"name": "Italy", "size": 451, "hours": 1778},
      {"name": "Portugal", "size": 387, "hours": 1714},
      {"name": "Iceland", "size": 370, "hours": 1697},
      {"name": "Finland", "size": 363, "hours": 1690},
      {"name": "Spain", "size": 347, "hours": 1674},
      {"name": "United Kingdom", "size": 320, "hours": 1647},
      {"name": "Switzerland", "size": 309, "hours": 1636},
      {"name": "Sweden", "size": 297, "hours": 1624},
      {"name": "Luxembourg", "size": 289, "hours": 1616},
      {"name": "Austria", "size": 272, "hours": 1599},
      {"name": "Belgium", "size": 224, "hours": 1551},
      {"name": "Ireland", "size": 213, "hours": 1540},
      {"name": "Denmark", "size": 210, "hours": 1537},
      {"name": "France", "size": 112, "hours": 1439},
      {"name": "Norway", "size": 86, "hours": 1413},
      {"name": "Germany", "size": 81, "hours": 1408},
      {"name": "Netherlands", "size": 50, "hours": 1377}
     ]
    }
   ]
  },
  {
   "name": "america",
   "children": [
    {
     "name": "latam",
     "children": [
      {"name": "Chile", "size": 741, "hours": 2068},
      {"name": "Mexico", "size": 539, "hours": 1866}
     ]
    },
    {
     "name": "north_am",
     "children": [
      {"name": "Canada", "size": 375, "hours": 1702},
      {"name": "United States", "size": 368, "hours": 1695}
     ]
    }
   ]
  },
  {
   "name": "oceania",
   "children": [
    {"name": "New Zealand", "size": 431, "hours": 1758},
    {"name": "Australia", "size": 360, "hours": 1687}
   ]
  }
 ]
}
	<!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>
	<!--label><input type="radio" name="mode" value="sumBySize" checked> Size</label>
	<label><input type="radio" name="mode" value="sumByCount"> Count</label-->

	<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">     </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>
	<!--input type="range" id="rangeprueba" min="0" max="255" value="0" class="rangefila" oninput="prueba(this.value)" onchange="prueba(this.value)" />
	<label id="resulprueba">0</label-->




	</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>
	{
	"name": "paises",
	"children": [
	{
	"name": "asia",
	"children": [
	{
	"name": "asia_fa",
	"children": [
	{"name": "South Korea", "size": 866, "hours": 2193},
	{"name": "Japan", "size": 406, "hours": 1733}
	]
	},
	{
	"name": "asia_me",
	"children": [
	{"name": "Israel", "size": 602, "hours": 1929},
	{"name": "Turkey", "size": 550, "hours": 1877}
	]
	}
	]
	},
	{
	"name": "europe",
	"children": [
	{
	"name": "europe_ea",
	"children": [
	{"name": "Greece", "size": 690, "hours": 2017},
	{"name": "Russian Federation", "size": 646, "hours": 1973},
	{"name": "Hungary", "size": 629, "hours": 1956},
	{"name": "Poland", "size": 612, "hours": 1939},
	{"name": "Estonia", "size": 553, "hours": 1880},
	{"name": "Czech Republic", "size": 468, "hours": 1795},
	{"name": "Slovak Republic", "size": 422, "hours": 1749},
	{"name": "Slovenia", "size": 349, "hours": 1676}
	]
	},
	{
	"name": "europe_we",
	"children": [
	{"name": "Italy", "size": 451, "hours": 1778},
	{"name": "Portugal", "size": 387, "hours": 1714},
	{"name": "Iceland", "size": 370, "hours": 1697},
	{"name": "Finland", "size": 363, "hours": 1690},
	{"name": "Spain", "size": 347, "hours": 1674},
	{"name": "United Kingdom", "size": 320, "hours": 1647},
	{"name": "Switzerland", "size": 309, "hours": 1636},
	{"name": "Sweden", "size": 297, "hours": 1624},
	{"name": "Luxembourg", "size": 289, "hours": 1616},
	{"name": "Austria", "size": 272, "hours": 1599},
	{"name": "Belgium", "size": 224, "hours": 1551},
	{"name": "Ireland", "size": 213, "hours": 1540},
	{"name": "Denmark", "size": 210, "hours": 1537},
	{"name": "France", "size": 112, "hours": 1439},
	{"name": "Norway", "size": 86, "hours": 1413},
	{"name": "Germany", "size": 81, "hours": 1408},
	{"name": "Netherlands", "size": 50, "hours": 1377}
	]
	}
	]
	},
	{
	"name": "america",
	"children": [
	{
	"name": "latam",
	"children": [
	{"name": "Chile", "size": 741, "hours": 2068},
	{"name": "Mexico", "size": 539, "hours": 1866}
	]
	},
	{
	"name": "north_am",
	"children": [
	{"name": "Canada", "size": 375, "hours": 1702},
	{"name": "United States", "size": 368, "hours": 1695}
	]
	}
	]
	},
	{
	"name": "oceania",
	"children": [
	{"name": "New Zealand", "size": 431, "hours": 1758},
	{"name": "Australia", "size": 360, "hours": 1687}
	]
	}
	]
	}