forked from d3noob's block: Earthquake Data Discovery using dc.js, crossfilter, d3.js and bootstrap
xxxxxxxxxx<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> <script src='d3.js' type='text/javascript'></script> <script src='crossfilter.js' type='text/javascript'></script> <script src='dc.js' type='text/javascript'></script> <script src='jquery-1.9.1.min.js' type='text/javascript'></script> <script src='bootstrap.min.js' type='text/javascript'></script> <link href='bootstrap.min.css' rel='stylesheet' type='text/css'> <link href='dc.css' rel='stylesheet' type='text/css'> <style type="text/css"></style></head><body><div class='container' id='main-container'><div class='content'><div class='container' style='font: 12px sans-serif;'> <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 filed3.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>