Public
Edited
May 7
1 fork
import {vl} from '@vega/vega-lite-api-v5'
earthquakes = FileAttachment("earthquakes2025_05_04.csv").csv({typed: true})
earthquakes
Type Table, then Shift-Enter. Ctrl-space for more options.
{
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/2 - 40)
.height(150)
const EventsByDepth = vl.markBar()
.title('Events By Depth')
.data(earthquakes)
.encode(
vl.x().fieldQ('depth').bin({maxbins : 30}).title('Depth'),
vl.y().count().title(null)
)
.width(width/2 - 40)
.height(150)
const vis1 = vl.hconcat(magBarChart, EventsByDepth)
const EventsPerHour = vl.markLine()
.title('Events Per Hour')
.data(earthquakes)
.encode(
vl.x().fieldT('origintime').timeUnit('hoursdatemonth').title('Date'),
vl.y().count().title(null)
)
.width(width - 40)
.height(150)
const vis2 = vl.vconcat(vis1, EventsPerHour)
return vis2.render();
}
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.
