CyL CRAs 2016 Voronoi

Voronoi map que muestra las zonas de influencia de cada CRA de Castilla y León del curso 2015/2016.

Hecho en el marco del V Taller de Producción de Datos de Medialab.

forked from ale0xb's block: CyL CRAs 2016

<!DOCTYPE html>
<style>

.feature {
  fill: #ddd;
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
  stroke-linejoin: round;
}

.outline {
/*   fill: #ddd; */
  stroke: #000;
  stroke-width: 1.5px;
}

.cra-cell {
  stroke: #000;
  stroke-opacity: 0.1;

}
  
div.tooltip {
  position: absolute;
  text-align: center;
  width: 116px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: white;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}
  
</style>
<svg width="960" height="600" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://unpkg.com/d3-composite-projections@1.1.1"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

var svg = d3.select("svg");
	var width = svg.node().getBoundingClientRect().width;
	var height = svg.node().getBoundingClientRect().height;
  
  var projection = d3.geoConicConformalSpain();

var path = d3.geoPath().projection(projection);
  
  var voronoi = d3.voronoi()
    		.extent([[-1, -1], [width + 1, height + 1]]);
  
  var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
  
  d3.queue(2)
    .defer(d3.json, "provinces.json")
    .defer(d3.csv, "cra-2016.csv")
    .await(function(error, es, stats) { 
  		if (error) throw error;
    
    	stats.forEach(function(d) {
        d["lat"] = +d["lat"];
    		d["long"] = d["long"];
  		});
    
    	var regions = topojson.feature(es, es.objects.autonomous_regions),
     		region = regions.features.filter(function(d) { return parseInt(d.id) === 07; 					})[0];
    
   		projection
      	.scale(1)
      	.translate([0, 0]);
 		  
    	var b = path.bounds(region),
      	  s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / 								height),
          t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0]							[1])) / 2];
   		
  
    
    	projection
      	.scale(s)
      	.translate(t);
    
    
    	svg.append("path")
      	.datum(regions)
      	.attr("class", "feature")
      	.attr("d", path);

svg.append("path")
      	.datum(topojson.mesh(es, es.objects.provinces, function(a, b) { return a !== 						b; }))
      .attr("class", "mesh")
      .attr("d", path);

svg.append("path")
      	.datum(region)
      	.attr("class", "outline")
      	.attr("d", path);
    	
			var radiusScale = d3.scaleLinear()
      										.domain([0,750,1500,12000,28000])
      										.range([0, 8, 16, 24, 32]);
    
    	var projectedPoints = stats.map(function(d) {
      	return projection([d.lng, d.lat]);
    	});
    
    
		var color = d3.schemePaired
    svg.selectAll("path")
                .data(voronoi.polygons(projectedPoints))
                .enter()
                .append("path")
                .attr("class", "cra-cells")
                .attr("d", function (d) { return "M" + d.join("L") + "Z"; })
    						.style("fill", function(d,i) {return color[i%color.length]})
    						.style("opacity", 0.3)
    						.on("mouseover", function(d, i) {
      							console.log(d);
            				d3.select(this)
            					.style("opacity", 1);
      							div.transition()
         							.duration(200)
         							.style("opacity", .9);
       							div.html(stats[i]["DENOMINACIÓN ESPECÍFICA"] + "<br/>")
         							.style("left", ((projection([stats[i].lng, stats[i].lat])[0]) - 58) + "px")
         							.style("top", ((projection([stats[i].lng, stats[i].lat])[1]) -14) + "px");
        				})
        				.on("mouseout", function(d, i) {
            				d3.select(this)
            					.style("opacity", 0.3);
      							div.transition()
         							.duration(500)
         							.style("opacity", 0);
            		});
    svg.selectAll("circle").data(projectedPoints)
        .enter()
        .append("circle")
      	.style("fill", "red")
      	.attr("r", 1)
      	.style("opacity", 0.5)
        .attr("cx", function(d, i) {
					return d[0];
      	})
        .attr("cy", function(d, i) {
					return d[1];
        });
});

</script>

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

https://unpkg.com/topojson-client@3

https://unpkg.com/d3-composite-projections@1.1.1

https://d3js.org/d3-scale-chromatic.v1.min.js