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
}
map = {
buildvis;
let mapInstance = L.map('mapid').setView([-41.05,172.93], 5)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 17
}).addTo(mapInstance)
return mapInstance
}
circlesLayer = L.layerGroup().addTo(map)
circles = {
circlesLayer.clearLayers()
dataset.forEach( function(d) {
//let circle = L.circle([d.latitude, d.longitude], 10000, {
let circle = L.circle([d.latitude, d.longitude], d.magnitude * 10000, {
color: '#fd8d3c',
weight: 2,
fillColor: '#fecc5c',
fillOpacity: 0.5
})
circle.bindPopup("magnitude:",d.magnitude,"time:",d.dtg)
circlesLayer.addLayer(circle) })
}
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')
L = require('leaflet@1.5.1')
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.
