2b:null 2c:["$","title",null,{"children":"Loir-et-Cher isodémographique | Visionscarto | Observable"}] 31:T4a5,This cell creates the dots and their initial positions. It takes all the communes one by one, in density order. For each commune it divides its number of habitants by the precision, to get the number of dots to generate for this commune. Then it generates the dots at the location (centroid) of that commune, but instead of putting them all exactly in the same spot (which would confuse the layout algorithms), it dispatches them on a very small spiral around the centroid. Since the number of dots is integer, we accumulate rounding errors in the "rest" variable, so that we don't lose inhabitants from smaller communes. If a village has 890 hab. and the precision is 500, we generate 1 dot. The 390 hab that are not taken into account by that dot will be added to the next village, which is "similar" in density—maybe it has 923 hab. That second commune will then generate 2 dots (923+390 div 500), and the new rest will be 313, passed to the next village etc. Overall it means that everyone will be accounted for, except maybe the last inhabitants from the largest city (0 to 499 persons). We could make this slightly more accurate by rounding up if the final rest is > precision/2.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:{"id":"8ae16ee727a00011","slug":"loir-et-cher-isodemographique","title":"Loir-et-Cher isodémographique","thumbnail":"6c4568edc781ed3286fcfb6069ecf17a680a863879fa623df977df31c8c9a5a8","access_level":"public","create_time":"$D2021-11-11T13:18:29.894Z","update_time":"$D2022-06-17T20:56:43.582Z","view_time":null,"first_public_time":"$D2021-11-16T06:32:57.359Z","fork":true,"stars":62,"starred":false,"owner":{"type":"team","id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto","avatar_url":"https://avatars-next.observableusercontent.com/9946d22004b9d0eaf6a5bfda50b0a32ca1003656c403106c7b54f8dd5cf784b7","tier":"starter_2024"},"version":1293,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[{"id":"61c889e9e339420f","reply_to_id":null,"content":"This map is very impressive. I would be happy to apply this to other use cases. However, the code is really difficult to understand. A step by step approach to this kind of cartogram would be really useful to me.","create_time":"$D2022-03-10T18:58:26.509Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c1c217aebd614b45","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":null}},{"id":"315c1797eb6ea6f3","reply_to_id":"61c889e9e339420f","content":"Happy to pair on this—which parts of the code do you find most difficult? (There's the initialization, the central OT algorithm, and a bit of plumbing to make it look nice in the browser.)","create_time":"$D2022-03-10T20:26:06.796Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"b2b2dfbecd7d5b24","reply_to_id":"61c889e9e339420f","content":"I would say the intialization algorithm would be first step. I find the visualization really good even in the static form but it's complex to understand what is needed to reproduce the visualization for other examples.","create_time":"$D2022-03-11T08:50:53.029Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c1c217aebd614b45","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":null}},{"id":"55ae8d86836819dc","reply_to_id":null,"content":"Could you please explain what's happening in the calculation of the coords? Are you kind of drawing a spiral of units, ordered by population size?\n\nAnd what is the relevance of phi here?","create_time":"$D2022-06-01T06:53:49.499Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"82d610a52eb918c2","login":"benjamesdavis","name":"Ben Davis","avatar_url":"https://avatars-next.observableusercontent.com/51d9e63ff9a4521509beefa6d4e72ab399da2aa11a16fe4f2764d38b518af68d","tier":null}},{"id":"b3f047d70565e6c1","reply_to_id":"55ae8d86836819dc","content":"$31","create_time":"$D2022-06-01T07:32:53.181Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"4d6c3e4cd5befd2d","reply_to_id":"55ae8d86836819dc","content":"Ah - very clever. Any why use phi in \"Math.sin(i * phi)?\"\n\nRemoving phi seems to generate the same result.","create_time":"$D2022-06-01T07:39:59.096Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"82d610a52eb918c2","login":"benjamesdavis","name":"Ben Davis","avatar_url":"https://avatars-next.observableusercontent.com/51d9e63ff9a4521509beefa6d4e72ab399da2aa11a16fe4f2764d38b518af68d","tier":null}},{"id":"a49b1ceb8cc5cea6","reply_to_id":"55ae8d86836819dc","content":"Using phi to generate the most harmonious spiral with \"phyllotaxis arrangement\" https://observablehq.com/@d3/force-layout-phyllotaxis ; but you're right, it doesn't have a lot of impact here.","create_time":"$D2022-06-01T08:02:00.628Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"245f3e3cb2d41549","reply_to_id":null,"content":"Hello again. Could you please explain what this function is doing?","create_time":"$D2022-06-11T21:03:57.215Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"82d610a52eb918c2","login":"benjamesdavis","name":"Ben Davis","avatar_url":"https://avatars-next.observableusercontent.com/51d9e63ff9a4521509beefa6d4e72ab399da2aa11a16fe4f2764d38b518af68d","tier":null}},{"id":"dcada7c6d8985386","reply_to_id":"245f3e3cb2d41549","content":"When the cells of a commune get separated in two groups (which happens when a small commune is elongated by the process), this makes the points jump back together. The goal is to ensure that a commune is always made of contiguous cells.","create_time":"$D2022-06-11T21:46:48.882Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"e3320a974ed3cbd6","reply_to_id":"245f3e3cb2d41549","content":"Ah yes, I just tested out the commune view with/without that function. So cool.","create_time":"$D2022-06-12T11:59:22.763Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"82d610a52eb918c2","login":"benjamesdavis","name":"Ben Davis","avatar_url":"https://avatars-next.observableusercontent.com/51d9e63ff9a4521509beefa6d4e72ab399da2aa11a16fe4f2764d38b518af68d","tier":null}},{"id":"b1162bb826d50bd3","reply_to_id":null,"content":"I understand that this function accelerates the Lloyd Relaxation somehow...but I don't understand what this code is doing.\n\nTwo things that stump me:\n\n1) What does \"projection\" represent? Why add the recalculated x + y coordinates of the points in:\nca * points[2 * i] + sa * points[2 * i + 1]\n\n2) How does the chordAreaInverse function come into play?\n\nThanks,\nBen","create_time":"$D2022-06-17T20:34:48.730Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"82d610a52eb918c2","login":"benjamesdavis","name":"Ben Davis","avatar_url":"https://avatars-next.observableusercontent.com/51d9e63ff9a4521509beefa6d4e72ab399da2aa11a16fe4f2764d38b518af68d","tier":null}},{"id":"0001f505b99ee6c4","reply_to_id":"b1162bb826d50bd3","content":"As I see it, this is the main algorithm (sliced optimal transport); and Lloyd's relaxation is just coating. For an explanation, you can refer to the following notebook goes through the steps one by one https://observablehq.com/@fil/disc-transport\nI want to write a better explainer with more helper functions, so please continue posting questions :)","create_time":"$D2022-06-17T20:57:34.983Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"f3664cfd7fbf6090","reply_to_id":"b1162bb826d50bd3","content":"Nice! That's great.\n\nSo each iteration of the algo picks a random angle, and then evenly distributes points across the axis of that angle? \n\nSo the first iteration arranges the points in a single line, and then successive iterations proceed to puff the points out from evenly across the disc?","create_time":"$D2022-06-18T10:03:48.752Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"82d610a52eb918c2","login":"benjamesdavis","name":"Ben Davis","avatar_url":"https://avatars-next.observableusercontent.com/51d9e63ff9a4521509beefa6d4e72ab399da2aa11a16fe4f2764d38b518af68d","tier":null}},{"id":"4818863af5af4d57","reply_to_id":"b1162bb826d50bd3","content":"That's about it, yes! Each iteration moves the points in the direction that will make their projections more “evenly distributed” along that axis. So, if the values are projected against the x axis, only the x values will be modified: the y values will stay unchanged—in other words, the points will not be crushed onto the x axis. And we do this gently and along many different axes, to avoid any criss-crossing effects. By “evenly distributed”, we mean that the profile of the distribution will match the expected profile if the points were already in the right place (this is where the inverse chord area function kicks in).","create_time":"$D2022-06-18T13:35:05.382Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"72d02176bd84b233","reply_to_id":"b1162bb826d50bd3","content":"Cool - I get it now. The inverse chord function distributes the points so there are more towards the middle (where the disc is fatter), and fewer towards the ends (where the disc tapers).\n\nPlaying with the code, I also noticed that if you iterate through the axes sequentially (i.e. walk around the circle in an clockwise manner) ,the points to not distribute across the disc. It only works if there is randomisation in the order of the projected axes.","create_time":"$D2022-06-20T20:41:53.928Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"82d610a52eb918c2","login":"benjamesdavis","name":"Ben Davis","avatar_url":"https://avatars-next.observableusercontent.com/51d9e63ff9a4521509beefa6d4e72ab399da2aa11a16fe4f2764d38b518af68d","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":11,"collection":{"id":"958a492ccf138cc7","slug":"30daymapchallenge","title":"#30DayMapChallenge","owner":{"id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto"}},"type":"notebook","body":{"title":"Loir-et-Cher isodémographique","cells":[{"id":922,"value":"# Loir-et-Cher isodémographique\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":372,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":261,"value":"viewof replay = Inputs.button(\"replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1167,"value":"For reference, here’s the corresponding map in a standard projection:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":79,"value":"---\n*Code*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":442,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":613,"value":"codes = points0.map((d) => d.code)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1182,"value":"stroke = (c) => (c === code ? \"white\" : fill(c)) // highlight a commune","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"densityColor = d3\n .scaleSequentialSqrt(d3.interpolateCool)\n .domain(d3.extent(density, ([, v]) => v))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":178,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"projection = d3.geoMercator().fitSize([height, height], geo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"height = Math.min(670, width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":384,"value":"names = new Map(geo.features.map((f) => [f.properties.code, f.properties.nom]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":751,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1277,"value":"*This part of the UI is not super useful, hiding it for now*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"