Notebooks 2.0 is here.

Public
Edited
Nov 4, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
brush = vl.selectInterval().name('brush').encodings('x')
Insert cell
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)
.transform(vl.filter(brush))
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.size()
.fieldQ('magnitude')
.scale({type: 'pow', range: [0, 700]}).legend({title: 'Magnitude'}),
vl.tooltip('magnitude').format('.2f')
)
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)
}
Insert cell
signal = 'brush'
Insert cell
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);
})
Insert cell
Insert cell
topo = FileAttachment("nz-topo.json").json()
Insert cell
earthquakes = FileAttachment("earthquakes@1.csv").csv({typed: true})
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell

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.
Learn more