D3 Examples - Multi-Line Voronoi - Casos de Maltrato Infantil 2005

Casos de Maltrato Infantil 2005 - 2014
WHAT
Data Types: Items y Attributes
Dataset Type: Tablas
Attributes Types
departamento: Categórico
año: Ordenado, Ordinal, Secuencial
numero de casos: Ordenado, Cuantitativo, Secuencial
WHY
T1. Encontrar tendencias sobre casos de maltrato infantil.
T2. Comparar departamentos sobre casos de maltrato infantil.
HOW
Marca: Lineas
Canales:Posición Vertical, Posición Horizontal
Idiom: Multi Line Chart
Fuente de Datos
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
    <style>
        body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
​
        .axis--y path {
            display: none;
        }
​
        .series {
            fill: none;
            stroke: #aaa;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-width: 1.5px;
        }
​
        .serie--hover {
            stroke: #000;
        }
​
        .focus text {
            text-anchor: middle;
            text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
        }
​
        .voronoi path {
            fill: none;
            pointer-events: all;
        }
​
        .voronoi--show path {
            stroke: red;
            stroke-opacity: 0.2;
        }
        
        
    </style>
</head>
​
<body>
​
    <div class="chart">
        <svg width="960" height="500"></svg>
    </div>
​
    <script>
    
    queue().defer(d3.csv, "Casos_de_maltrato_infantil_por_Area.csv")
    .await(function(error, datos){
        
        var nestedData = d3.nest()
            .key(function(d) { return d.Departamento; })
            .entries(datos);
                
        var dataset = nestedData.map(function(d){
            var obj = { serie : d.key, values : []  };
            
            
            d.values.forEach(function(v){
                for(var key in v) {
                    if(key.startsWith("Ano")){
                        obj.values.push({
                            date: new Date(key.replace('Ano', ''), 0, 1),
                            value: (v[key] === 'Sin Informacion ')? 0 : parseInt(v[key]),
                            serie: d.key
                        });
                    }
                }           
            });     
            return obj;
        });
        
        var xDates = [];        
        for(var key in datos[0]) {
            if(key.startsWith("Ano")){
                xDates.push(new Date(key.replace('Ano', ''), 0, 1));
            }
        }   
​
        buildGraph(xDates, dataset);
    });
    
    function buildGraph(xDates, dataset){
    
        var svg = d3.select("svg"),
            margin = {top: 20, right: 70, bottom: 30, left: 40},
            width = svg.attr("width") - margin.left - margin.right,
            height = svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
        var x = d3.scaleTime()
            .range([0, width])
            .domain(d3.extent(xDates));
            
        var y = d3.scaleLinear()
            .range([height, 0])
            .domain([0, d3.max(dataset, function(c) { 
        return d3.max(c.values, function(d) { return d.value; }); 
      })]).nice();
​
        var voronoi = d3.voronoi()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.value); })
            .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);
            
        var line = d3.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.value); });
            
        var fmt = d3.format(",d");
                
        g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));
​
        g.append("g")
            .attr("class", "axis axis--y")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("x", 4)
            .attr("y", 0.5)
            .attr("dy", "0.32em")
            .style("text-anchor", "start")
            .style("fill", "#000")
            .style("font-weight", "bold")
            .text("Casos de Maltrato Infantil 2005-2014");
​
        g.append("g")
            .attr("class", "series")
            .selectAll("path")
            .data(dataset)
            .enter().append("path")
            .attr("d", function(d) { 
                var _thisLine = this;
                d.values.forEach(function(v){
                    v.line = _thisLine;
                });     
                return line(d.values); 
            });
            
            
            
        var focus = g.append("g")
            .attr("transform", "translate(-100,-100)")
            .attr("class", "focus");
​
        focus.append("circle")
            .attr("r", 3.5);
​
        focus.append("text")
            .attr("y", -10);
            
        var voronoiGroup = g.append("g").attr("class", "voronoi");
            
        voronoiGroup.selectAll("path")
      .data(voronoi.polygons(d3.merge(dataset.map(function(d) { return d.values; }))))
            .enter().append("path")
            .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
            .on("mouseover", function(d){
                d3.select(d.data.line).classed("serie--hover", true);
                d.data.line.parentNode.appendChild(d.data.line);
                focus.attr("transform", "translate(" + x(d.data.date) + "," + y(d.data.value) + ")");
                focus.select("text").text(d.data.serie + ':' + fmt(d.data.value));
            })
            .on("mouseout", function(d){
                d3.select(d.data.line).classed("serie--hover", false);
                focus.attr("transform", "translate(-100,-100)");
            });
​
        d3.select("#show-voronoi")
            .property("disabled", false)
            .on("change", function() { voronoiGroup.classed("voronoi--show", this.checked); });
    }
    </script>
</body>
​
    