data = (await require('vega-datasets'))['gapminder.json']()
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data_2000 = data.filter(d => d.year === 2000)
data_2000c1 = data_2000.filter(d => d.cluster === 1)
data_US = data.filter(d => d.country == "United States")
five_countries = new Set([
"United States",
"France",
"Austria",
"Brazil",
"Germany"
])
data_5countries = data.filter((d) => five_countries.has(d.country))
import {vl} from '@vega/vega-lite-api-v5'
vl
.markPoint()
.data(data_2000)
.encode(vl.x().fieldQ("fertility"),
vl.y().fieldQ("life_expect"))
.render()
vl
.markPoint()
.data(data_2000)
.encode(
vl.x().fieldQ("fertility"),
vl.y().fieldQ("life_expect"),
vl.color().fieldN("cluster"),
vl.size().fieldQ("pop")
)
.render()
vl
.markPoint({ color: "blue" })
.data(data_2000)
.encode(
vl.x().fieldQ("fertility"),
vl.y().fieldQ("life_expect"),
vl.size().fieldQ("pop")
)
.render()
vl
.markPoint()
.data(data_2000)
.encode(
vl.x().fieldQ("fertility"),
vl.y().fieldQ("life_expect"),
vl.shape().fieldN("cluster")
)
.render()
vl
.markLine()
.data(data_US)
.encode(vl.x().fieldO("year"),
vl.y().fieldQ("fertility"))
.render()
vl
.markLine()
.data(data_5countries)
.encode(
vl.x().fieldO("year"),
vl.y().fieldQ("fertility"),
vl.color().fieldN("country")
)
.render()
vl
.markArea()
.data(data_5countries)
.encode(
vl.x().fieldO("year"),
vl.y().fieldQ("fertility"),
vl.color().fieldN("country")
)
.render()
vl
.markBar()
.data(data_2000c1)
.encode(vl.x().fieldN("country"),
vl.y().fieldQ("pop"))
.render()
vl
.markBar()
.data(data_2000c1)
.encode(vl.y().fieldN("country"),
vl.x().fieldQ("pop"))
.render()
vl
.markBar()
.data(data_2000c1)
.encode(vl.y().fieldN("country").sort("-x"),
vl.x().fieldQ("pop"))
.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.
