import {vl} from '@vega/vega-lite-api-v5'
earthquakes = FileAttachment("earthquakes2025_05_04.csv").csv({typed: true})
topo = FileAttachment("nz-topo.json").json()
earthquakes
Type Table, then Shift-Enter. Ctrl-space for more options.
{
const magBarChart = vl.markBar({color: "#888"})
.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({color: "#888"})
.title('Events By Depth')
.data(earthquakes)
.encode(
vl.x().fieldQ('depth').bin({maxbins : 30}).title('Depth'),
vl.y().count().title(null)
)
.width(width*0.40)
.height(200);
const vis1 = vl.vconcat(magBarChart, EventsByDepth)
const vis2 = vl.hconcat(vis1, mapView)
const EventsPerHour = vl.markLine({color: "#666"})
.title('Events Per Hour')
.data(earthquakes)
.encode(
vl.x().fieldT('origintime').timeUnit('hoursdatemonth').title('Date'),
vl.y().count().title(null)
)
.width(width - 50)
.height(200)
const vis3 = vl.vconcat(vis2, EventsPerHour).resolve({scale: {size: 'independent'}}).title("Earthquakes in New Zealand")
return vis3.render();
}
mapView = {
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: "#fff",
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([190, 40.5]).translate(width*0.15, 250).scale(1300)
)
.width(width*0.40)
.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.
