Hexbinning earthquakes (magnitude 3.0 or greater) in the Canterbury region of New Zealand during the month of September, 2010.
Earthquake data sourced from GeoNet.
Last active
December 11, 2015 23:29
-
-
Save tnightingale/4677419 to your computer and use it in GitHub Desktop.
Christchurch Earthquakes, 2010
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.hexbin.v0.js"></script> | |
| <style type="text/css"> | |
| html, body { margin: 0; padding: 0; height: 100%; } | |
| select { | |
| display: inline; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| div#switcher { margin: 0em 2.5em 1em; } | |
| p { margin-top: 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="quake" data-source="quakes_christchurch_20100901-20101001_mag-gt3.json"></div> | |
| <div id="switcher"> | |
| <p> | |
| Display | |
| <select id="y-select" disabled> | |
| <option value="magnitude">magnitude</option> | |
| <option value="depth">depth</option> | |
| <option value="phases">phases</option> | |
| </select> | |
| over time. | |
| </p> | |
| </div> | |
| <script type="text/javascript"> | |
| (function () { | |
| var features, key, current, x, y, | |
| labels = { | |
| 'magnitude': "Magnitude", | |
| 'depth': "Depth (km)", | |
| 'phases': "Phases" | |
| }, | |
| views = {}, | |
| container = document.getElementById('quake'); | |
| var rad = 16, | |
| margin = {top: 12, right: 3, bottom: 38, left: 45}, | |
| width = 960 - margin.left - margin.right, | |
| height = 450 - margin.top - margin.bottom; | |
| var svg = d3.select(container).append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var y_select = d3.select("#y-select") | |
| .on("change", function (e) { | |
| var el = y_select.node(); | |
| key = el.options[el.selectedIndex].value; | |
| update(); | |
| }); | |
| svg.append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("class", "mesh") | |
| .attr("width", width - 1) | |
| .attr("height", height - .25) | |
| .attr("transform", "translate(1,0)"); | |
| var hexbin = d3.hexbin() | |
| .size([width, height]) | |
| .radius(rad) | |
| .x(function (d) { return x(get_date(d)); }); | |
| d3.json(container.dataset.source, function(collection) { | |
| var el = y_select.node(); | |
| features = collection.features; | |
| key = el.options[el.selectedIndex].value; | |
| init(); | |
| update(); | |
| el.removeAttribute("disabled"); | |
| }); | |
| function init() { | |
| x = d3.time.scale() | |
| .domain(d3.extent(features, get_date)) | |
| .range([0, width]); | |
| } | |
| function update() { | |
| if (!(key in views)) { | |
| views[key] = createView(); | |
| } | |
| enableView(views[key]); | |
| } | |
| function createView() { | |
| var view = svg.append("g") | |
| .attr("id", "view-" + key) | |
| .style("display", "none"); | |
| var y = d3.scale.linear() | |
| .domain(d3.extent(features, get_y)) | |
| .range([height, 0]); | |
| hexbin.y(function (d) { return y(get_y(d)); }); | |
| var bin = hexbin(features), | |
| color = d3.scale.linear() | |
| .domain(d3.extent(bin, function (d) { return d.length; })) | |
| .range([d3.lab("white").darker(.2), d3.lab("#A40000")]) | |
| .interpolate(d3.interpolateLab); | |
| view.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.svg.axis().scale(x).orient("bottom")) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("x", width) | |
| .attr("y", 35) | |
| .style("text-anchor", "end") | |
| .text("Earthquake origin time"); | |
| view.append("g") | |
| .attr("class", "y axis") | |
| .call(d3.svg.axis().scale(y).orient("left")) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", -40) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text(labels[key]); | |
| view.append("g") | |
| .attr("clip-path", "url(#clip)") | |
| .selectAll(".hexagon") | |
| .data(bin) | |
| .enter().append("path") | |
| .attr("class", "hexagon") | |
| .attr("d", hexbin.hexagon()) | |
| .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
| .attr("fill", function (d) { return color(d.length); }); | |
| return view; | |
| } | |
| function enableView(view) { | |
| if (current) { | |
| current.style("display", "none"); | |
| } | |
| view.style("display", "inline"); | |
| current = view; | |
| } | |
| function get_date(d) { | |
| return d3.time.format.iso.parse(d.properties.origintime); | |
| } | |
| function get_y(d) { | |
| return d.properties[key]; | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment