Density map of homicides in Monterrey

2d kde of homicide locations in the Monterrey metro area with a quartic kernel for the year of 2011

<!DOCTYPE html>
<html>
<head>
	<title>Monterrey Homicide Density</title>
	<meta charset="utf-8" />

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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

Modified http://maps.stamen.com/js/tile.stamen.js?v1.2.1 to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v0.min.js

https://maps.stamen.com/js/tile.stamen.js?v1.2.1