D3 Examples - voting districts hexagonal

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<title>voting districs hex</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="hexbin.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="chart"></div>
<script>
var color={};
color.spoe="rgb(200, 61, 68)";
color.oevp="rgb(25, 25, 25)";
color.fpoe="rgb(38,87,168)";
color.gruene="rgb(0, 153, 51)";
color.neos="rgb(184, 37, 147)";
​
var b,box,s;
var projection = d3.geo.mercator().scale(1);
var path = d3.geo.path().projection(projection);
var map;
var margins={};
margins.top=15;
margins.bottom=15;
margins.left=15;
margins.right=15;
​
var width=window.innerWidth - margins.left - margins.right;
var height=window.innerHeight - margins.top - margins.bottom;
var svg=d3.select("#chart").append("svg").attr("width",width).attr("height",height);
svg.attr("transform","translate("+margins.left+","+margins.top+")");
​
queue().defer(d3.json, "sprengel_wien2015.json").defer(d3.csv, "wien_grw2015.csv").awaitAll(function(error,arguments)
    {
    var raw=arguments[0];
    var map=topojson.feature(arguments[0],arguments[0].objects.sprengel);
    arguments[1].forEach(function(d)
        {
        if (d.iso.length<5) d.iso="0"+d.iso; else d.iso=d.iso;
        });
    var result=d3.nest().key(function(d){return d.iso;}).map(arguments[1]);
​
    b=path.bounds(map);
    box=d3.geo.bounds(map);
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
    projection.scale(s).center([(box[0][0]+box[1][0])/2,(box[0][1]+box[1][1])/2]).translate([width/2,height/2]);    
    
    map.features.forEach(function(d)
        {
        d[0]=path.centroid(d)[0];  //for hexbin
        d[1]=path.centroid(d)[1];
        });
    
var hexbin = d3.hexbin()
    .size([width, height])
    .radius(8);
​
var rhex = d3.scale.sqrt()
    .domain([0, 12])
    .range([0, 8]);
​
var g=svg.append("g");
g.selectAll(".hexagon")
        .data(hexbin(map.features))
        .enter().append("path")
        .attr("class", "hexagon")
        .attr("d", hexbin.hexagon(rhex(6)))
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .attr("id",function(d){return "Sprengel "+d[0].properties.iso;})
        .style("fill",function(d){return color[result[d[0].properties.iso][0].winner];})
        .append("title")
        .text(function(d){return d[0].properties.iso;});
    
    for (var i=1;i<24;i++)
        {
        if (i<10) var bezirk="0"+i; else var bezirk=""+i;
        svg.append("path")
            .datum(topojson.merge(raw, raw.objects.sprengel.geometries.filter(function(d) {return d.properties.iso.substring(0,2)==bezirk; })))
            .attr("d", path)
            .attr("class","bezirke")
        }
​
    zoom = d3.behavior.zoom().on("zoom",function() {
    svg.selectAll("g").attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")");
    svg.selectAll(".bezirke").attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")");
    });
    svg.call(zoom);
    });
</script>
</body>
</html>
    