This hexbin map shows the proximity of earthquakes (magnitude 3.0 or greater) in the Canterbury region of New Zealand during the month of September, 2010.
The map is created using Leaflet. The hexbin layer is a custom Leaflet layer which uses d3js to generate a svg hexbin overlay. The source for the custom leaflet layer is viewable here.
Earthquake data sourced from GeoNet.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" /> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" /> | |
| <![endif]--> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.hexbin.v0.js"></script> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet-src.js"></script> | |
| <script type="text/javascript" src="http://rawgithub.com/affinitybridge/d3-demos-quakes/master/js/colorbrewer.js"></script> | |
| <script type="text/javascript" src="http://rawgithub.com/affinitybridge/d3-demos-quakes/master/js/leaflet.hexbin-layer.js"></script> | |
| <style type="text/css"> | |
| html, body { margin: 0; padding: 0; height: 100%; } | |
| #quake { min-height: 100%; } | |
| .hexagon { opacity: 0.7 } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='quake' data-source="quakes_christchurch_20100901-20101001_mag-gt3.json"></div> | |
| <script type="text/javascript"> | |
| (function () { | |
| var max, scale, | |
| classes = 9, | |
| scheme = colorbrewer["YlOrRd"][classes], | |
| container = L.DomUtil.get('quake'), | |
| map = L.map(container).setView([-43.6, 172.3], 10); | |
| L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // Async call for data. Source URL is loaded from container element's | |
| // 'data-source' attribute. | |
| d3.json(container.dataset.source, function(collection) { | |
| // When data arrives, create leaflet layer with custom style callback. | |
| L.hexLayer(collection, { | |
| applyStyle: hex_style | |
| }).addTo(map); | |
| }); | |
| /** | |
| * Hexbin style callback. | |
| * | |
| * Determines a quantize scale (http://bl.ocks.org/4060606) based on the | |
| * map's initial data density (which is based on the initial zoom level) | |
| * and applies a colorbrewer (http://colorbrewer2.org/) colour scheme | |
| * accordingly. | |
| */ | |
| function hex_style(hexagons) { | |
| // Maintain a density scale relative to initial zoom level. | |
| if (!(max && scale)) { | |
| max = d3.max(hexagons.data(), function (d) { return d.length; }); | |
| scale = d3.scale.quantize() | |
| .domain([0, max]) | |
| .range(d3.range(classes)); | |
| } | |
| hexagons | |
| .attr("stroke", scheme[classes - 1]) | |
| .attr("fill", function (d) { | |
| return scheme[scale(d.length)]; | |
| }); | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
