import {swatches} from "@d3/color-legend"
swatches({
color: d3.scaleOrdinal(["LIC", "LMIC", "UMIC", "HIC"], d3.schemeCategory10)
})
c = chart("u5mortality", [0,300], "↑ Under-5 mortality (per 1000 births)");
c.update(currentData)
c2 = chart("matmortality", [0,1200], "↑ maternal mortality (per 100,000 births)");
c2.update(currentData);
currentData = dataAt(year)
x = d3.scaleLog([2, 1e5], [margin.left, width - margin.right])
fy = function(range){return d3.scaleLinear(range, [height - margin.bottom, margin.top])}
radius = d3.scaleSqrt([0, 5e8], [0, width / 30])
colorscale = d3.scaleOrdinal([1, 2, 3, 4], d3.schemeCategory10)
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80, ","))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("Income per capita (dollars) →"))
fyAxis = function(ay, annotation){
return g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(ay))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(annotation))}
fgrid = function(ay){
return g => g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.call(g => g.append("g")
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom))
.call(g => g.append("g")
.selectAll("line")
.data(ay.ticks())
.join("line")
.attr("y1", d => 0.5 + ay(d))
.attr("y2", d => 0.5 + ay(d))
.attr("x1", margin.left)
.attr("x2", width - margin.right));}
function dataAt(year) {
return mapped.map(d => ({
name: d.name,
region: d.region,
id: valueAt(d.id, year),
economy: valueAt(d.economy, year),
income: valueAt(d.income, year),
population: valueAt(d.population, year),
u5mortality: d3.max([0, valueAt(d.u5mortality, year)]),
matmortality: d3.max([0, valueAt(d.matmortality, year)])
})).filter(d => d.income > 0);
}
function valueAt(values, year) {
const i = bisectYear(values, year, 0, values.length - 1);
const a = values[i];
if (i > 0) {
const b = values[i - 1];
const t = (year - a[0]) / (b[0] - a[0]);
return a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
function labelText(d, quantity){
return [d.name, "population: " + d3.format(",.2r")(d.population),
"gov. rev. per cap. : $" + d3.format(",.2r")(d.income),
quantity + ": " + d[quantity].toFixed(2)].join("\n");
}
bisectYear = d3.bisector(([year]) => year).left
margin = ({top: 20, right: 20, bottom: 35, left: 40})
height = 560
d3 = require("d3@5")
import {Scrubber} from "@mbostock/scrubber"
data2 = d3.csvParse(await FileAttachment("lives saved data.csv").text())
countries = d3.nest()
.key(function(d) { return d.COUNTRY; })
.entries(data2);
mapped = countries.map( function(d){
return {
name : d.key,
income : d.values.map(function(e) {
return [+e.YEAR, +e.GOVREVPERCAP];
}),
population : d.values.map(function(e) {
return [+e.YEAR, +e.POPULATION];
}),
u5mortality : d.values.map(function(e) {
return [+e.YEAR, +e.U5MORTALITY];
}),
matmortality : d.values.map(function(e) {
return [+e.YEAR, +e.MATMORTALITY];
}),
economy : d.values.map(function(e) {
return [+e.YEAR, +e.INCOME];
}),
id : d.values.map(function(e) {
return [+e.YEAR, +e.ID];
})
};})
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.
