D3 Examples - voting districts encoded as same-sized rectangles

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<title>displaying voting districts</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>
<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+")");
​
//row version   
var radius=12;
​
if (height%radius!=0) var rows=Math.floor(height/radius)+1; else var rows=height/radius;
var grid=[];
​
for (var i=0;i<rows;i++)
    {
    grid[i]=[];
    }
​
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.x=path.centroid(d)[0];
        d.y=path.centroid(d)[1];
        d.r=Math.floor(d.y/radius); //rows
        d.c=Math.floor(d.x/radius);  //columns
        grid[Math.floor(d.y/radius)].push(d);
        });
    
    var rowlength=[];
    grid=grid.filter(function(d){return d.length>0;});
    grid.forEach(function(d,i)
        {
        d.sort(function(a,b){return d3.ascending(a.c,b.c);});
        if (d.length>0) rowlength.push(d.length);
        });
        
    var cols=d3.max(grid,function(d){return d.length;});
​
    for (var j=0;j<grid.length;j++)
    {
    svg.append("g").selectAll("rect").data(grid[j])
        .enter()
        .append("rect")
        .attr("x",function(d,i){return radius*(cols/2-rowlength[j]/2)+i*radius;})  //d.c*radius for accurate position
        .attr("y",function(d){return d.r*radius;})
        .attr("width",radius)
        .attr("height",radius)
        .style("fill","green")
        .attr("class","rectis")
        .style("stroke","white")
        .style("fill",function(d){return color[result[d.properties.iso][0].winner];})
        .append("title")
        .text(function(d){return d.properties.iso;});
    }
        
    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>
    