31:T807,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, width / 1.9]) .attr("font-family", "sans-serif"); svg .append("rect") .attr("width", width) .attr("height", width / 1.9) .attr("fill", "white"); // svg // .append("path") // .datum(topojson.feature(nederland, nederland.objects.provincie_2022)) // .attr("fill", "none") // .attr("stroke", "hsl(0deg 0% 50%)") // .attr("d", path); // svg // .append("path") // .datum(testLine) // .attr("fill", "none") // .attr("stroke", "hsl(0deg 0% 10%)") // .attr("d", path); svg .append("path") .datum(buitengrenzen) .attr("fill", "none") .attr("stroke", "hsl(0deg 0% 70%)") .attr("visibility", showBorders ? "visible" : "hidden") .attr("stroke-linejoin", "round") .attr("d", path); // svg // .append("g") // .append("path") // .datum(buffered) // .attr("fill", "none") // .attr("stroke", "hsl(0deg 0% 90%") // .attr("stroke-linejoin", "round") // .attr("d", path); const labels = svg .append("g") .attr("font-size", fontSize) .attr("fill", "hsl(0deg 0% 30% / 80%)") .attr("id", "labels") .attr("dominant-baseline", "middle") .selectAll("text") .data(centroids) .join("text") .attr("data-gemeente", (d) => d.gemeente) .attr("text-anchor", "middle") .attr("x", (d) => d.x) .attr("y", (d) => d.y) .text((d) => d.name) .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 1) .attr("stroke", "ghostwhite"); svg .append("g") .attr("id", "rects") .attr("visibility", showTextRects ? "visible" : "hidden") .attr("fill", "transparent") .attr("stroke", "hsl(0deg 0% 60% / 40%)") .selectAll("rect") .data(centroids) .join("rect") .attr("x", (d) => d.x - d.width / 2) .attr("y", (d) => d.y - fontSize / 2) .attr("width", (d) => d.width) .attr("height", (d) => d.height) .text((d) => d.name); return svg.node(); }32:T10a2,mergeCustom = (buurten) => { const otherMerges = [ { name: "Milsbeek", buurten: ["Bloemenstraat-Zwarteweg"] }, { name: "Reusel", buurten: ["De Voort en Achterste Heikant"] }, { name: "Ter Apel", buurten: ["Munnekemoer", "Ter Apel"] }, { name: "Zwartemeer", buurten: ["Kamerlingswijk", "Zwartemeer"] }, { name: "Schoonebeek", buurten: ["Oosterse Bos en Middendorp"] }, { name: "Ottersum", buurten: ["Looierheide"] }, { name: "Heijen", buurten: ["Diekendaal-Nieuwerf", "Heijensebos"] }, { name: "Meerssen", buurten: ["Hulsen-Oostbroek"] }, { name: "Monnickendam", buurten: [ "Buitengouw", "Oranjewijk", "Markgouw", "Binnen", "'t Spil", "Monnickendam", "Ooster Ee", "Ringshemmen", "Binnengouw" ] }, { name: "Petten", buurten: ["Petten", "Petten-Centrum en Korfwater", "Nolmerban"] }, { name: "Willemstad", buurten: ["Noordlangeweg", "Willemstad", "Kloosterblokje"] }, { name: "Delfzijl", buurten: [ "Zandplatenbuurt", "Scheepvaartbuurt", "Over de Gracht", "Kwelderland", "Vestingbuurt", "Steenbakkersbuurt", "Oosterveld", "Bornholm", "Schrijversbuurt", // "Farmsum" "Landenbuurt", "Centrum-Delfzijl", "Polarisbuurt", "Doklanden", "Oosterhorn" ] }, { name: "Renesse", buurten: ["Hoogenboomlaan", "Renesse"] }, { name: "Naarden", buurten: [ "Naarden Vesting", "Componistenkwartier", "Naarderwoonbos", "Oranje Nassaupark-Zuid", "Tuindorp Keverdijk" ] }, { name: "Muiden", buurten: ["Mariahoeve Muiden", "Muiden", "Vesting Muiden", "Krijgsman"] }, { name: "Monster", buurten: [ "Grote Geest en Molenwijk", "Kleine Geest en Molenwijk", "Monster Centrumgebied", "Westerhonk", "Zwartenhoek", "Polanen", "Westlandse Zoom De Duinen" ] }, { name: "Bunde", buurten: ["Bunde", "Hussenberg met Snijdersberg"] }, { name: "Sittard", buurten: [ "Kollenberg-Park Leyenbroek", "Overhoven", "Kemperkoul", "Limbrichterveld", "Baandert", "Vrangendael", "Stadbroek", "Broeksittard" ] }, { name: "Zierikzee", buurten: ["Zierikzee", "Poortambacht", "Zierikzee binnen de vesten"] }, { name: "Kloosterzande", buurten: ["Zandewijk", "Groenendijk"] }, { name: "Clinge", buurten: ["Goukensberg"] }, { name: "Simpelveld", buurten: ["Molsberg-Rodeput"] }, { name: "Stein", buurten: [ "Nieuwdorp", "Centrum", "Oud-Stein", "Kerensheide", "Veldschuur" ] }, { name: "Bergen", buurten: ["Zuid I en II", "Bergen", "Buitengebied Bergen"] }, { name: "Bovenkarspel", buurten: [ "Bovenkarspel", "Oud Bovenkarpel", "Zuidervoert", "Kloosterhof Monniksveld", "Plan Zuid", "Broekerhaven", "Oostersluis" ] }, { name: "'s-Gravenzande", buurten: ["centrumgebied 's-Gravenzande", "Vreeburgh"] }, { name: "Landgraaf", buurten: ["Namiddagsche Driessen", "Groenstraat"] } ]; const add = otherMerges.map((mergeDesc) => { const mergeThese = mergeDesc.buurten; const matches = buurten.filter((d) => mergeThese.includes(d.properties.buurt) ); if (!matches.length) { return []; } const merged = turf.combine({ type: "FeatureCollection", features: matches }); let { gemeente } = merged.features[0].properties.collectedProperties[0]; const inwoners = sumCombinedInwoners(merged.features); merged.features[0].properties = { inwoners, buurt: mergeDesc.name, gemeente }; return merged.features; }); const remove = otherMerges.map((mergeDesc) => mergeDesc.buurten).flat(); return [ ...buurten.filter((d) => !remove.includes(d.properties.buurt)), ...add.flat() ]; }33:T574,// https://observablehq.com/@neocartocnrs/rectangle-cartogram function forceCollide() { let nodes; let padding = 0.45; function force(alpha) { const quad = d3.quadtree( nodes, (d) => d.x, (d) => d.y ); for (const d of nodes) { console.log("node", d); quad.visit((q, x1, y1, x2, y2) => { let updated = false; if (q.data && q.data !== d) { console.log(d.width); let x = d.x - q.data.x, y = d.y - q.data.y, xSpacing = padding + (q.data.width + d.width) / 2, ySpacing = padding + (q.data.height + d.height) / 2, absX = Math.abs(x), absY = Math.abs(y), l, lx, ly; if (absX < xSpacing && absY < ySpacing) { l = Math.sqrt(x * x + y * y); lx = (absX - xSpacing) / l; ly = (absY - ySpacing) / l; // the one that's barely within the bounds probably triggered the collision if (Math.abs(lx) > Math.abs(ly)) { lx = 0; } else { ly = 0; } d.x -= x *= lx; d.y -= y *= ly; q.data.x += x; q.data.y += y; updated = true; } } return updated; }); } } force.initialize = (_) => (nodes = _); return force; }34:T523,mergeBuurten = (buurten) => { const buurtenToMerge = [ "Cadzand", "Rilland", "Elburg", "Urmond", "Dinxperlo", "Schoorl", "Budel", "Ouddorp", "Millingen", // "Muiden", "Muiderberg", "Hippolytushoef", "Egmond", "Yerseke", "Lemmer", "Hansweert", "Krabbendijke", "Schoonebeek", "Bovenkarspel", "Grootebroek", "Termunten", "Kamperland", "Middelharnis", "Edam", "Volendam", "Stellendam", "Oude-Tonge", "Kruiningen", "Stevensweert", "Ulft", "'s-Heerenberg" ]; const mergedBuurten = buurtenToMerge.map((name) => { const matches = buurten.filter((d) => d.properties.buurt.includes(name)); if (!matches.length) return []; const merged = turf.combine({ type: "FeatureCollection", features: matches }); const { gemeente } = merged.features[0].properties.collectedProperties[0]; const inwoners = sumCombinedInwoners(merged.features); merged.features[0].properties = { inwoners, buurt: name, gemeente }; return merged.features; }); const removed = buurten.filter( (d) => !buurtenToMerge.some((e) => { return d.properties.buurt.includes(e); }) ); return [...removed, ...mergedBuurten.flat()]; }35:T665,mergeGemeentes = (buurten) => { // so CBS doesn't really define settlements in the traditional way of city, town, village, it only knows 'wijken' and 'buurten'. These are pretty arbitrary. Some towns are one 'buurt' while larges cities are split into many buurten. const gemeentesToMerge = [ "Lelystad", "Hoorn", "Maastricht", "Huizen", "Almere", "Diemen", "Wassenaar", "Rotterdam", "Velsen", "Goes", "Eemnes", "Venlo", "Amsterdam", "Den Helder", "'s-Gravenhage", "Kerkrade", "Katwijk", "Vlissingen", "Medemblik", "Zeewolde", "Noordwijk", "Harderwijk", "Harlingen", "Enkhuizen", "Coevorden", "Brunssum", "Echt-Susteren", // hmm "Zandvoort", "Urk", "Enschede", "Terneuzen", // hmmm "Hellevoetsluis", // ??? "Bunschoten" // hmm ]; const byGemeente = d3.group(borderBuurten, (d) => d.properties.gemeente); for (const gemeente of gemeentesToMerge) { const mergeBuurten = byGemeente.get(gemeente); // if (!mergeBuurten) { // mutable debug = { gemeente, b: byGemeente.get(gemeente) }; // break; // } const merged = turf.combine({ type: "FeatureCollection", features: mergeBuurten }); const inwoners = sumCombinedInwoners(merged.features); const gemeenteNaam = merged.features[0].properties.collectedProperties[0].gemeente; merged.features[0].properties = { inwoners, buurt: gemeenteNaam, gemeente: gemeenteNaam }; byGemeente.set(gemeente, merged.features); } return [...byGemeente.values()].flat(); }36:[{"id":"ea36132b0d1246c82974f9093f9b106580c1ad68a6ce3e47deeb4921473e0199495b7f496b37f0ef04d54c167493c7e0927e5c65ee139cc558016c3d7e867f7f","href":"https://static.observableusercontent.com/files/ea36132b0d1246c82974f9093f9b106580c1ad68a6ce3e47deeb4921473e0199495b7f496b37f0ef04d54c167493c7e0927e5c65ee139cc558016c3d7e867f7f","name":"buurt_2022_simplified_clean.json","type":"application/json","lastModified":1673990650100.232,"size":6186937},{"id":"03c62d04ff966521d0f1b73ad436de59a7f826c0acfadca4a13e2cecc9bc3f7a6ba9fc0e8863e66b5c16454c1095cbf09902b8d9ad070b776f2c46f5dc80bdd7","href":"https://static.observableusercontent.com/files/03c62d04ff966521d0f1b73ad436de59a7f826c0acfadca4a13e2cecc9bc3f7a6ba9fc0e8863e66b5c16454c1095cbf09902b8d9ad070b776f2c46f5dc80bdd7","name":"provincie_2022.topojson","type":"application/octet-stream","lastModified":1673981030754.381,"size":15148},{"id":"486e8814267b7280c2bf30696755e9b3adad9a7b2288a16905dc9008fe3a4964c37109e5db02dc28533ad816d97e78ac36dc3279335f8033b2a9d99326830995","href":"https://static.observableusercontent.com/files/486e8814267b7280c2bf30696755e9b3adad9a7b2288a16905dc9008fe3a4964c37109e5db02dc28533ad816d97e78ac36dc3279335f8033b2a9d99326830995","name":"mergedBorderBuurten.json","type":"application/json","lastModified":1674176241824.181,"size":721312}] 2f:{"title":"Dutch Coastal & Border Towns / Nederlandse Kust– & Grensplaatsen","cells":[{"id":0,"value":"# Dutch Coastal & Border Towns / Nederlandse Kust– & Grensplaatsen\n\nAll Dutch ‘settlements’ that are within ${distanceKm} km of the border or the coast. It shows the outline of the country fairly well!\n\n

Further Ideas

\n\n

All labels within or outside country? Change `text-align` depending on closest border
Make labels a `` on the closest part of the border/coast

\n\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1123,"value":"viewof showBorders = Inputs.toggle({\n label: \"Show outline (borders & coast)\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"viewof showTextRects = Inputs.toggle({\n label: \"Show text bounding boxes\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"html`

Note, changing the following values may be slow

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"viewof inhabitants = Inputs.range([20, 10000], {\n value: 100,\n label: \"Min. Inhabitants\",\n step: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"viewof rural = Inputs.toggle({ label: \"Include Rural areas\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"viewof fontSize = Inputs.range([4, 10], {\n label: \"Label font size (Slow ⚠️)\",\n value: 6,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"## Inspiration & Credits\n\n* Peter Gorman's (@barelymaps) [West Coast map](https://twitter.com/barelymaps/status/1615676752411463680)\n* [II: Drawing waterlines on maps](https://observablehq.com/@oliviafvane/ii-drawing-waterlines-on-maps?collection=@oliviafvane/watermarks) by Olivia Vane\n* [Automated label placement](https://observablehq.com/@fil/automated-label-placement-france) by Fil\n* [Rectangle Cartogram](https://observablehq.com/@neocartocnrs/rectangle-cartogram) by neocarto\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1540,"value":"## Data\n\nAll data from the [Wijk- & Buurt kaart](https://www.cbs.nl/nl-nl/dossier/nederland-regionaal/geografische-data/wijk-en-buurtkaart-2022) from CBS.\n\nSo the Dutch Bureau of Statistics, CBS, doesn't really define settlements in the traditional way like city, town, village, hamlet. It only knows 'wijken' and 'buurten', which are pretty arbitrary. Some towns are one 'buurt' while larges cities are split into many buurten and sometimes small towns are split into many buurten too.\n\nThat made it really tedious. There probably is a better, more efficient way.\n","pinned":false,"hidden":false,"mode":"md"},{"id":569,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"// https://observablehq.com/@fil/automated-label-placement-cities\nfunction moveLabels(cities, projection) {\n const force = d3\n .forceSimulation()\n .force(\n \"x\",\n d3.forceX((d) => d.x)\n )\n .force(\n \"y\",\n d3.forceY((d) => d.y)\n )\n .force(\"collide\", forceCollide())\n .nodes(cities)\n .stop()\n .tick(35);\n\n return cities;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"font = \"sans-serif\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"// https://observablehq.com/@fil/automated-label-placement-cities\ntextMeasure = {\n const w = new Map();\n const ctx = DOM.context2d(1, 1);\n\n ctx.font = `${fontSize}px sans-serif`;\n\n return function textMeasure(text) {\n if (!w.has(text)) {\n const ms = ctx.measureText(text);\n\n w.set(text, {\n width: ms.width + 3,\n height: Number(fontSize)\n });\n }\n return w.get(text);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"projection = d3\n .geoEqualEarth()\n .fitSize(\n [width, width / 2],\n topojson.feature(nederland, nederland.objects.provincie_2022)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"centroids = moveLabels(\n filteredBorderBuurten.map((d) => {\n const centroid = turf.centroid(d);\n\n let { buurt, gemeente } = d.properties;\n\n const [x, y] = projection(centroid.geometry.coordinates);\n\n buurt = removePreAndSuffix(buurt);\n\n return { x, y, name: buurt, gemeente, ...textMeasure(buurt) };\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"sumCombinedInwoners = (features) =>\n d3.sum(features, (d) =>\n d3.sum(d.properties.collectedProperties, (d) => d.inwoners)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"renameBuurten = (buurten) => {\n const toRename = new Map([\n [\"Schoorl met Bregtdorp\", \"Schoorl\"],\n [\"Sportlaan\", \"Bergen\"],\n [\"Martin Giessen-Bosstraat\", \"Swalmen\"],\n [\"Bunschoten\", \"Bunschoten-Spakenburg\"],\n [\"Blaricummermeent\", \"Blaricum\"],\n [\"Havenbuurt en Kerkbuurt\", \"Marken\"],\n [\"Princenhof Grootebroek\", \"Grootebroek\"],\n [\"Slagterslaan\", \"Berkhout\"],\n [\"Polderken\", \"Sint Jansteen\"],\n [\"Losser-Oost\", \"Losser\"],\n [\"Groot-Doenrade\", \"Doenrade\"],\n [\"Agobuurt\", \"Ter Apel\"]\n ]);\n\n const renamed = buurten.map((d) => {\n const { buurt } = d.properties;\n\n if (toRename.has(buurt)) {\n const copy = { ...d };\n copy.properties.buurt = toRename.get(buurt);\n return copy;\n }\n return d;\n });\n\n return renamed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"borderBuurten = buurt.features\n .filter((d) => d.geometry)\n .filter((d) => turf.booleanIntersects(buffered, d))\n .filter((d) => turf.booleanIntersects(buffered, d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"removePreAndSuffix = {\n const suffixes = [\n \" Kern\",\n \" kern\",\n \" (woonkern)\",\n \" (Woonkern\",\n \" Woonkern\",\n \" woonkern\",\n \"-Centrum\",\n \"en omgeving\"\n ];\n\n const prefixes = [\"Kern \"];\n\n const removePreAndSuffix = (buurt) => {\n for (const suffix of suffixes) {\n if (buurt.endsWith(suffix)) {\n return buurt.split(suffix)[0];\n }\n }\n for (const prefix of prefixes) {\n if (buurt.startsWith(prefix)) {\n return buurt.split(prefix)[1];\n }\n }\n\n return buurt;\n };\n\n return removePreAndSuffix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"filterBorderBuurten = (buurten) =>\n buurten\n .filter((d) => d.properties.inwoners > inhabitants)\n .filter((d) => {\n const { buurt } = d.properties;\n return rural\n ? true\n : !ruralNames.some((n) =>\n d.properties.buurt.toLowerCase().includes(n.toLowerCase())\n );\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"ruralNames = [\n \"Landelijk gebied\",\n \"Verspreide\",\n \"Buitengebied\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"filteredBorderBuurten = renameBuurten(filterBorderBuurten(mergedBorderBuurten))","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"// mergedBorderBuurten = mergeCustom(mergeBuurten(mergeGemeentes(borderBuurten)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"// to speed things up a bit\nmergedBorderBuurten = FileAttachment(\"mergedBorderBuurten.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1568,"value":"distanceKm = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":1039,"value":"function createBuffer({ geojson, distance }) {\n function buffer(geojson, distance) {\n return turf.rewind(turf.buffer(geojson, distance), { reverse: true });\n }\n\n const buffered = buffer(geojson, distance);\n\n return buffered;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1044,"value":"// https://observablehq.com/@oliviafvane/ii-drawing-waterlines-on-maps?collection=@oliviafvane/watermarks\nfunction createBufferedPolygons({ geojson, total, distance, spacingChange }) {\n // Use turf.rewind to make sure that the geojson winding direction is correct for d3 (or else polygons can be inverted into holes) - more on this https://bl.ocks.org/mbostock/a7bdfeb041e850799a8d3dce4d8c50c8\n function buffer(geojson, distance) {\n console.log({ turf });\n return turf.rewind(turf.buffer(geojson, distance), { reverse: true });\n }\n\n const buffered_polygons = [];\n const expScale = d3\n .scalePow()\n .exponent(spacingChange)\n .domain([0, total - 1])\n .range([0, distance]);\n\n for (let i = 0; i < total; i++) {\n let new_polygon = buffer(geojson, expScale(i));\n buffered_polygons.push(new_polygon);\n }\n return buffered_polygons;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"buffered = Generators.observe(\n worker(\n createBuffer,\n { geojson: buitengrenzen, distance: distanceKm },\n `importScripts(${await require\n .resolve(\"@turf/turf\")\n .then(JSON.stringify)}, ${await require\n .resolve(\"d3@7\")\n .then(JSON.stringify)});`\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"buitengrenzen = topojson.mesh(nederland, nederland.objects.provincie_2022, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"buurt = FileAttachment(\"buurt_2022_simplified_clean.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"nederland = FileAttachment(\"provincie_2022.topojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1003,"value":"import { worker } from \"@fil/worker\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}