CyL CRAs 2016

Bubble map que muestra los CRAS 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 mbostock's block: U.S. TopoJSON

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;
}

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

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);
  
  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]);
    	console.log(d3.extent(stats, function (d) { return d["alumnos_15-16"]}))
    	svg.selectAll("circle").data(stats)
        .enter()
        .append("circle")
      	.style("fill", "red")
      	.attr("r", 3)
      	.style("opacity", 0.5)
//         .attr("r", function (d) {
//         	return radiusScale(d["alumnos_15-16"])
//       	})
        .attr("cx", function(d) {
					return projection([d.lng, d.lat])[0];
      	})
        .attr("cy", function(d) {
					return projection([d.lng, d.lat])[1];
        });
  });

</script>

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

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

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