Published
Edited
Nov 11, 2021
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
rescale = d3
.scaleLinear()
.domain(d3.extent(countries.features.map(accessor)))
.range([0.001, 10 ** (5 * (1 - exaggeration / 100))])
Insert cell
accessor = ({ id }) => +meta.get(id)[param] || 0
Insert cell
color = d3.scaleSequentialSqrt(
rescale.domain(),
param === "pop_est"
? d3.interpolateBlues
: param === "area"
? d3.interpolateGreens
: param === "gdp_md_est"
? d3.interpolatePurples
: param === "prison_est"
? d3.interpolateGreys
: d3.interpolateReds
)
Insert cell
inversecolor = d3.scaleSequentialSqrt(
rescale.domain().slice().reverse(),
color.interpolator()
)
Insert cell
Insert cell
Insert cell
Insert cell
meta = d3
.tsv(
"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas@0.0.6/world/110m.tsv"
)
.then((data) => {
const C = d3.index(countries.features, ({ id }) => id);
for (const c of data) {
if (prisonByCountry.get(c.adm0_a3)) {
c.prison_quota = prisonByCountry.get(c.adm0_a3).prison100k;
c.prison_est = Math.round(
(prisonByCountry.get(c.adm0_a3).prison100k * c.pop_est) / 100000
);
c.test = c.adm0_a3;
c.area = d3.geoArea(C.get(c.id));
}
}
return d3.index(data, ({ id }) => id);
})
Insert cell
Insert cell
Insert cell
Insert cell
topogram = require("topogram")
Insert cell
carto = topogram
.cartogram()
.projection(projection)
.properties((d) => d.properties)
.value((d) => rescale(accessor(d)))
Insert cell
mutable debug = ({})
Insert cell
cartogramFeatures = carto(
world2,
world2.objects.countries.geometries
).features.map((d) => {
const geometry = d.geometry;
geometry.coordinates =
geometry.type === "MultiPolygon"
? geometry.coordinates.map((poly) =>
poly.map((ring) => ring.map(projection.invert))
)
: geometry.coordinates.map((ring) => ring.map(projection.invert));
return d;
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
areas.get("732")
Insert cell
Insert cell
errorMedian = d3.median(errors, (d) => Math.abs(d.error))
Insert cell
errorDeviation = d3.deviation(errors, (d) => d.error)
Insert cell
Insert cell
topojson = require("topojson")
Insert cell
d3 = require("d3@7", "d3-geo-projection@3")
Insert cell
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