29:null 2a:["$","title",null,{"children":"Contours from eroded polygon | Florian Ledermann | Observable"}] 2f:T605,{ let projection = d3.geoMercator().fitExtent([[0,0], [resolution,resolution]], district) let time = Date.now() let monochrome = renderGeoToBitmap(district, projection, resolution, resolution) let unantialiased = threshold(monochrome) let eroded = erode(unantialiased, resolution, resolution) // amplify for visual output let amplified = Uint8ClampedArray.from(eroded, val => val * 255 * 4 / resolution) let canvas = DOM.canvas(width,height), context = canvas.getContext("2d") canvas.style.imageRendering = "pixelated" context.imageSmoothingEnabled = false let imgData = new ImageData(monochromeToMultichannel(amplified), resolution, resolution) window.createImageBitmap(imgData,0,0,resolution,resolution).then(bmp => { context.drawImage(bmp,0,0,width,height) let contour = d3.contours() .size([resolution, resolution]) .smooth(false) .contour(eroded, distance); mutable renderTime = Date.now() - time // draw contour let path = d3.geoPath().projection(d3.geoIdentity().scale(width/resolution)) .context(context) context.strokeStyle = '#000000' context.beginPath(); path(contour); context.stroke(); // draw original polygon projection.fitExtent([[0,0], [width,height]], district) path = d3.geoPath().projection(projection) .context(context) context.setLineDash([10,5]) context.beginPath(); path(district); context.stroke(); }) return canvas }30:[] 2d:{"id":"771708a6746456d8","slug":"contours-from-eroded-polygon","title":"Contours from eroded polygon","thumbnail":"b69f74a4e95625c8566a4b565831dde85ae8ec86ef82e189201587ab579041df","access_level":"public","create_time":"$D2018-05-19T15:55:30.632Z","update_time":"$D2018-05-20T08:15:04.455Z","view_time":null,"first_public_time":"$D2018-05-19T17:51:40.856Z","has_unpublished_edits":null,"fork":{"id":"681e26e71bb1af8d","slug":"polygon-erosion-using-a-bitmap-based-approach","title":"Polygon Erosion Using a Bitmap-Based Approach","owner":{"id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann"}},"stars":6,"starred":false,"owner":{"type":"team","id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":"starter_2024"},"version":849,"publish_version":849,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null}],"members":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"7e1078d5396f1f06","slug":"cartographic-experiments","title":"Cartographic Experiments","owner":{"id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann"}},"type":"notebook","body":{"title":"Contours from eroded polygon","cells":[{"id":0,"value":"md`# Contours from eroded polygon`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"md`The polygon is eroded using a [bitmap-based approach](/@floledermann/polygon-erosion-using-a-bitmap-based-approach) and the result is fed into [d3-contour](https://github.com/d3/d3-contour). This approach provides fast calculation of approximate interior polygons with configurable precision and independent of polygon complexity.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"helpers.signature","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"viewof districtOffset = helpers.labeledInput({\n value: 8,\n min: 0,\n max:22,\n label: \"Geometry Index:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"viewof resolution = helpers.labeledSlider({\n value: 60,\n min: 4,\n max: 100,\n label: \"Bitmap resolution:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"viewof distance = helpers.labeledSlider({\n value: 6,\n min: 1,\n max: resolution >> 2,\n label: \"Contour distance:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"html`RenderTime: ${renderTime} ms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"function renderGeoToCanvas(context, geo, projection, fillStyle='#000000') {\n let pathGenerator = d3.geoPath().projection(projection).context(context)\n \n context.save();\n \n context.fillStyle = fillStyle;\n context.beginPath();\n pathGenerator(district)\n context.fill(); \n \n context.restore();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"function renderGeoToBitmap(geo, projection, width, height, fillStyle='#000000') {\n \n let canvas = DOM.canvas(width,height),\n context = canvas.getContext(\"2d\")\n \n renderGeoToCanvas(context, geo, projection)\n \n return imageChannel(context.getImageData(0, 0, width, height).data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"function maxNeighbours(imgData,x,y,width,height) {\n /*\n neighbours = [\n 1,1,1\n 1, 1,\n 1,1,1\n ]\n \n 0 ... outside polygon\n 255 ... inside polygon\n */\n \n let max=-1;\n \n // cylce through 8 neighbours by adding offsets -1..1 to x,y location\n for (let dy=-1; dy<=1; dy++) {\n for (let dx=-1; dx<=1; dx++) {\n // ignore actual pixel\n if (dx == 0 && dy == 0) continue;\n \n let px = x+dx,\n py = y+dy;\n \n // check image boundaries\n if (px<0 || py<0 || px>=width || py>=height) continue;\n \n let val = imgData[py*width + px];\n // 255 is value for \"inside, but not yet processed\", so set to -1 to be ingored/wrapped\n if (val != 255 && val > max) max = val;\n \n }\n }\n // return the maximum of all neighbours, increased by 1\n // interior values will be -1, so will return 0 for an interior point without neighbours\n return max+1;\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"function erode(imgData, width, height) {\n\n // we can't write to the image we read from in the same pass to not disturb the data\n // so create two images\n let imgRead = Uint8ClampedArray.from(imgData)\n let imgWrite = Uint8ClampedArray.from(imgData)\n \n let goOn = true\n \n while (goOn) {\n goOn = false\n for (let y=0; y (d > threshold) ? 255: 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"function imageChannel(imgData, channel=3, numChannels=4) {\n \n console.assert(imgData.length % numChannels == 0, \"Image does not have \" + numChannels + \" channels!\")\n \n let newData = new Uint8Array(imgData.length / numChannels)\n \n for (let i=0; i`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"mutable renderTime = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {viennaTopoJSON as topology} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"presimplified = simplify.presimplify(topology)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof geometryDetail = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"geometryDetail","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"simplified = simplify.simplify(presimplified, simplify.quantile(presimplified, geometryDetail))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"districts = topojson.feature(simplified, simplified.objects.districts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"district = districts.features[districtOffset]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"boundaries = topojson.mesh(simplified, simplified.objects.districts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`#### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3\",\"d3-polygon\",\"d3-contour\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"simplify = require(\"topojson-simplify@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`#### Custom CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {helpers} from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"helpers.defaultCSS","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"