index.html
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
h2 {
float:right;
}
h4 span{
font-size: 14px;
font-weight: normal;
}
</style>
</head>
<body>
<div class="container" style="font:12px sans-serif;">
<div class="dc-data-count">
<h2>
New Zealand Earthquakes
<span>
<span class="filter-count"></span>
selected out of
<span class="total-count"></span>
records |
<a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
</span>
</h2>
</div>
<div class="row">
<div class="span6" id="dc-magnitude-chart">
<h4>Events by Magnitude
<span>
<a class="reset" style="display:none" href="javascript:magnitudeChart.filterAll(); dc.redrawAll();">Reset</a>
</span>
</h4>
</div>
<div class="span6" id="dc-depth-chart">
<h4>Events By Depth
<span>
<a class="reset" style="display:none" href="javascript:depthChart.filterAll(); dc.redrawAll();">Reset</a>
</span>
</h4>
</div>
</div>
<div class="row">
<div class="span12" id="dc-time-chart">
<h4>Events Per Hour
<span>
<a class="reset" style="display:none" href="javascript:timeChart.filterAll(); dc.redrawAll();">Reset</a>
</span>
</h4>
</div>
</div>
<div class="row">
<div class="span4" id="dc-dayweek-chart">
<h4>Day of the week
<span>
<a class="reset" style="display:none" href="javascript:dayOfWeekChart.filterAll(); dc.redrawAll();">Reset</a>
</span>
</h4>
</div>
<div class="span4" id="dc-island-chart">
<h4>North or South Island
<span>
<a class="reset" style="display:none" href="javascript:islandChart.filterAll(); dc.redrawAll();">Reset</a>
</span>
</h4>
</div>
<div class="span4">
<h4>Blank</h4>
</div>
</div>
<div class="row">
<div class="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>
</div>
<script>
var dataTable = dc.dataTable("#dc-table-graph");
var magnitudeChart = dc.barChart("#dc-magnitude-chart");
var depthChart = dc.barChart("#dc-depth-chart");
var timeChart = dc.lineChart("#dc-time-chart");
var dayOfWeekChart = dc.rowChart("#dc-dayweek-chart");
var islandChart = dc.pieChart("#dc-island-chart");
d3.csv("quakes.csv", function (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);
});
var facts = crossfilter(data);
var all = facts.groupAll();
dc.dataCount('.dc-data-count')
.dimension(facts)
.group(all);
var magValue = facts.dimension(function (d) {
return d.mag;
});
var magValueGroupCount = magValue.group()
.reduceCount(function (d) {
return d.mag;
});
var depthValue = facts.dimension(function (d) {
return d.depth;
});
var depthValueGroup = depthValue.group();
var volumeByHour = facts.dimension(function (d) {
return d3.time.hour(d.dtg);
});
var volumeByHourGroup = volumeByHour.group()
.reduceCount(function (d) {
return d.dtg;
});
var dayOfWeek = facts.dimension(function (d) {
switch (d.dtg.getDay()) {
case 0:
return "Sun";
case 1:
return "Mon";
case 2:
return "Tue";
case 3:
return "Wed";
case 4:
return "Thu";
case 5:
return "Fri";
case 6:
return "Sat";
}
});
var dayOfWeekGroup = dayOfWeek.group();
var islands = facts.dimension(function (d) {
if (d.lat <= -40.555907 && d.long <= 174.590607) {
return "South";
}
return "North";
});
var islandsGroup = islands.group();
var timeDimension = facts.dimension(function (d) {
return d.dtg;
});
magnitudeChart.width(480)
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(magValue)
.group(magValueGroupCount)
.transitionDuration(500)
.centerBar(true)
.gap(92)
.x(d3.scale.linear().domain(d3.extent(data, function (d) {
return d.mag
})))
.elasticY(true)
.xAxis().tickFormat();
depthChart.width(480)
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(depthValue)
.group(depthValueGroup)
.transitionDuration(500)
.centerBar(true)
.x(d3.scale.linear().domain([0, 100]))
.elasticY(true)
.xAxis().tickFormat(function (v) {
return v;
});
timeChart.width(960)
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(volumeByHour)
.group(volumeByHourGroup)
.transitionDuration(500)
.brushOn(false)
.title(function (d) {
return "Number Of Events : " + d.data.value;
})
.elasticY(true)
.x(d3.time.scale().domain(d3.extent(data, function (d) {
return d.dtg
})))
.xAxis();
dayOfWeekChart.width(300)
.height(200)
.margins({top: 5, left: 10, right: 10, bottom: 20})
.dimension(dayOfWeek)
.group(dayOfWeekGroup)
.colors(d3.scale.category10())
.label(function (d) {
return d.key;
})
.title(function (d) {
return d.value;
})
.elasticX(true)
.xAxis().ticks(4);
islandChart.width(250)
.height(220)
.radius(100)
.innerRadius(30)
.dimension(islands)
.group(islandsGroup)
.title(function (d) {
console.log(d);
return d.value
});
dataTable.width(960).height(800)
.dimension(timeDimension)
.group(function (d) {
return "Earthquake Table"
})
.size(10)
.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=12&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=12' +
"\" target=\"_blank\"> OSM Map</a>";
},
]
)
.sortBy(function (d) {
return d.dtg
})
.order(d3.ascending);
dc.renderAll();
});
</script>
</body>
</html>