voting districts encoded as same-sized rectangles by jeremycflin

index.html

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

style.css

body
{
margin:0;
padding:0;
}

.units
{
stroke:black;
fill:none;
}

#chart
{
width:100%;
}

.bezirke
{
stroke:#CC2900;
fill:none;
}