D3 Examples - Density map of homicides in Monterrey

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Monterrey Homicide Density</title>
    <meta charset="utf-8" />
​
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
    <link rel="stylesheet" href="leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
​
    <style>
    
#map {
  width: 960px;
  height: 500px;
}
​
path {
  fill-opacity: .6;
  stroke: #000;
  stroke-opacity: .6;
  stroke-width: .5px;
}
​
path:hover {
  //fill-opacity: .7;
  stroke: #000;
  stroke-opacity: 1;
  stroke-width: 1.5px;
}
​
    </style>
</head>
<body>
    <div id="map"></div>
​
    <script src="leaflet.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://d3js.org/topojson.v0.min.js"></script>
        <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.2.1"></script>
    <script type="text/javascript">
var color = d3.scale.linear()
            .domain([10000, 50000, 100000])
            .range(["#57b5cd", "#81b562", "#eb8d5d"]);
​
var layer = new L.StamenTileLayer("toner");
​
var map = new L.Map("map", {
      center: [25.67, -100.3],
      zoom: 11
    })
    .addLayer(layer);
​
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");
​
d3.json("contours_tj.json", function(topology) {
  var bounds = d3.geo.bounds(topojson.object(topology, topology.objects.contours)),
      path = d3.geo.path().projection(project);
​
  var feature = g.selectAll("path")
      .data(topojson.object(topology, topology.objects.contours).geometries)
      .enter()
      .append("path")
      .style("fill", function(d) { 
                                    console.log(d); 
                                    return color(d.properties.level); 
      });
​
  map.on("viewreset", reset);
  reset();
​
  // Reposition the SVG to cover the features.
  function reset() {
    var bottomLeft = project(bounds[0]),
        topRight = project(bounds[1]);
​
    svg.attr("width", topRight[0] - bottomLeft[0])
       .attr("height", bottomLeft[1] - topRight[1])
       .style("margin-left", bottomLeft[0] + "px")
       .style("margin-top", topRight[1] + "px");
 
    g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
​
    feature.attr("d", path);
  }
​
  // Use Leaflet to implement a D3 geographic projection.
  function project(x) {
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
    return [point.x, point.y];
  }
});
​
    </script>
</body>
</html>
    