D3 Examples - D3 Choropleth map of Hamilton, ON.

xxxxxxxxxx
 
    <style type="text/css">
​
    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>
​
​
<body>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
​
<script>
​
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
​
function draw_map(error, map) {
    if (error) throw error;
    
  //setting up color scales
  var color_domain = growthByWard.values().sort(function (a, b) {
             if (a > b) {
                 return 1;
                           }
              if (a < b) {
                return -1;
              }
              // a must be equal to b
              return 0;
            });
​
  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
​
    var ward_map = wards.selectAll(".ward_map")
            .data(topojson.feature(map, map.objects.on_hamilton_ed_hamilton_wards).features);
         ward_map.enter()
            .append("path")
                  .attr("d", path)
            .attr("id", "ward_map")
            .style("fill", function(d) {
                return map_color(growthByWard.get(d.id));
            })
            .on("click", clicked)
            .on("mouseover", function(d) {
                  tooltip.style("visibility", "visible");
                  tooltip.html("Ward: " + d.id + "<br>" +
                  "Area (km^2): " + areaByWard.get(d.id) + "<br>" +
                  "2011 population: " + pop11ByWard.get(d.id) + "<br>" +  
                  "2006 population: " + pop06ByWard.get(d.id) + "<br>" +
                  "%Change: " + (100*growthByWard.get(d.id)).toFixed(2) + "<br>" +
                  "2011 Density: " + (pop11ByWard.get(d.id)/areaByWard.get(d.id)).toFixed(2) );
            })
            
             .on("mousemove", function() {
                return tooltip
                  .style("top", (d3.event.pageY -10 + "px"))
                  .style("left", (d3.event.pageX +10 + "px"));
            })
            .on("mouseout", function() {
                return tooltip.style("visibility", "hidden");
            });
}
​
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>
    