data = (await require('vega-datasets'))['gapminder.json']()
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))
data_2000_5countries = data_5countries.filter((d) => d.year === 2000)
import { vl } from "@vega/vega-lite-api-v5"
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()
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({ grid: false }),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster"),
vl.size().fieldQ("pop")
)
.render()
vl
.markPoint()
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({
grid: false,
tickSize: 20,
tickWidth: 5,
labelAngle: 45,
labelColor: "blue",
labelFontSize: 20
}),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster"),
vl.size().fieldQ("pop")
)
.render()
vl
.markPoint()
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({ grid: false }),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster").scale({ scheme: "set1" }),
vl.size().fieldQ("pop")
)
.render()
vl
.markCircle()
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({ grid: false }),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster").scale({ scheme: "set1" }),
vl.size().fieldQ("pop")
)
.render()
vl
.markPoint({ filled: true })
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({ grid: false }),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster").scale({ scheme: "set1" }),
vl.size().fieldQ("pop")
)
.render()
vl
.markCircle({ stroke: "black" })
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({ grid: false }),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster").scale({ scheme: "set1" }),
vl.size().fieldQ("pop")
)
.render()
vl
.markCircle({ stroke: "black", strokeWidth: 3, fillOpacity: 0.5 })
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({ grid: false }),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster").scale({ scheme: "set1" }),
vl.size().fieldQ("pop")
)
.render()
vl
.markCircle()
.data(data_2000)
.encode(
vl.x().fieldQ("fertility").axis({ grid: false }),
vl.y().fieldQ("life_expect").axis({ grid: false }),
vl.color().fieldN("cluster"),
vl
.size()
.fieldQ("pop")
.scale({ range: [0, 1200] })
)
.render()
vl
.markCircle()
.title("Countries with higher fertility tend to have lower life expectancy")
.data(data_2000)
.encode(
vl
.x()
.fieldQ("fertility")
.axis({ grid: false })
.title("Fertility (children per woman)"),
vl
.y()
.fieldQ("life_expect")
.axis({ grid: false })
.title("Life Expectancy (years)"),
vl.color().fieldN("cluster"),
vl
.size()
.fieldQ("pop")
.scale({ range: [0, 1200] })
)
.render()
vl
.markCircle()
.title({
text: "Countries with higher fertility tend to have lower life expectancy",
subtitle: "source: gapminder.json"
})
.data(data_2000)
.encode(
vl
.x()
.fieldQ("fertility")
.axis({ grid: false })
.title("Fertility (children per woman)"),
vl
.y()
.fieldQ("life_expect")
.axis({ grid: false })
.title("Life Expectancy (years)"),
vl.color().fieldN("cluster"),
vl
.size()
.fieldQ("pop")
.scale({ range: [0, 1200] })
)
.render()
vl
.markCircle()
.width(600)
.height(300)
.title({
text: "Countries with higher fertility tend to have lower life expectancy",
subtitle: "source: gapminder.json"
})
.data(data_2000)
.encode(
vl
.x()
.fieldQ("fertility")
.axis({ grid: false })
.title("Fertility (children per woman)"),
vl
.y()
.fieldQ("life_expect")
.axis({ grid: false })
.title("Life Expectancy (years)"),
vl.color().fieldN("cluster"),
vl
.size()
.fieldQ("pop")
.scale({ range: [0, 1200] })
)
.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.
