voting districts hexagonal

<!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]);

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js