popRaw = d3.csv("https://raw.githubusercontent.com/open-numbers/ddf--gapminder--fasttrack/refs/heads/master/countries_etc_datapoints/ddf--datapoints--pop--by--country--time.csv", d3.autoType)
lexRaw = d3.csv("https://raw.githubusercontent.com/open-numbers/ddf--gapminder--fasttrack/refs/heads/master/countries_etc_datapoints/ddf--datapoints--lex--by--country--time.csv", d3.autoType)
gdpRaw = d3.csv("https://raw.githubusercontent.com/open-numbers/ddf--gapminder--fasttrack/refs/heads/master/countries_etc_datapoints/ddf--datapoints--gdp_pcap--by--country--time.csv", d3.autoType)
countriesRaw = d3.csv("https://raw.githubusercontent.com/open-numbers/ddf--gapminder--fasttrack/refs/heads/master/ddf--entities--geo--country.csv", d3.autoType)
data = aq.from(popRaw)
.join_full(aq.from(lexRaw))
.join_full(aq.from(gdpRaw))
.join_full(aq.from(countriesRaw).select("country","name","world_4region"))
.objects()
data
Type Table, then Shift-Enter. Ctrl-space for more options.
chart = Plot.plot({
x: { type: "log", grid: true },
y: {grid: true},
r: { range: [1, width / 17] },
color: {
legend: true,
domain: ["americas", "europe", "africa", "asia", "unknown"],
range: [ "#7feb00", "#ffe700", "#00d5e9", "#ff5872", "#ffb600" ]
},
width,
height,
marks: [
// Plot.text([year], {
// x: d3.max(data, d => d.gdp_pcap),
// dx: - width / 2,
// y: d3.max(data, d => d.lex),
// dy: height / 2,
// fill: "#ccc",
// fontFamily: "monospace",
// fontSize: width / 3,
// text: d => "" + d
// }),
Plot.dot(data, {
filter: f => f.time === year,
x: "gdp_pcap",
y: "lex",
strokeWidth: 1,
stroke: "black",
fill: "world_4region",
r: "pop",
opacity: 0.8,
tip: true,
title: "name"
})
]
})
height = 600
[year]
timespan = d3.extent(data, d => d.time)
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.
