The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
Public
Edited
Nov 21, 2022
5 forks
12 stars
rescale = d3
.scaleLinear()
.domain(d3.extent(countries.features.map(accessor)))
.range([0.001, 10 ** (5 * (1 - exaggeration / 100))])
d3.extent(countries.features.map(accessor))
countries.features.map(accessor)
accessor = ({ id }) => +meta.get(id)[param] || 0
color = d3.scaleSequentialSqrt(
rescale.domain(),
param === "pop_est"
? d3.interpolateBlues
: param === "area"
? d3.interpolateGreens
: d3.interpolateReds
)
inversecolor = d3.scaleSequentialSqrt(
rescale.domain().slice().reverse(),
color.interpolator()
)
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) {
c.area = d3.geoArea(C.get(c.id));
}
return d3.index(data, ({ id }) => id);
})
world2 = {
if (!world.objects.countries)
world.objects.countries = world.objects.world_countries_data;
if (!world.transform) world.transform = { scale: [1, 1], translate: [0, 0] };
world.objects.countries.geometries = world.objects.countries.geometries.filter(
(d) => d.id !== "010"
);
return world;
}
topogram = require("topogram")
carto = topogram
.cartogram()
.projection(projection)
.properties((d) => d.properties)
.value((d) => rescale(accessor(d)))
mutable debug = ({})
cartogramFeatures
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;
})
// a log error seems more useful?
errors = cartogramFeatures.map((d) => ({
id: d.id,
error: Math.log(areas.get(d.id) / areasSum / (accessor(d) / valuesSum))
}))
errorMedian = d3.median(errors, (d) => Math.abs(d.error))
errorDeviation = d3.deviation(errors, (d) => d.error)
topojson = require("topojson")
d3 = require("d3@7", "d3-geo-projection@3")
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.
