D3 Examples - CyL CRAs 2016 Voronoi

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