Christchurch Earthquakes, 2010

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.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3.hexbin.v0.js"></script>

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>

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

Modified http://d3js.org/d3.hexbin.v0.js to a secure url

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

https://d3js.org/d3.hexbin.v0.js