2d:null 2e:["$","title",null,{"children":"D3.js Potato Plan | Matt Khinda | Observable"}] 33:T4b0,chart = { const { data, width: rw, height: rh } = image_cleaned; const svg = d3.create("svg") .attr("viewBox", [0, 0, rw, rh]) .attr("width", width > 800 ? "80%" : "100%") .attr("style", "height:auto; display:block; background:#F4F1EA"); for (const code of unique_values) { const mask = Float64Array.from(data, v => (v === code ? 1 : 0)); for (const poly of contours(mask)) { svg.append("path") .attr("d", blobPath(poly)) .attr("fill", nlcdCodetoColor(code)) .attr("stroke", "#F4F1EA") .attr("stroke-width", "0.5") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); } } const roadG = svg.append("g") const roadLine = d3.line().curve(d3.curveBasis); for (const f of roads_clipped.features) { for (const seg of f.geometry.coordinates) { roadG.append("path") .attr("d", roadLine(seg.map(roadProjection))) .attr("fill","none") .attr("stroke", "#525252") .attr("stroke-width", rw/1500) // making strokes a factor of resample size ensures they stay constant across resolutions .attr("stroke-linecap","round"); } } return svg.node(); }34:[{"id":"d15927699281b80c63dd9e09aa11e81594b17adc230cdd6547c2d1cbb4da8c8bd3d592550864a86987206dd733b5c209c0bbb28cb8948627269ae364ad6607e0","href":"https://static.observableusercontent.com/files/d15927699281b80c63dd9e09aa11e81594b17adc230cdd6547c2d1cbb4da8c8bd3d592550864a86987206dd733b5c209c0bbb28cb8948627269ae364ad6607e0","name":"MN_roads.geojson","type":"application/geo+json","lastModified":1779978637778.324,"size":21618967},{"id":"d0b8940ced4c1d9a6439908f96a04ffc775f9de56dc2e36e988d9fb372613451cb9c43f7891b06a438bf01ae32b9ca0b63a21da937bacba4dbaaccc04a5c65ea","href":"https://static.observableusercontent.com/files/d0b8940ced4c1d9a6439908f96a04ffc775f9de56dc2e36e988d9fb372613451cb9c43f7891b06a438bf01ae32b9ca0b63a21da937bacba4dbaaccc04a5c65ea","name":"Minneapolis_NLCD.tif","type":"image/tiff","lastModified":1779972055168.554,"size":11129935}] 31:{"id":"2a2791b111155921","slug":"d3-potato-plan","title":"D3.js Potato Plan","thumbnail":"29e0e3ac22b43d8c2e02b6e422eb071adb14d73c361dfa0567b7eda0bd2ffdfa","access_level":"public","create_time":"$D2026-05-28T12:27:52.570Z","update_time":"$D2026-06-12T22:02:41.994Z","view_time":null,"first_public_time":"$D2026-05-28T15:01:48.386Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"bd1a04fba6aa0b96","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/d3ce820bb0a0da07120f1d18fc5462f4d2dda95075bbb7bd7ac6113a256128dd","tier":"starter_2024"},"version":414,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ed01765dbd656ee","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/381c8bb4edddbcd7e2319cbd390f7477b1b4934289bf039a4e881d2d3711d20e","tier":null}],"members":[{"type":"individual","id":"7ed01765dbd656ee","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/381c8bb4edddbcd7e2319cbd390f7477b1b4934289bf039a4e881d2d3711d20e","tier":null,"role":"editor"},{"type":"team","id":"bd1a04fba6aa0b96","login":"mpkhinda","name":"Matt Khinda","avatar_url":"https://avatars-next.observableusercontent.com/d3ce820bb0a0da07120f1d18fc5462f4d2dda95075bbb7bd7ac6113a256128dd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"1443c7150184135b","slug":"experiments","title":"🔬 Experiments","owner":{"id":"bd1a04fba6aa0b96","login":"mpkhinda","name":"Matt Khinda"}},"type":"notebook","body":{"title":"D3.js Potato Plan","cells":[{"id":0,"value":"# D3.js Potato Plan","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Testing how to create [potato plan-style maps](https://www.joostgrootens.nl/archive/1908_the_potato_plan_collection) in D3.js. Example below is based on [USGS NCLD](https://www.usgs.gov/centers/eros/science/national-land-cover-database) clipped to 100km around the Minneapolis-St.Paul area.\n\n

‼️ _This notebook is very much an experiment, not optimized for performance and not production-ready. Feedback and ideas for improvement are welcome._

🤖 _It was also created with the help of Claude Opus 4.7, but all mistakes are my own._

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"viewof targetRes = Inputs.range([180, 900], {step: 120, value: 540, label: html`Resolution (m)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"legend = {\n const codes = unique_values.filter(c => nlcdCodetoColor(c) !== \"none\");\n const perRow = width>800 ? 5 : 2;\n const colW = 200, rowH = 22, swatch = 16;\n const rows = Math.ceil(codes.length / perRow);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", perRow * colW)\n .attr(\"height\", rows * rowH + 6)\n .attr(\"style\", \"display:block; font:12px sans-serif;\");\n\n const items = svg.selectAll(\"g\")\n .data(codes)\n .join(\"g\")\n .attr(\"transform\", (d, i) =>\n `translate(${(i % perRow) * colW},${6 + Math.floor(i / perRow) * rowH})`);\n\n items.append(\"rect\")\n .attr(\"width\", swatch)\n .attr(\"height\", swatch)\n .attr(\"rx\", 3)\n .attr(\"fill\", d => nlcdCodetoColor(d))\n .attr(\"stroke\", \"#fff\").attr(\"stroke-width\", 0.5);\n\n items.append(\"text\")\n .attr(\"x\", swatch + 6)\n .attr(\"y\", swatch - 3)\n .attr(\"fill\", \"#333\")\n .text(d => nlcdCodetoClass(d));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"#### key variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"unique_values = [...new Set(values)].sort((a, b) => a - b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"values = (await image.readRasters())[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"n = image.getWidth()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"m = image.getHeight()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"scale_factor = Math.max(1, Math.round(targetRes / 30))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"#### helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"contours = d3.contours()\n .size([image_resampled.width, image_resampled.height])\n .smooth(false)\n .thresholds([0.5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"nlcdCodetoColor = function(nlcd_code){\n const map = {\n \"11\": \"#2A2B45\",\n \"21\": \"#E8CFC8\",\n \"22\": \"#E6b7A8\",\n \"23\": \"#E08F79\",\n \"24\": \"#DE7054\",\n \"31\": \"#F4F1EA\",\n \"41\": \"#A4B48C\",\n \"42\": \"#1C6330\",\n \"43\": \"#979B8E\",\n \"52\": \"#CCBA7C\",\n \"71\": \"#DFDFC2\",\n \"81\": \"#F5D37A\",\n \"82\": \"#E0D2CB\",\n \"90\": \"#A1BCCD\",\n \"95\": \"#7CAEAB\"\n };\n return map[nlcd_code] || nlcd_code;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"nlcdCodetoClass = function(nlcd_code){\n const map = {\n \"11\": \"Open Water\",\n \"21\": \"Developed, Open Space\",\n \"22\": \"Developed, Low Intensity\",\n \"23\": \"Developed, Medium Intensity\",\n \"24\": \"Developed, High Intensity\",\n \"31\": \"Barren Land\",\n \"41\": \"Deciduous Forest\",\n \"42\": \"Evergreen Forest\",\n \"43\": \"Mixed Forest\",\n \"52\": \"Shrub/Scrub\",\n \"71\": \"Grassland/Herbaceous\",\n \"81\": \"Pasture/Hay\",\n \"82\": \"Cultivated Crops\",\n \"90\": \"Woody Wetlands\",\n \"95\": \"Herbaceous Wetlands\"\n };\n return map[nlcd_code] || nlcd_code;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"blobPath = {\n const line = d3.line().curve(d3.curveBasisClosed);\n const step = 2; // higher = blobbier\n const minArea = 4; // higher = drop bigger stragglers\n return (poly) =>\n poly.coordinates\n .map(polygon => polygon\n .filter(ring => Math.abs(d3.polygonArea(ring)) >= minArea)\n .map(ring => {\n const pts = ring.filter((_, i) => i % step === 0);\n return pts.length > 2 ? line(pts) : line(ring);\n }).join(\"\"))\n .join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"roadProjection = {\n const [ox, oy] = image.getOrigin();\n const [px, py] = image.getResolution();\n const factor = targetRes / 30;\n return ([X, Y]) => [\n (X - ox) / px / factor,\n (Y - oy) / py / factor\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"#### data structures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"image_cleaned = {\n const { data, width: w, height: h } = image_resampled;\n const out = new Float64Array(w * h);\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const counts = new Map();\n for (let dy = -1; dy <= 1; dy++) {\n for (let dx = -1; dx <= 1; dx++) {\n const nx = x + dx, ny = y + dy;\n if (nx < 0 || ny < 0 || nx >= w || ny >= h) continue;\n const v = data[ny * w + nx];\n counts.set(v, (counts.get(v) || 0) + 1);\n }\n }\n let best = data[y * w + x], bestN = -1;\n for (const [v, c] of counts) if (c > bestN) { best = v; bestN = c; }\n out[y * w + x] = best;\n }\n }\n return { data: out, width: w, height: h };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"image_resampled = {\n const factor = targetRes / 30;\n const dw = Math.ceil(n / factor);\n const dh = Math.ceil(m / factor);\n const out = new Float64Array(dw * dh);\n for (let y = 0; y < dh; y++) {\n for (let x = 0; x < dw; x++) {\n const counts = new Map();\n for (let dy = 0; dy < factor; dy++) {\n for (let dx = 0; dx < factor; dx++) {\n const sx = x * factor + dx, sy = y * factor + dy;\n if (sx >= n || sy >= m) continue;\n const v = values[sy * n + sx];\n counts.set(v, (counts.get(v) || 0) + 1);\n }\n }\n let best = 0, bestN = -1;\n for (const [v, c] of counts) if (c > bestN) { best = v; bestN = c; }\n out[y * dw + x] = best;\n }\n }\n return { data: out, width: dw, height: dh };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"image = tiff.getImage()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"tiff = FileAttachment(\"Minneapolis_NLCD.tif\").arrayBuffer()\n .then(buffer => GeoTIFF.fromArrayBuffer(buffer))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"roads_clipped = {\n const b = raster_bbox;\n const inBox = ([x, y]) => x >= b.xmin && x <= b.xmax && y >= b.ymin && y <= b.ymax;\n const features = [];\n for (const f of roads.features) {\n const kept = f.geometry.coordinates.filter(seg => seg.some(inBox));\n if (kept.length) {\n features.push({\n type: \"Feature\",\n properties: f.properties,\n geometry: { type: \"MultiLineString\", coordinates: kept }\n });\n }\n }\n return { type: \"FeatureCollection\", features };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"raster_bbox = {\n const [ox, oy] = image.getOrigin();\n const [px, py] = image.getResolution();\n return {\n xmin: ox, xmax: ox + px * n,\n ymax: oy, ymin: oy + py * m // py negative, so this is the bottom\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"roads = FileAttachment(\"MN_roads.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"GeoTIFF = require(\"geotiff@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"### Sources:\n[National Land Cover Database](https://www.usgs.gov/centers/eros/science/national-land-cover-database) from the United States Geological Service. [TIGER/Line Roads](https://www.census.gov/geographies/mapping-files/time-series/geo/tiger-line-file.html) from the United States Census Bureau.\n\n*All data retrieved 05/28/2026*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"