D3 Examples - feriados

feriados en la Argentina

Durante estos últimos años, tuve la sensación que se agregaron un montón de feriados, que me aparecían feriados por única vez y después se me esfumaban. Por eso decidí hacer esta visualización para entender cuantos feriados tenemos al año y como fue la evolución de los mismos.

Período analizado: 2010 .. 2016

Los datos fueron tomados de la pagina de Feriados Nacionales del Ministerio del Interior y Transporte. Ésta aplicación web toma los datos de un archivo JSON, tomé ese archivo como fuente para hacer esta visualización.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <!-- <script src="d3.v3.min.js"></script> -->
  <meta charset="utf-8">
  <title>feriados (2010 - 2016)</title>
<style>
  #viz,#ref {
    width: 1200px; 
    border: 1px dotted; 
    border-color: #aaa; 
    border-radius: 10px;
  }
</style>
</head>
<body>
  <h1>Feriados 2010-2016</h1>  
  <div id="ref"></div>
  <div id="viz"></div>
​
  <script>
​
      var data;
​
function doit() {
​
var w = 1130 + 70; // 1130 para las líneas y 70 para los textos
var h = 160; // cada año, uso 20 pixeles de alto
var p = 10; // padding (left & top)
​
var diasem = ['dom','lun','mar','mie','jue','vie','sab'];
​
var años = d3.range(2010,2017); // [2010,2011,2012,2013,2014,2015,2016]
var tdf = ['FERIADOS INAMOVIBLES','FERIADOS TRASLADABLES','FERIADOS PUENTE TURÍSTICOS','DÍAS NO LABORABLES'];
​
var yScale = d3.scale.linear()
                     .domain([2010,2016])
                     .range([p,140-p]);
​
var xScale = d3.scale.linear()
                     .domain([0,360])
                     .range([p , (w - 70) - p]);
​
var c10 = d3.scale.category10();
var format = d3.time.format("%m/%d/%Y"); 
​
var ref = d3.select("div#ref")
             .append("svg")
             .attr("width", w) 
             .attr("height", 30); 
​
var vRef = ['Inamovibles','Trasladables','Puente','sáb ó dom'];
var xS = d3.scale.linear().domain([0,3]).range([50,900]);
ref.append("g").selectAll("TextosRef").data(vRef).enter().append("rect")
   .attr("class", function(d,i) { return "ref r" + i; } )
   .attr("width", 10)
   .attr("height", 16)
   .attr("y",9)
   .attr("x", function(d,i) { return xS(i)-20;} )
   .style("fill", function(d,i) {
     if (i == 3) {
       return "#ddd"; // te lo perdiste (feriado en sab o dom)
     }
     else {
       if (vRef[i] === "Puente") {
         return "#d62728"; // rojo para los feriados Puente
       }
       else {
         return c10(i);
       }
     }
   });
  
ref.append("g").selectAll("textosRef").data(vRef).enter().append("text")
   .attr("class", function(d,i) { return "ref r" + i; } )
   .attr("font-family", "Helvetica,Arial,sans-serif")
   .attr("font-size", "12px")
   .attr("fill", "grey")
   .attr("y",20)
   .attr("x", function(d,i) { return xS(i);} )
   .text(function(d){return d;});
  
var svg = d3.select("div#viz")
             .append("svg")
             .attr("width", w) 
             .attr("height", h); 
​
/** 
 var format = d3.time.format("%m/%d/%Y"); 
 var d = format.parse("9/23/2015");
 d.getDay()
​
0 = domingo -> gris
1 = lunes     \ 
2 = martes     |>
3 = miercoles  |> color
4 = jueves     |>
5 = viernes   /
6 = sabado -> gris
**/
​
svg.selectAll("lines").data(data).enter().append("line")
   .attr("class", function(d) { return "t" + d.tipo + " y" + d.año; } ) 
   .attr("x1",function(d) { return xScale(d.diferencia); } )
   .attr("y1",function(d) { return yScale(d.año); } )
   .attr("x2",function(d) { return xScale(d.diferencia); } ) 
   .attr("y2",function(d) { return 20-2+yScale(d.año); } )  // 20 de alto, 2 espaciado
   .attr("stroke", function(d) {
     if ((format.parse(d.fecha).getDay() === 0) || (format.parse(d.fecha).getDay() === 6)) {
       return "#ddd"; // sábado o domingo
     }
     else {
       if (d.tipo === 4) { 
         return "#d62728" // rojo para los feriados Puente
       }
       else {
         return c10(d.tipo-1); // feriado en día laborable
       }
     }
   })
   .attr("stroke-width", 2.7)
   .attr("stroke-opacity", 1) // para que se vea bien, cuando hay dos feriados el mismo dia
   .append("title")
   .text(function(d) { return (diasem[format.parse(d.fecha).getDay()] + " " + d.dia + "/" + d.mes + ": " + d.descripcion); } );
​
var textos = svg.selectAll("text")
   .data(años)
   .enter()
   .append("text")
   .attr("font-weight","normal")
   .attr("class", function(d) { return "años y" + d; } )
   .attr("x", xScale(360) )
   .attr("y", function(d) { return yScale(d)+12; })
   .text( function(d) { return d; })
   .attr("font-family", "Helvetica,Arial,sans-serif")
   .attr("font-size", "12px")
   .attr("fill", "grey")
   .on("mouseover", function(d) {
      d3.selectAll("line:not(.y" + d).attr("stroke-opacity",0.05);
      d3.select(this).attr("font-weight","bold");
    })
   .on("mouseout", function(d) {
      d3.selectAll("line:not(.y" + d).attr("stroke-opacity",1);
      d3.select(this).attr("font-weight","normal");
    });
}
​
//
// var url = "https://www.mininterior.gov.ar/tramitesyservicios/ajaxjson.php?pb=6djm6dzi5NzXs6Sq593V3Nus5abc3arg5OGq3tzX5qfk1-iknNzjs6WjpqGkp6ehp6qspKasnNSw5dXn2-HY6NnY6NzU2uLm";
// El JSON que esta en esa URL es horrible, asi que lo trabaje un poco y genere uno nuevo que se llama data_feriados.json
//
d3.json("data_feriados.json", function(error, json) {
  if (error) return console.warn(error);
  data = json;
  doit();
});  
​
</script>  
  
</body>
</html>
    