data = d3.csv("https://raw.githubusercontent.com/Tejasweee/edudata/refs/heads/main/gapminderformat/fem_edu_20_24.csv", d3.autoType)
data
Type Table, then Shift-Enter. Ctrl-space for more options.
chart = {
// --- Start of the code block ---
// 1. Calculate Development Thresholds
// Find the US life expectancy for the key years.
const usLex1960 = data.find(d => d.name === "USA" && d.time === 1960)?.lex;
const usLex2020 = data.find(d => d.name === "Japan" && d.time === 2020)?.lex;
// Calculate the levels based on your rules
const highlyDevelopedLevel = usLex2020;
const developedLevel = usLex1960;
const middleLevel = (usLex1960 + usLex2020) / 2.0; // 20% less
const leastDevelopedLevel = 55; //usLex1960 * 0.60; // 40% less
// 2. Define Data for the Visual Zones
const developmentZones = [
{ level: "Least Developed", y1: 25, y2: leastDevelopedLevel, color: "#f7f7f7" },
{ level: "Moderate", y1: leastDevelopedLevel, y2: developedLevel, color: "#d9d9d9" },
{ level: "Developed", y1: developedLevel, y2: middleLevel, color: "#b3b3b3" },
{ level: "Highly Developed", y1: middleLevel, y2: highlyDevelopedLevel, color: "#828282" }
];
// 3. Create the Chart (this is the last expression, so its value is returned)
return Plot.plot({
x: { type: "linear", grid: true, label: "Female Primary School Completion (%)" },
y: { grid: true, label: "Life Expectancy (years)", domain: [30, 90] },
r: { range: [1, width / 17] },
color: {
legend: true,
domain: ["americas", "europe", "africa", "asia", "unknown"],
range: ["#7feb00", "#ffe700", "#00d5e9", "#ff5872", "#ffb600"]
},
width,
height,
marks: [
// Background rectangles for each zone
Plot.rectY(developmentZones, {
y1: "y1",
y2: "y2",
fill: "color",
opacity: 0.4
}),
// Dashed lines at the thresholds
Plot.ruleY([leastDevelopedLevel, developedLevel, highlyDevelopedLevel], {
stroke: "black",
strokeDasharray: "3,3",
strokeWidth: 0.75
}),
// Text labels for each zone
Plot.text(developmentZones, {
x: 5,
y: d => d.y1 + 3,
text: "level",
textAnchor: "start",
fill: "black",
fontWeight: "bold",
fontSize: 11
}),
// 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"
}),
]
});
// --- End of the code block ---
}
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.
