Published
Edited
Sep 22, 2022
{
const magnitudeBarChart = 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/2)
.height(200)
const depthBarChart = 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/2)
.height(200)
const eventsByHour = 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(200)
return vl.vconcat(vl.hconcat(magnitudeBarChart, depthBarChart), eventsByHour).render()
}
earthquakes = FileAttachment("earthquakes@1.csv").csv({typed: true})
import {vl} from '@vega/vega-lite-api-v5'
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.
