Earthquake Data Discovery using dc.js, crossfilter, d3.js and bootstrap

Crossfilter via dc.js

This visualization is intended as a lead-in for describing the use of crossfilter via dc.js.

As such it is a very simple example, and is intended to be used in conjunction with a fuller description on d3noob.org and in D3 Tips and Tricks.

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>

<title>dc.js Experiment</title>

<body>

<div class='row'>
    <div class='span12'>
      <h3>New Zealand Earthquakes</h3>
      <div class='row'>
        <div class='pie-graph span6' id='dc-magnitude-chart'>
        <h4>Events by Magnitude</h4>
        </div>
        <div class='pie-graph span6' id='dc-depth-chart'>
	      <h4>Events by Depth (km)</h4>
        </div>    
      </div>
    </div>
  </div>

<div class='row'>
    <div class='span12' id='dc-time-chart'>
      <h4>Events per hour</h4>
    </div>
  </div>

<div class='row'>
	<div class='pie-graph span12'>
      <table class='table table-hover' id='dc-table-graph'>
        <thead>
          <tr class='header'>
            <th>DTG</th>
            <th>Lat</th>
            <th>Long</th>
            <th>Depth</th>
            <th>Magnitude</th>
            <th>Google Map</th>
            <th>OSM Map</th>
          </tr>
        </thead>
      </table>
	</div>
  </div>

<H5>Generated with 
  <a href="https://nickqizhu.github.io/dc.js/">dc.js</a>,
  <a href="https://square.github.io/crossfilter/">crossfilter</a>, 
  <a href="https://d3js.org/">d3.js</a> and 
  <a href="https://twitter.github.io/bootstrap/">bootstrap</a>.
</H5>
<p>Earthquake data via <a href="https://geonet.org.nz">Geonet</a>.</p>

</div>
</div>
</div>
  
<script>
  
/**********************************
* Step0: Load data from json file *
**********************************/

// load data from a csv file
d3.csv("quakes.csv", function (data) {

// format our data
  var dtgFormat = d3.time.format("%Y-%m-%dT%H:%M:%S");
  
  data.forEach(function(d) { 
    d.dtg   = dtgFormat.parse(d.origintime.substr(0,19)); 
    d.lat   = +d.latitude;
    d.long  = +d.longitude;
    d.mag   = d3.round(+d.magnitude,1);
    d.depth = d3.round(+d.depth,0);
  });

/******************************************************
* Step1: Create the dc.js chart objects & ling to div *
******************************************************/

var magnitudeChart = dc.barChart("#dc-magnitude-chart");
  var depthChart = dc.barChart("#dc-depth-chart");
  var timeChart = dc.lineChart("#dc-time-chart");
  var dataTable = dc.dataTable("#dc-table-graph");

/****************************************
* 	Run the data through crossfilter    *
****************************************/

var facts = crossfilter(data);  // Gets our 'facts' into crossfilter

/******************************************************
* Create the Dimensions                               *
* A dimension is something to group or filter by.     *
* Crossfilter can filter by exact value, or by range. *
******************************************************/

// for Magnitude
  var magValue = facts.dimension(function (d) {
    return d.mag;       // group or filter by magnitude
  });
  var magValueGroupSum = magValue.group()
    .reduceSum(function(d) { return d.mag; });	// sums the magnitudes per magnitude
  var magValueGroupCount = magValue.group()
    .reduceCount(function(d) { return d.mag; }) // counts the number of the facts by magnitude

// For datatable
  var timeDimension = facts.dimension(function (d) {
    return d.dtg;
  }); // group or filter by time

// for Depth
  var depthValue = facts.dimension(function (d) {
    return d.depth;
  });
  var depthValueGroup = depthValue.group();
  
  // define a daily volume Dimension
  var volumeByDay = facts.dimension(function(d) {
    return d3.time.hour(d.dtg);
  });
  // map/reduce to group sum
  var volumeByDayGroup = volumeByDay.group()
    .reduceCount(function(d) { return d.dtg; });

/***************************************
* 	Step4: Create the Visualisations   *
***************************************/
  
  // Magnitide Bar Graph Summed
  magnitudeChart.width(480)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(magValue)								// the values across the x axis
    .group(magValueGroupSum)							// the values on the y axis
	.transitionDuration(500)
    .centerBar(true)	
	.gap(56)                                            // bar width Keep increasing to get right then back off.
    .x(d3.scale.linear().domain([0.5, 7.5]))
	.elasticY(true)
	.xAxis().tickFormat(function(v) {return v;});

// Depth bar graph
  depthChart.width(480)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(depthValue)
    .group(depthValueGroup)
	.transitionDuration(500)
    .centerBar(true)	
	.gap(1)                    // bar width Keep increasing to get right then back off.
    .x(d3.scale.linear().domain([0, 100]))
	.elasticY(true)
	.xAxis().tickFormat(function(v) {return v;});

// time graph
  timeChart.width(960)
    .height(100)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(volumeByDay)
    .group(volumeByDayGroup)
    .transitionDuration(500)
	.elasticY(true)
    .x(d3.time.scale().domain([new Date(2013, 6, 18), new Date(2013, 6, 24)])) // scale and domain of the graph
    .xAxis();

// Table of earthquake data
  dataTable.width(960).height(800)
    .dimension(timeDimension)
	.group(function(d) { return "List of all earthquakes corresponding to the filters"
	 })
	.size(10)							// number of rows to return
    .columns([
      function(d) { return d.dtg; },
      function(d) { return d.lat; },
      function(d) { return d.long; },
      function(d) { return d.depth; },
      function(d) { return d.mag; },
	  function(d) { return '<a href=\"https://maps.google.com/maps?z=11&t=m&q=loc:' + d.lat + '+' + d.long +"\" target=\"_blank\">Google Map</a>"},
	  function(d) { return '<a href=\"https://www.openstreetmap.org/?mlat=' + d.lat + '&mlon=' + d.long +'&zoom=11'+ "\" target=\"_blank\"> OSM Map</a>"}
    ])
    .sortBy(function(d){ return d.dtg; })
    .order(d3.ascending);

/****************************
* Step6: Render the Charts  *
****************************/
			
  dc.renderAll();
  
});
  
</script>
    
</body>
</html>