forked from d3noob‘s block: Earthquake Data Discovery using dc.js, crossfilter, d3.js and bootstrap
<!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>
<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="//nickqizhu.github.io/dc.js/">dc.js</a>,
<a href="//square.github.io/crossfilter/">crossfilter</a>,
<a href="//d3js.org/">d3.js</a> and
<a href="//twitter.github.io/bootstrap/">bootstrap</a>.
</H5>
<p>Earthquake data via <a href="//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=\"//maps.google.com/maps?z=11&t=m&q=loc:' + d.lat + '+' + d.long +"\" target=\"_blank\">Google Map</a>"},
function(d) { return '<a href=\"//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>
.dc-chart {
float: left;
}
.dc-chart rect.bar {
stroke: none;
fill: steelblue;
}
.dc-chart rect.bar:hover {
fill-opacity: .5;
}
.dc-chart rect.stack1 {
stroke: none;
fill: red;
}
.dc-chart rect.stack2 {
stroke: none;
fill: green;
}
.dc-chart rect.deselected {
stroke: none;
fill: #ccc;
}
.dc-chart .sub .bar {
stroke: none;
fill: #ccc;
}
.dc-chart .pie-slice {
fill: white;
font-size: 12px;
cursor: pointer;
}
.dc-chart .pie-slice :hover{
fill-opacity: .8;
}
.dc-chart .selected path{
stroke-width: 3;
stroke: #ccc;
fill-opacity: 1;
}
.dc-chart .deselected path{
strok: none;
fill-opacity: .5;
fill: #ccc;
}
.dc-chart .axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dc-chart .axis text {
font: 10px sans-serif;
}
.dc-chart .grid-line line {
fill: none;
stroke: #ccc;
opacity: .5;
shape-rendering: crispEdges;
}
.dc-chart .brush rect.background {
z-index: -999;
}
.dc-chart .brush rect.extent {
fill: steelblue;
fill-opacity: .125;
}
.dc-chart .brush .resize path {
fill: #eee;
stroke: #666;
}
.dc-chart path.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.dc-chart circle.dot{
fill: steelblue;
}
.dc-chart g.stack1 path.line {
stroke: green;
}
.dc-chart g.stack1 circle.dot{
fill: green;
}
.dc-chart g.stack2 path.line {
stroke: red;
}
.dc-chart g.stack2 circle.dot{
fill: red;
}
.dc-chart g.dc-tooltip path{
fill: none;
stroke: grey;
stroke-opacity: .8;
}
.dc-chart path.area {
fill: steelblue;
fill-opacity: .3;
stroke: none;
}
.dc-chart g.stack1 path.area {
fill: green;
}
.dc-chart g.stack2 path.area {
fill: red;
}
.dc-chart .node {
font-size: 0.7em;
cursor: pointer;
}
.dc-chart .node :hover{
fill-opacity: .8;
}
.dc-chart .selected circle {
stroke-width: 3;
stroke: #ccc;
fill-opacity: 1;
}
.dc-chart .deselected circle {
strok: none;
fill-opacity: .5;
fill: #ccc;
}
.dc-chart .bubble {
stroke: none;
fill-opacity: 0.6;
}
.dc-data-count {
float: right;
margin-top: 15px;
margin-right: 15px;
}
.dc-data-count .filter-count {
color: #3182bd;
font-weight: bold;
}
.dc-data-count .total-count {
color: #3182bd;
font-weight: bold;
}
.dc-data-table {}
.dc-chart g.state{
cursor: pointer;
}
.dc-chart g.state :hover{
fill-opacity: .8;
}
.dc-chart g.state path {
stroke: white;
}
.dc-chart g.selected path {
}
.dc-chart g.deselected path {
fill: grey;
}
.dc-chart g.selected text {
}
.dc-chart g.deselected text {
display: none;
}
.dc-chart g.county path {
stroke: white;
fill: none;
}
.dc-chart g.debug rect{
fill: blue;
fill-opacity: .2;
}
.dc-chart g.row rect {
fill-opacity: 0.8;
cursor: pointer;
}
.dc-chart g.row rect:hover {
fill-opacity: 0.6;
}
.dc-chart g.row text {
fill: black; /*modified from white by Eamonn O'Loughlin */
font-size: 12px;
}
## Crossfilter via dc.js
This visualization is intended as a lead-in for describing the use of [crossfilter](http://square.github.io/crossfilter/) via [dc.js](http://nickqizhu.github.io/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](http://www.d3noob.org/) and in [D3 Tips and Tricks](https://leanpub.com/D3-Tips-and-Tricks).