Multi-Line Voronoi - Casos de Maltrato Infantil 2005 - 2014

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

Ersi open Data: http://datosabiertos.esri.co/
Dataset

forked from mbostock's block: Multi-Line Voronoi

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

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();

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>

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://d3js.org/queue.v1.min.js