Public
Edited
Dec 10, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
years = [...data.keys()]
Insert cell
yearData = data.get(date)
Insert cell
yearMean = formatMean(d3.mean(yearData.values()))
Insert cell
formatMean = d3.format(",.2f")
Insert cell
data = new Map([
...d3.rollup(
entries,
(v) => d3.sum(v, (d) => d.life_expectancy),
(d) => d.year,
(d) => d.entity
)
])
Insert cell
dataDomain = d3.extent(entries, (d) => d.life_expectancy)
Insert cell
Insert cell
color = d3.scaleSequential()
.domain(dataDomain)
.interpolator(colorInterpolator)
.unknown("#ccc")
Insert cell
projection = d3.geoEqualEarth() // Use an equal-area projection for choropleth maps
Insert cell
path = d3.geoPath(projection)
Insert cell
width = 975
Insert cell
height = {
const [[x0, y0], [x1, y1]] = d3
.geoPath(projection.fitWidth(width, outline))
.bounds(outline);
const dy = Math.ceil(y1 - y0),
l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);
return dy;
}
Insert cell
outline = ({ type: "Sphere" })
Insert cell
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@7")
Insert cell
import { Scrubber } from "@mbostock/scrubber"
Insert cell
import { countries, world } from "@d3/world-choropleth"
Insert cell
import { colorInterpolatorPicker } from "@zechasault/color-schemes-and-interpolators-picker"
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
Insert cell

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.
Learn more