31:T733,script = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@^5.1.1")}"); onmessage = event => { const {data: {data, width, height, n}} = event; const points = new Float64Array(n * 2); const c = new Float64Array(n * 2); const s = new Float64Array(n); // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { for (let j = 0; j < 30; ++j) { const x = points[i * 2] = Math.floor(Math.random() * width); const y = points[i * 2 + 1] = Math.floor(Math.random() * height); if (Math.random() < data[y * width + x]) break; } } const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); for (let k = 0; k < 80; ++k) { // Compute the weighted centroid for each Voronoi cell. c.fill(0); s.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = data[y * width + x]; i = delaunay.find(x + 0.5, y + 0.5, i); s[i] += w; c[i * 2] += w * (x + 0.5); c[i * 2 + 1] += w * (y + 0.5); } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const w = Math.pow(k + 1, -0.8) * 10; for (let i = 0; i < n; ++i) { const x0 = points[i * 2], y0 = points[i * 2 + 1]; const x1 = s[i] ? c[i * 2] / s[i] : x0, y1 = s[i] ? c[i * 2 + 1] / s[i] : y0; points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() - 0.5) * w; points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() - 0.5) * w; } postMessage(points); voronoi.update(); } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }32:T565,dem = { // DEM comes from Nicolas Lambert, https://nlambert.gitpages.huma-num.fr/resources/datasets/DEM/dem2.csv // See https://observablehq.com/@neocartocnrs/world-elevation-line-map const dem = (await FileAttachment("dem2.csv").csv()).map( ({ lat, lon, elevation }) => ({ lat: Math.round(+lat * 10) / 10, lon: Math.round(+lon * 10) / 10, elevation: Math.max(0, +elevation) }) ); const maxElevation = d3.max(dem, d => d.elevation); const lats = new Map( d3 .groups(dem, d => d.lat) .map(d => d[0]) .sort((a, b) => d3.descending(a, b)) .map((d, i) => [d, i]) ); const lons = new Map( d3 .groups(dem, d => d.lon) .map(d => d[0]) .sort((a, b) => d3.ascending(a, b)) .map((d, i) => [d, i]) ); const width = lons.size; const height = lats.size; const context = DOM.context2d(width, height, 1); const imageData = context.getImageData( 0, 0, context.canvas.width, context.canvas.height ); const data = imageData.data; for (const d of dem) { const i = lons.get(d.lon); const j = lats.get(d.lat); const k = i + j * width; const e = (255 * d.elevation) / maxElevation; data[k * 4 + 0] = e; data[k * 4 + 1] = e; data[k * 4 + 2] = e; data[k * 4 + 3] = 255; } context.putImageData(imageData, 0, 0); return context.canvas; }33:[{"id":"6712a3c745de2ab2cb551410d15cd97d1dbbfe8d2b4ba064deea77f03a554b88d4e6fdc0c1d31b307aee4dd9d5bb1ae2db1fbef4760d84ba9216209eae6cd13d","href":"https://static.observableusercontent.com/files/6712a3c745de2ab2cb551410d15cd97d1dbbfe8d2b4ba064deea77f03a554b88d4e6fdc0c1d31b307aee4dd9d5bb1ae2db1fbef4760d84ba9216209eae6cd13d","name":"dem2.csv","type":"text/csv","lastModified":1619801088275.398,"size":2335677}] 2f:{"title":"Voronoi Stippling on Elevation (DEM)","cells":[{"id":0,"value":"md`# Voronoi Stippling on Elevation (DEM)\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"image = {\n const context = DOM.context2d(width, height);\n const worker = new Worker(script);\n\n function messaged({ data: points }) {\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, width, height);\n context.beginPath();\n for (let i = 0, n = points.length; i < n; i += 2) {\n const x = points[i],\n y = points[i + 1];\n context.moveTo(x + 1.5, y);\n context.arc(x, y, 1, 0, 2 * Math.PI);\n }\n context.fillStyle = \"#000\";\n context.fill();\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({ data, width, height, n });\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = {\n //const image = await FileAttachment(\"obama.png\").image();\n const image = dem;\n const height = Math.round((width * image.height) / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(\n image,\n 0,\n 0,\n image.width,\n image.height,\n 0,\n 0,\n width,\n height\n );\n const { data: rgba } = context.getImageData(0, 0, width, height);\n const data = new Float64Array(width * height);\n // for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, 1 - rgba[i * 4] / 254);\n for (let i = 0, n = rgba.length / 4; i < n; ++i)\n data[i] = Math.max(0, rgba[i * 4] / 254);\n data.width = width;\n data.height = height;\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"n = Math.round(width * height / 40)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = data.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}