32:T11dd,mapUrban = { const width = height; const svg = d3 .create("svg") .attr("viewBox", [0, 0, height, height]) .attr("width", width) .attr("height", height) .style("background", "white"); const radius = height / 2 - 19; svg .attr("text-anchor", "middle") .attr("stroke-linejoin", "round") .attr("font-family", "sans-serif") .attr("font-size", "11px"); const clip = DOM.uid("clip"); const clipwater = DOM.uid("clipwater"); const tpath = DOM.uid("tpath"); const defs = svg.append("defs"); defs .append("clipPath") .attr("id", clip.id) .append("circle") .attr("r", radius); defs .append("clipPath") .attr("id", clipwater.id) .append("circle") .attr("r", radius + 10); const I = d3.range(points.length / 2); const voronoi = new d3.Delaunay(points).voronoi([ -height / 2, -height / 2, height / 2, height / 2 ]); const l = svg .append("g") .attr("transform", `translate(${width / 2},${height - radius - 6})`); const cells = l .append("g") .attr("clip-path", clip) .style("fill-opacity", 0.85) .selectAll() .data(I) .join("path") .attr("fill", (i) => stroke(codes[i])) .attr("stroke", (i) => stroke(codes[i])); cells.append("title").text( (i) => `${codes[i]} - ${names.get(codes[i])} population: ${d3.format(",")(population.get(codes[i]))} density: ${density.get(codes[i]).toFixed(0)} hab./km2` ); const border = l .append("circle") .attr("r", radius + 6 / 2) .attr("fill", "none") .attr("stroke", "brown") .attr("stroke-width", 6); function controlPoints(d) { return Object.assign(d, { blocs: d.places .map((place) => I.filter((i) => names.get(codes[i]) === place)) .filter((d) => d.length > 0) .reverse() }); } const waters = l .append("g") .style("pointer-events", "none") .attr("clip-path", clipwater) .style("opacity", 0.8) .selectAll() .data(rivers.map(controlPoints)) .join("path") .attr("id", (d) => (d._id = DOM.uid("river")).id) .style("fill", "none") .style("stroke-width", 5) .style("stroke", "lightblue"); const labels = l .append("g") .style("pointer-events", "none") .selectAll() .data( d3 .groups(d3.range(points0.length), (i) => codes[i]) .filter(([code, points]) => population.get(code) >= 3500) ) .join("g"); labels .append("text") .text(([code]) => names.get(code)) .attr("dy", "0.38em") .call((text) => text.clone(true)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); const waterLabels = l .append("g") .style("pointer-events", "none") .selectAll() .data(rivers) .join("text") .attr("fill", "steelblue") .style("font-style", "italic") .attr("dy", -5); waterLabels .append("textPath") .attr("xlink:href", (d) => d._id.href) .text((d) => d.name) .attr("startOffset", "39%"); waterLabels .call((text) => text.clone(true)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-opacity", 0.8) .attr("stroke-width", 3); // main title defs .append("path") .attr("id", tpath.id) .attr( "d", d3 .arc() .innerRadius(0) .outerRadius(radius + 12) .startAngle(-Math.PI) .endAngle(Math.PI) ); l.append("text") .attr("fill", "#333") .style("font-size", "18px") .style("font-weight", "bold") .append("textPath") .attr("xlink:href", tpath.href) .text("41. LOIR-ET-CHER") .attr("startOffset", "50%"); const waterLine = d3.line().curve(d3.curveNatural); function update(step) { // Preserve continuity preserveContinuity(voronoi, codes); // Sliced Optimal Transport discUniformTransportBatched(points, radius, { dirs: 5, strength: 0.8 }); // Relaxation lloydsRelaxation(voronoi, radius); voronoi.update(); cells.attr("d", (i) => voronoi.renderCell(i)); labels.attr("transform", ([, I]) => `translate(${centroid(I)})`); waters.attr("d", ({ blocs }) => { const c = blocs.map(centroid); const a = d3.interpolateArray(c[0], c[c.length - 1]); return waterLine([[...a(-0.6)], ...c, [...a(1 + 0.6)]]); }); return points; } function centroid(index) { return [ d3.mean(index, (i) => points[2 * i]), d3.mean(index, (i) => points[2 * i + 1]) ]; } return Object.assign(svg.node(), { update }); }33:T41c,choropleth = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width); const path = d3.geoPath(projection); svg .append("g") .selectAll() .data(geo.features) .join("path") .attr("d", path) .attr("fill", ({ properties: { code } }) => fill(code)) .append("title") .text(({ properties: { nom } }) => nom); svg .append("g") .append("path") .datum(geo) .attr("d", path) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 0.5); const waters = svg .append("g") .style("pointer-events", "none") .selectAll() .data( rivers.map(({ places }) => ({ type: "LineString", coordinates: places.map((d) => d3.geoCentroid( geo.features.find(({ properties: { nom } }) => nom === d) ) ) })) ) .join("path") .attr("d", path) .style("fill", "none") .style("stroke-width", 5) .style("stroke", "lightblue"); return svg.node(); }34:T44c,points0 = { let rest = 0; const phi = Math.PI * (3 - Math.sqrt(5)); return ( d3 // sort the features by what we're plotting, so that missing or excess // rural population from a commune goes to another rural commune .sort(geo.features, ({ properties: { code } }) => density.get(code)) .flatMap((f) => { const coords = projection(d3.geoCentroid(f)); const { properties: { code } } = f; const pop = population.get(code); const length = Math.round((pop + rest) / precision); // we keep track of the difference between the current sum and the true sum, and add // the people we missed (or overcounted) to the next unit, so that the grand total is correct. rest += pop - length * precision; return Array.from({ length }, (_, i) => { const r = 0.1 * Math.sqrt(0.5 + i); return { coords: [ coords[0] + r * Math.sin(i * phi), coords[1] + r * Math.cos(i * phi) ], code }; }); }) ); }35:T458,discUniformTransportBatched = { let indices = [], projection, deltas; // batched return ( points, radius, { dirs = 3, strength = 1, profile = chordAreaInverse } = {} ) => { const n = points.length / 2; if (n !== indices.length) { indices = Uint32Array.from(d3.range(n)); projection = new Float32Array(n); deltas = new Float32Array(2 * n); } const a = 2 * Math.PI * Math.random(); deltas.fill(0); for (let d = 0; d < dirs; d++) { const ap = a + (Math.PI * d) / dirs, sa = Math.sin(ap), ca = Math.cos(ap); for (let i = 0; i < n; i++) projection[i] = ca * points[2 * i] + sa * points[2 * i + 1]; indices.sort((i, j) => projection[i] - projection[j]); for (let k = 0; k < n; k++) { const i = indices[k], ideal = radius * profile(k / (n + 1)), delta = ideal - projection[i]; deltas[2 * i] += ca * delta; deltas[2 * i + 1] += sa * delta; } } for (let i = 0; i < points.length; i++) points[i] += (deltas[i] / dirs) * strength; }; }36:T409,function preserveContinuity(voronoi, codes) { const { delaunay: { points } } = voronoi; const counts = {}; const colors = codes.map((d) => (counts[d] = (counts[d] || 0) + 1) - 1); let cutoff = 10; do { let changed = false; for (let i = 0; i < codes.length; i++) { for (const j of voronoi.delaunay.neighbors(i)) { if (codes[i] === codes[j] && colors[j] !== colors[i]) { colors[j] = colors[i] = Math.min(colors[j], colors[i]); changed = true; } } } if (!changed) cutoff = 0; } while (cutoff-- > 0); for (let i = 0; i < colors.length; i++) { const f = colors[i]; if (f > 0) { console.log("fix continuity for point", i, codes[i]); const base = []; for (let j = 0; j < i; j++) if (codes[j] === codes[i]) base.push(j); points[2 * i] += 0.7 * (d3.mean(base, (i) => points[2 * i]) - points[2 * i]); points[2 * i + 1] += 0.7 * (d3.mean(base, (i) => points[2 * i + 1]) - points[2 * i + 1]); } } }37:[{"id":"c8fba803f60e214b8b1be48ac48720c6bf37081ae731f57a6eaf94d3718bda1670683ebc6bb2b24abb0abd2a19bb4629dc30e28f37a2fe63f0be68f7e13f534e","href":"https://static.observableusercontent.com/files/c8fba803f60e214b8b1be48ac48720c6bf37081ae731f57a6eaf94d3718bda1670683ebc6bb2b24abb0abd2a19bb4629dc30e28f37a2fe63f0be68f7e13f534e","name":"Communes-Tableau 1.csv","type":"text/csv","lastModified":1636636709894.004,"size":17793},{"id":"ba0aff37c510bd5652498b2b32f9f48153b66778765098b87f5d35900e18b0be3499506fcd4c33df03fd1be2037683e6cdd768a952f8c8786fa3a073d53c149b","href":"https://static.observableusercontent.com/files/ba0aff37c510bd5652498b2b32f9f48153b66778765098b87f5d35900e18b0be3499506fcd4c33df03fd1be2037683e6cdd768a952f8c8786fa3a073d53c149b","name":"41.json","type":"application/json","lastModified":1636887685929.436,"size":387391},{"id":"6c36b9698a0028c298f902d097d15b8d12a5fa4fb29951fdac550a93fd5dc58d6173003989b2ca39fc96c879b56460d9f5eb965d5b38ca63858e59af8368119d","href":"https://static.observableusercontent.com/files/6c36b9698a0028c298f902d097d15b8d12a5fa4fb29951fdac550a93fd5dc58d6173003989b2ca39fc96c879b56460d9f5eb965d5b38ca63858e59af8368119d","name":"population41.csv","type":"text/csv","lastModified":1636887758722.262,"size":2820}] 2f:{"title":"Loir-et-Cher isodémographique","cells":[{"id":922,"value":"# Loir-et-Cher isodémographique\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"*#30DayMapChallenge — Day 16. Urban/rural.*\n\nAn *isodemographic cartogram* of the population of Loir-et-Cher, the *département* in which I live, in France. Each unit cell in the Petri dish represents ${precision} persons from the same *commune*. Instead of showing urban and rural **areas**, the map describes urban and rural **populations**. It gives an equal importance to people rather than to square kilometers.","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"viewof colorBy = Inputs.select(\n [\"urban/rural\", \"population density\", \"commune\"],\n {\n label: \"color by\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"viewof precision = Inputs.select([2000, 1000, 500, 200, 100, 50, 20, 10], {\n label: \"persons per unit\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"colorBy === \"urban/rural\"\n ? Legend(ruralColor, { title: \"Rural vs urban (hab./km2)\" })\n : colorBy === \"population density\"\n ? Legend(densityColor, { title: \"Population density (hab./km2)\" })\n : Swatches(codeColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof replay = Inputs.button(\"replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"For reference, here’s the corresponding map in a standard projection:","pinned":false,"hidden":false,"mode":"md"},{"id":1103,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"The location of the units on the target disc is obtained with an iterative algorithm called [Sliced Optimal Transport](https://observablehq.com/@fil/sliced-optimal-transport). This technique, as far as I know, has never been used in cartography—the usual tools for isodemographic maps being [scapetoad](http://scapetoad.choros.place/) and [dougenik](https://observablehq.com/@ambassadors/lets-make-a-dougenik-cartogram).\n\nWhile sliced optimal transport generally preserves topology, some rural communes are stretched very thin because they need to accommodate the expansion of a denser neighboring town, and end up split in 2 or 3 pieces. We mend this by continuously monitoring the continuity of each commune, and regrouping units as necessary.\n\nThings we could add: regroup communes as just one shape; simplify the borders; force the result onto an hexagonal grid; create a dot map where 1 dot is 1 individual. As always, please send suggestions.","pinned":false,"hidden":false,"mode":"md"},{"id":1284,"value":"---\n*The #30DayMapChallenge was a good opportunity to try and apply Sliced Optimal Transport, which I encountered last year during a very fun workshop organized by [David Cœurjolly](https://twitter.com/dcoeurjo), [Julie Delon](https://twitter.com/@delonju) and [Bruno Lévy](https://twitter.com/@BrunoLevy01)—thanks!! & everyone at [TRANSCARTO](https://transcarto.sciencesconf.org/) for an exciting week of transformative cartography.*","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"---\n*Code*","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"If you want to save the positions of the points, when the algorithm has converged, you can download them below, together with their codes:","pinned":false,"hidden":false,"mode":"md"},{"id":1127,"value":"points = (replay,\npoints0\n .map((d) => d.coords)\n .flat()\n .map((d) => d - height / 2 + 0.01 * (Math.random() - 0.5)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"codes = points0.map((d) => d.code)","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"run = {\n for (let i = 0; i < 150; i++) {\n yield mapUrban.update(i);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"fill = colorBy === \"commune\"\n ? codeColor\n : colorBy === \"population density\"\n ? (code) => densityColor(density.get(code))\n : (code) => ruralColor(density.get(code))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1182,"value":"stroke = (c) => (c === code ? \"white\" : fill(c)) // highlight a commune","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"densityColor = d3\n .scaleSequentialSqrt(d3.interpolateCool)\n .domain(d3.extent(density, ([, v]) => v))","pinned":true,"hidden":false,"mode":"ojs"},{"id":773,"value":"ruralColor = d3\n .scaleThreshold()\n .domain([50, 100, 250])\n .range(\"e6deb2-9ac1ae-ecb45b-e07a5f\".split(\"-\").map((d) => `#${d}`))","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"codeColor = d3\n .scaleOrdinal()\n .domain(density.keys())\n .range(\n [].concat(\n d3.schemeTableau10,\n d3.schemeAccent,\n d3.schemeCategory10,\n d3.schemeDark2\n )\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1135,"value":"// jrus' fast (and precise) approximation of the chord area inverse function\nimport { chordAreaInverse2 as chordAreaInverse } from \"@fil/chord-area-inverse\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1086,"value":"function lloydsRelaxation(voronoi, radius) {\n const {\n delaunay: { points }\n } = voronoi;\n for (let i = 0; i < points.length / 2; i++) {\n const R = Math.hypot(points[2 * i], points[2 * i + 1]);\n if (R < radius) {\n const c = voronoi.cellPolygon(i);\n const p = d3.polygonCentroid(\n c.map(([x, y]) => {\n const r0 = Math.hypot(x, y);\n const a = radius / Math.max(r0, radius);\n return [x * a, y * a];\n })\n );\n const f = 0.5;\n points[2 * i] += (p[0] - points[2 * i]) * f;\n points[2 * i + 1] += (p[1] - points[2 * i + 1]) * f;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1090,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"projection = d3.geoMercator().fitSize([height, height], geo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"height = Math.min(670, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"// source \"https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/41-loir-et-cher/communes-41-loir-et-cher.geojson\"\ngeo = FileAttachment(\"41.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"names = new Map(geo.features.map((f) => [f.properties.code, f.properties.nom]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"density = new Map(\n d3.sort(\n geo.features.map((f) => [\n f.properties.code,\n (population.get(f.properties.code) / d3.geoArea(f)) *\n ((4 * Math.PI) / 510.1e6) // population per km2\n ]),\n ([, v]) => v\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"population = FileAttachment(\"population41.csv\")\n .csv()\n .then((d) => new Map(d.map(({ code, population }) => [code, +population])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"The three main rivers are described by a few key communes, hand-picked so that the resulting paths evoke the relative wiggliness of each of the rivers.","pinned":false,"hidden":false,"mode":"md"},{"id":946,"value":"rivers = [\n {\n name: \"La Loire\",\n places: [\n \"Saint-Laurent-Nouan\",\n \"Montlivault\",\n \"Candé-sur-Beuvron\",\n \"Monteaux\"\n ]\n },\n {\n name: \"Le Loir\",\n places: [\n \"Saint-Jean-Froidmentel\",\n \"Fréteval\",\n \"Pezou\",\n \"Lisle\",\n \"Vendôme\",\n \"Naveil\",\n \"Mazangé\",\n \"Saint-Rimay\",\n \"Montoire-sur-le-Loir\",\n \"Couture-sur-Loir\"\n ]\n },\n {\n name: \"Le Cher\",\n places: [\"Selles-sur-Cher\", \"Saint-Aignan\", \"Montrichard Val de Cher\"]\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1277,"value":"*This part of the UI is not super useful, hiding it for now*","pinned":false,"hidden":false,"mode":"md"},{"id":1184,"value":"viewof code = Inputs.select(\n new Map(d3.sort([[\"\", \"\"], ...names].map(([x, y]) => [y, x])), ([x]) => x),\n {\n label: \"highlight\",\n value: \"\" // \"41034\" // Chambord\n }\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}