data = d3.csv("https://raw.githubusercontent.com/Tejasweee/edudata/refs/heads/main/gapminderformat/fem_pri_20_24.csv", d3.autoType)
data
Type Table, then Shift-Enter. Ctrl-space for more options.
chart = Plot.plot({
x: { type: "linear", 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: [
// Background year label
Plot.text([year], {
x: d3.max(data, d => d.fem_pri_20_24),
dx: -width / 2,
y: d3.max(data, d => d.lex),
dy: height / 2,
fill: "#ccc",
fontFamily: "monospace",
fontSize: width / 3,
text: d => "" + d
}),
// Data dots for selected year
Plot.dot(data, {
filter: d => d.time === year,
x: "fem_pri_20_24",
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.
