buildvis = {
let view = md`${container()}`
let dataTable= dc.dataTable(view.querySelector("#dc-table-graph"))
dataTable.width(960)
.height(800)
.dimension(dateDimension)
.group(d => "List of all earthquakes corresponding to the filters")
.size(10)
.columns(['dtg', 'magnitude', 'depth', 'latitude', 'longitude']) //os nomes dos atributos
.sortBy(d => d.dtg)
.order(d3.ascending)
let barChart = dc.barChart(view.querySelector("#magnitude-chart"))
barChart.width(480)
.height(150)
.dimension(magnitudeDimension)
.x(d3.scaleLinear()
.range([0, width])
.domain([0, 8]))
.xUnits(dc.units.integers)
.gap(53)
.elasticY(true)
.group(magnitudeGroup)
let barChart2 = dc.barChart(view.querySelector("#depth-chart"))
barChart2.width(480)
.height(150)
.dimension(depthDimension)
.x(d3.scaleLinear()
.range([0, width])
.domain([0, 100]))
.xUnits(dc.units.integers)
.gap(1)
.elasticY(true)
.group(depthGroup)
let lineChart = dc.lineChart(view.querySelector("#time-chart"))
lineChart.width(960)
.height(150)
.dimension(depthDimension)
.x(d3.scaleTime()
.domain(d3.extent(dataset, d => d.dtg)))
.group(timeGroup)
dc.renderAll()
return view
}
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>
`
}
dataset = d3.csv('https://gist.githubusercontent.com/emanueles/65a308ffa630689c11a031252998ef8d/raw/a004c770786229d54264406118ae21ba7e4c51a8/earthquakes.csv').then(function(data) {
let parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S")
let magFormat = d3.format(".1f")
let depthFormat = d3.format("d")
data.forEach(function(d,i){
d.dtg = d.origintime.substr(0,19)
d.dtg = parseDate(d.dtg)
d.depth = depthFormat(+d.depth)
d.magnitude = magFormat(+d.magnitude)
})
return data
})
data = crossfilter(dataset)
dateDimension = data.dimension(d => d.dtg)
magnitudeDimension = data.dimension(d => d.magnitude)
magnitudeGroup = magnitudeDimension.group()
depthDimension = data.dimension(d => d.depth)
depthGroup = depthDimension.group()
timeDimension = data.dimension((d) => d3.timeHour(d.dtg))
timeGroup = timeDimension.group()
dc = require('dc')
crossfilter = require('crossfilter2')
d3 = require('d3')
$ = require('jquery').then(jquery => {
window.jquery = jquery;
return require('popper@1.0.1/index.js').catch(() => jquery);
})
bootstrap = require('bootstrap')
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.
