ginseng666 · October 14, 2015 18:52
diff --git a/index.html b/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>
diff --git a/sprengel_wien2015.json b/sprengel_wien2015.json
diff --git a/style.css b/style.css
 body
 {
 margin:0;
 padding:0;
 }

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

 #chart
 {
 width:100%;
 }

 .bezirke
 {
 stroke:#CC2900;
 fill:none;
 }
diff --git a/wien_grw2015.csv b/wien_grw2015.csv
	<!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)+iradius;}) //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>
	body
	{
	margin:0;
	padding:0;
	}

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

	#chart
	{
	width:100%;
	}

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