Published
Edited
May 12, 2020
103 forks
1 star
Insert cell
Insert cell
buildvis = {
let view = md`${container()}`
return view
}
Insert cell
function container() {
return `
<main role="main" class="container">
<div class="row">
<h4> Earthquakes in New Zealand</h4>
</div>
<div class='row'>
<div id='magnitude-chart' class="col-6">
<h5> Number of Events by Magnitude </h5>
</div>
<div id='depth-chart' class="col-6">
<h5> Events by Depth (km) </h5>
</div>
</div>
<div class='row'>
<div id='time-chart' class="single-col">
<h5> Events per hour </h5>
</div>
</div>
<table class="table table-hover" id="dc-table-graph">
<thead>
<tr class="header">
<th>DTG</th>
<th>Magnitude</th>
<th>Depth</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
</table>
<p>Earthquake data via <a href="https://quakesearch.geonet.org.nz/">Geonet</a>.</p>
</main>
`
}
Insert cell
Insert cell
dc = require('dc')
Insert cell
crossfilter = require('crossfilter2')
Insert cell
d3 = require('d3')
Insert cell
$ = require('jquery').then(jquery => {
window.jquery = jquery;
return require('popper@1.0.1/index.js').catch(() => jquery);
})
Insert cell
bootstrap = require('bootstrap')
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more