D3 Choropleth map of Hamilton, ON.

svg {
  
 	 margin-left: auto;
 	 margin-right: auto;
 	 border-radius: 25px;
 	 background-color:#eee;
	}

#ward_map {
  	fill: steelblue;
    stroke-linejoin: round;
    stroke-linecap: round;
  	cursor: pointer;
	}

#ward_map.active {
  	fill-opacity:0.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke:orange;
	}
	
.tooltip {
    background-color: #fff;
    border: 1px solid #555;
    border-radius: 8px; 
    padding: 5px;
}
	</style>
</head>

var width = 960,
   height = 500,
   active = d3.select(null);

var projection = d3.geo.albers()
				.scale(1)
				.translate([0,0]);

var path = d3.geo.path()
    .projection(projection);

var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom).on("dblclick.zoom", null);

var wards = svg.append("g")
        .attr("id", "wards");

var tooltip = d3.select("body") // change to "rect"
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .attr("class", "tooltip")
    .text("a simple tooltip");

var areaByWard = d3.map();
var pop11ByWard = d3.map();
var pop06ByWard = d3.map();
var pop01ByWard = d3.map();
var growthByWard = d3.map();

//queue

queue()
        .defer(d3.json, './document.json')   
        .defer(d3.csv, './wardareapop.csv', function(d) { 
        	areaByWard.set(d.id, +d.area*0.00404686);   //acres-> km^2
        	pop11ByWard.set(d.id, +d.pop11); 
        	pop06ByWard.set(d.id, +d.pop06);
        	pop01ByWard.set(d.id, +d.pop01);
        	growthByWard.set(d.id, ((pop11ByWard.get(d.id)-pop06ByWard.get(d.id))/pop06ByWard.get(d.id)));        
                    })
        .await(draw_map);

//map drawing function

var colour_list = ["#0f0303","#a50006","#b91010","#d73027","#f46d43","#fdae61","#fee08b","#ffefaf","#d9ef8b","#a6d96a","#66bd63","#39a959","#1a9850","#0c7632","#066837","#005a33"]

var map_color = d3.scale.threshold()
							.domain(color_domain)
							.range(colour_list);
    
  //autoscale/translate routine
  //pull boundaries of all features (city)
  var city = topojson.feature(map, map.objects.on_hamilton_ed_hamilton_wards);

var b = path.bounds(city),
      s = .8 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
      t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

//scale and translate to bounds routine
  	projection
      .scale(s)
      .translate(t);

//actually draw map now

function zoomed() {
  wards.selectAll("path").style("stroke-width", 1.5 / d3.event.scale + "px");
  wards.selectAll("path").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

svg.transition()
      .duration(750)
      .call(zoom.translate(translate).scale(scale).event);
            
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

svg.transition()
      .duration(750)
      .call(zoom.translate([0, 0]).scale(1).event);
}

// If the drag behavior prevents the default click,
// also stop propagation so we don’t click-to-zoom.
function stopped() {
  if (d3.event.defaultPrevented) d3.event.stopPropagation();
}

</script>

</body>
</html>

Modified http://d3js.org/queue.v1.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

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

https://d3js.org/queue.v1.min.js