D3 Examples - CyL CRAs 2016

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