The same idea as Composition with Continents, but readable — and this time the color means something. Every country is ruled off in heavy black and filled by land area: the giants (over 2 million km²) go red, the large countries blue, the mid-sized yellow, and everything smaller stays white. So the boldest blocks land on the biggest nations — Russia, Canada, China — using the same authoritative areakm2 mapjson serves. A De Stijl painting that's also a size atlas.
One mapjson call returns the country polygons and their areakm2. They're drawn in an Equal Earth projection with thick black borders — the borders are Mondrian's rules — and each country is filled by which land-area band it falls in: red, blue, yellow, or off-white. No randomness; the palette is a legend. Because the coloring is data, not decoration, the picture is stable — the same three giants are always red.
https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=medium&properties=name,areakm2&format=geojson
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The World in Red, Blue and Yellow — after Mondrian</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; background: #fafafa; font-family: system-ui, sans-serif; }
.wrap { max-width: 980px; margin: 2rem auto; padding: 0 1rem; }
#map { background: #f6f2e8; border-radius: 4px; overflow: hidden; }
#map svg { width: 100%; display: block; }
button { margin-top: 0.7rem; font: 12px ui-monospace, monospace; padding: 6px 12px; background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<div class="wrap">
<div id="map"></div>
<div style="font:12px ui-monospace,monospace;color:#4a4a45;margin-top:.6rem">red > 2M km² · blue 0.7–2M · yellow 0.15–0.7M · white < 0.15M</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script>
const W = 960, H = 560;
const svg = d3.select("#map").append("svg").attr("viewBox", `0 0 ${W} ${H}`);
const WHITE = "#f6f2e8", BLACK = "#141414";
const RED = "#d1332a", BLUE = "#1f4fa3", YEL = "#f2c33d";
// the reason to color: land area (mapjson's areakm2). bigger country → bolder color.
const colorFor = (a) => a > 2e6 ? RED : a > 7e5 ? BLUE : a > 1.5e5 ? YEL : WHITE;
d3.json("https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=medium&properties=name,areakm2&format=geojson").then((w) => {
const proj = d3.geoEqualEarth().rotate([-11, 0]).fitExtent([[26, 26], [W - 26, H - 26]], { type: "Sphere" });
const path = d3.geoPath(proj);
svg.append("rect").attr("width", W).attr("height", H).attr("fill", WHITE);
svg.append("g").selectAll("path").data(w.features).join("path")
.attr("d", path)
.attr("fill", (d) => colorFor(d.properties.areakm2 || 0))
.attr("stroke", BLACK).attr("stroke-width", 2.2).attr("stroke-linejoin", "round");
svg.append("rect").attr("x", 4).attr("y", 4).attr("width", W - 8).attr("height", H - 8)
.attr("fill", "none").attr("stroke", BLACK).attr("stroke-width", 12);
});
</script>
</body>
</html>