Public
Edited
Dec 10, 2022
1 fork
{
const magBarChart = vl.markBar()
.title('Number of Events by Magnitude')
.data(earthquakes)
.encode(
vl.x().fieldQ('magnitude').bin({maxbins:30}).title('Magnitude'),
vl.y().count().title(null)
)
.width(width * 0.40)
.height(200)
const eventsByDepth = vl.markBar()
.title('Events by Depth (km)')
.data(earthquakes)
.encode(
vl.x().fieldQ('depth').bin({ maxbins:30}).title('Depth'),
vl.y().count().title(null)
)
.width(width * 0.40)
.height(200)
const eventsPerHour = vl.markLine()
.title('Events per Hour')
.data(earthquakes)
.encode(
vl.x().fieldT('origintime').timeUnit('hoursdatemonth').title('Date').axis({tickCount: 10}),
vl.y().count().title(null)
)
.width(width)
.height(150)
return vl.vconcat(vl.hconcat(vl.vconcat(magBarChart, eventsByDepth), map_view), eventsPerHour)
.resolve({scale: {size: 'independent'}})
.render()
}
map_view = {
// base map of New Zeland
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(topo).feature('nzl_subunits'))
const circles = vl.markCircle({
fillOpacity: 0.3,
color: '#54E1AE',
stroke: '#008246',
strokeWidth: 1,
strokeOpacity: 0.7
})
.data(earthquakes)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.size()
.fieldQ('magnitude')
.scale({type: 'pow', range: [0, 700]}).legend({title: 'Magnitude'})
)
return vl.layer(map, circles)
.project(
vl.projection('transverseMercator').rotate([188, 40.5]).translate(width*0.16, 250).scale(1300)
)
.width(width*0.45)
.height(500)
}
signal = 'brush'
// selected = Generators.observe((notify) => {
// const selected = (selection, predicates) => {
// const within = earthquakes.filter(d => {
// for (const [key, [min, max]] of Object.entries(predicates))
// if (isNaN(+d[key]) || d[key] < min || d[key] > max)
// return false;
// return true;
// })
// notify(within);
// }
// dashboard.addSignalListener(signal, selected);
// return () => dashboard.removeEventListener(signal, selected);
// })
topo = FileAttachment("nz-topo.json").json()
earthquakes = FileAttachment("earthquakes@1.csv").csv({typed: true})
import {vl} from '@vega/vega-lite-api-v5'
{
const magBarChart = vl.markBar()
.title("Number of events by Magnitude")
.data(earthquakes)
.encode(
vl.x().fieldQ('magnitude').bin({maxbins: 25}).title("Magnitude"),
vl.y().count().title(null)
)
.width(width*0.25)
.height(200)
const depBarChart = vl.markBar()
.title("Events by Depth")
.data(earthquakes)
.encode(
vl.x().fieldQ('depth').bin({maxbins: 25}).title("Depth"),
vl.y().count().title(null)
)
.width(width/2 - 100)
.height(160)
const eventsPerHour = vl.markLine()
.title("Events per Hour")
.data(earthquakes)
.encode(
vl.x().fieldT('origintime').timeUnit('hoursdatemonth'),
vl.y().count()
)
.width(width-40)
.height(150)
return vl
.vconcat(
vl.hconcat(
vl.vconcat(magBarChart,depBarChart),map_view2),
eventsPerHour)
.resolve({scale: {size: 'independent'}})
.render();
}
map_view2 = {
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(topo).feature('nzl_subunits'))
const circles = vl.markCircle({
fillOpacity: 0.3,
color: '#54E1AE',
stroke: '#008246',
strokeWidth: 1,
strokeOpacity: 0.7
})
.data(earthquakes)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.size()
.fieldQ('magnitude')
.scale({type: 'pow', range: [0,600]}).legend({title: 'Magnitude'})
)
return vl.layer(map, circles)
.project(
vl.projection("transverseMercator").rotate([188, 40.5]).translate(width*0.16, 250).scale(1300)
)
.width(width*0.45)
.height(500)
}
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.
