2e:null 2f:["$","title",null,{"children":"d3-hexgrid • London talk | lars | Observable"}] 34:Tb84,viewof compare = { const canvas = DOM.canvas(w, h); const context = canvas.getContext('2d'); const line = 3, r = 3; // 1st Hexagon left. // Draw left hex. context.save(); context.translate(w * 0.25, h * 0.5); context.fillStyle = colourScale(50/compareArea); context.fill(compareHex.hexagon); context.strokeStyle = c.strokeHex; context.stroke(compareHex.hexagon); context.restore(); // Get the left hex' image data alphas and simulate point positions. const imgAlphas = context.getImageData(0,0,w/2,h).data.filter((d,i) => i % 4 === 3); const points = simulatePoints(imgAlphas, 50); // Draw the simulated points onto the left hex. context.fillStyle = '#ddd'; context.strokeStyle = '#777', context.lineWidth = 1; points.forEach(d => { context.beginPath(); context.arc(d[0], d[1], r, 0, 2 * Math.PI); context.fill(), context.stroke(); }); context.globalCompositeOperation = 'destination-over'; // Draw some land over the left hexagon. context.fillStyle = c.fillLandDark; context.fillRect(line, line, compareHex.borderRight+15-line, h-line*2); context.lineWidth = line; context.strokeStyle = c.strokeLand; context.strokeRect(line, line, compareHex.borderRight+15-line, h-line*2); // 2nd hexagon right. // Change `points` on border change. const pointsUpdate = points.map((d,i) => calcPosition(d, i, border)); // Clear the canvas. context.clearRect(w/2, 0, w/2, h/2); // Draw some land over the right hexagon. context.fillStyle = c.fillLandDark; context.fillRect(w/2+line, line, border+15-line, h-line*2); context.lineWidth = line; // context.strokeStyle = 'mediumaquamarine'; context.strokeStyle = c.strokeLand; context.strokeRect(w/2+line, line, border+15-line, h-line*2); context.globalCompositeOperation = 'source-over'; // Draw the right hexagon. context.save(); context.translate(w * 0.75, h * 0.5); context.lineWidth = 1; context.strokeStyle = c.strokeHex; context.stroke(compareHex.hexagon); context.restore(); context.globalCompositeOperation = 'exclusion'; // Draw the right hexagon. context.save(); context.translate(w * 0.75, h * 0.5); context.fillStyle = '#fff'; context.fill(compareHex.hexagon); context.restore(); // Change the dark pixels to heotpink. const imgData = context.getImageData(0,0,w,h); coverCorrect ? changePixelColor(context, imgData, getColourRGB(colourScale(pointDensity))) : changePixelColor(context, imgData, getColourRGB(colourScale(50/compareArea))); context.globalCompositeOperation = 'source-over'; // Draw the updated points on the right canvas. context.fillStyle = '#ddd'; context.strokeStyle = '#777', context.lineWidth = 1; pointsUpdate.forEach(d => { context.beginPath(); context.arc(d[0] + w/2, d[1], r, 0, 2 * Math.PI); context.fill(), context.stroke(); }); canvas.value = imgAlphas.length; return canvas; }35:T43d,{ const canvas = DOM.canvas(w,h); const context = canvas.getContext('2d'); // Prep the context position for the hexagon // to be drawn in the center. context.translate(w/2, h/2); context.scale(scaleFactor, scaleFactor); // Prep the path for drawing on canvas. path.context(context); // Translate the geo into position by the negative position // of the center we keep steady. Then draw the geo. context.translate(-position[0], -position[1]) context.beginPath(); path(us); context.fillStyle = c.fillLandDark; context.fill(); context.lineWidth = 0.1; context.strokeStyle = c.strokeLand; context.stroke(); context.translate(position[0], position[1]); // Define the composite operation to highlight the overlap. // You can try a few. For this colour combination, 'luminosity' wins. context.globalCompositeOperation = 'exclusion'; // Draw the hexagon. context.fillStyle = '#e0e9fb'; context.fill(hexagon); const imgData = context.getImageData(0,0,w,h); changePixelColor(context, imgData, [100, 149, 237]); return canvas; }36:T4b9,viewof cover = { const canvas = DOM.canvas(w, h); const context = canvas.getContext('2d'); // This is concetually the same as the cell // showing the map moving over the hexagon but // streamlined for retreiving the image data. // Prep the context position for the hexagon // to be drawn in the center. context.translate(w/2, h/2); context.scale(scaleFactor, scaleFactor); // Prep the path for drawing on canvas. path.context(context); // Translate the geo into position by the negative position // of the center we keep steady. Then draw the geo w/o transition. context.translate(-edgeCenters[pick][0], -edgeCenters[pick][1]); context.beginPath(); path(us); context.fillStyle = 'red'; context.fill(); context.translate(edgeCenters[pick][0], edgeCenters[pick][1]); // Define the composite operation to highlight the overlap. // For clarity we want `destinaion-atop` here. context.globalCompositeOperation = 'destination-atop'; // Draw the hexagon. context.fillStyle = 'blue'; context.fill(hexagon); const imgData = context.getImageData(0, 0, w, h).data; const coverInfo = getCover(imgData); canvas.value = coverInfo; return canvas; }37:T50f,/** Simulates n random points in an image. @param {Array} imgAlphaData The image data. @param {number} n The desired number of points. @return {Array} The x, y positions for each point. */ function simulatePoints(imgAlphaData, n) { /* Get indeces of the left hexagon's pixel. */ // Get indeces of the image's filed pixel. // Ugly but imageAlphas.map((d,i) => d ? i : d) doesn't work for some reason. let indeces = [] for(let i = 0; i < imgAlphaData.length; i++){ const value = imgAlphaData[i] > 0 ? i : imgAlphaData[i]; indeces.push(value) } // Remove the non-filled pixel. indeces = indeces.filter(d => d); /* Pick cooordinates within the left hexagon. */ // Get 30 random indeces. const testIndeces = d3.range(n).map(d => Math.floor(Math.random()*indeces.length)); // I want to keep the same random indeces when the caller of this cell (above) // updates. This is surprisingly hard, so I'm using the global window here. 😱 window.testies = window.testies || testIndeces; // const points = testIndeces.map(d => [Math.floor(indeces[d] % (w/2)), Math.floor(indeces[d] / (w/2))]) const points = window.testies.map(d => [Math.floor(indeces[d] % (w/2)), Math.floor(indeces[d] / (w/2))]) return points; }38:T446,/** Updates x, y positions based on a moving right border. @param {Array} position Initial [x, y] position. @param {number} index Point index in initial array. @param {number} borderX x position of moving border. @return {Array} Updated [x, y] position. */ function calcPosition(position, index, borderX) { let [x, y] = position; // jitter points when pushed left. const borderXJitter = borderX + index * 0.3; // x smaller than border. if (x < borderXJitter) return [x, y]; // x larger than border and y in center. if (x >= borderXJitter && y > compareHex.r/2 && y < h - compareHex.r/2) { return [borderXJitter, y]; } // x larger than border and y top. if (x >= borderXJitter && y < compareHex.r/2) { return [borderXJitter, y + (x - borderXJitter) * 0.66]; // * } // x larger than border and y bottom. if (x >= borderXJitter && y > h - compareHex.r/2) { return [borderXJitter, y - (x - borderXJitter) * 0.66]; } // * `(x-border)` is a value increasing by 1 from 0. // `⨉ 0.66` flattens the x trajectory. }39:T510,function drawScene(context) { // fill used to be aliceblue. // stroke used to be lightskyblue. // Set the path generator's context. path.context(context); // Draw the map. context.beginPath(); path(us); // context.fillStyle = '#EDFEED'; context.fillStyle = c.fillLand; context.fill(); // context.strokeStyle = 'mediumaquamarine'; context.strokeStyle = c.strokeLand; context.stroke(); // Draw all hexagons. context.beginPath(); context.lineWidth = 0.1; // context.strokeStyle = 'mediumaquamarine'; context.strokeStyle = c.strokeLand; imageCenters.forEach(d => { context.translate(d[0], d[1]); context.stroke(hexagon); context.translate(-d[0], -d[1]); }); // Draw the edge hexagons. context.beginPath(); context.lineWidth = 0.7; // context.strokeStyle = 'hotpink'; context.strokeStyle = c.fillHex; edgeCenters.forEach(d => { context.translate(d[0], d[1]); context.stroke(hexagon); context.translate(-d[0], -d[1]); }); // Draw the hexagon in focus. context.translate(edgeCenters[pick][0], edgeCenters[pick][1]); context.beginPath(); // context.fillStyle = 'hotpink'; context.fillStyle = c.fillHex; context.fill(hexagon); context.translate(-edgeCenters[pick][0], -edgeCenters[pick][1]); }3a:[] 32:{"id":"6d73a07ba2aef0cd","slug":"d3-hexgrid-london-talk","title":"d3-hexgrid • London talk","thumbnail":"99b6b2f90c0347d6f69d19d4d55fd12bcbec959ff48c4c67bec6f76434992b1c","access_level":"public","create_time":"$D2018-09-01T14:26:15.131Z","update_time":"$D2018-09-11T10:27:25.145Z","view_time":null,"first_public_time":"$D2018-09-01T20:17:30.903Z","has_unpublished_edits":null,"fork":{"id":"2e13e99b986ef01c","slug":"hexgrid-maps-with-d3-hexgrid","title":"Hexgrid maps with d3-hexgrid","owner":{"id":"4083a722389d61b6","login":"larsvers","name":"lars"}},"stars":3,"starred":false,"owner":{"type":"team","id":"4083a722389d61b6","login":"larsvers","name":"lars","avatar_url":"https://avatars-next.observableusercontent.com/bdde0b4ed4f7dbe9b2b7f9cfc36e9b140741b3c2375bd59f720d3ee2d4fc68ca","tier":"starter_2024"},"version":2555,"publish_version":2555,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d40fec32b0c8731","login":"larsvers","name":"lars","avatar_url":"https://avatars-next.observableusercontent.com/bdde0b4ed4f7dbe9b2b7f9cfc36e9b140741b3c2375bd59f720d3ee2d4fc68ca","tier":null}],"members":[{"type":"individual","id":"1d40fec32b0c8731","login":"larsvers","name":"lars","avatar_url":"https://avatars-next.observableusercontent.com/bdde0b4ed4f7dbe9b2b7f9cfc36e9b140741b3c2375bd59f720d3ee2d4fc68ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"d3-hexgrid • London talk","cells":[{"id":0,"value":"md`# d3-hexgrid • London talk`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"hexbin = d3.hexbin()\n .extent([[0,0],[w, h]])\n .radius(r)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2270,"value":"md `## Tessellation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"centers = hexbin.centers()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"viewof r = slider({\n min: 4,\n max: 12,\n step: 0.2,\n value: 8,\n title: 'The hex radius'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"{\n const context = DOM.context2d(w, h);\n\n context.beginPath();\n centers.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHex; \n context.fill();\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"{\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext('2d');\n\n path.context(context);\n \n // Draw the US.\n context.beginPath();\n path(us);\n context.fillStyle = c.fillLandDark;\n context.fill();\n \n // Draw the grid.\n context.beginPath();\n centers.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHex; \n context.fill();\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"image = {\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext('2d');\n\n path.context(context);\n context.beginPath(), path(us), context.fillStyle = c.fillHexLight\n context.fill();\n\n // return canvas not context.canvas which will produce \n // the wrong imageData scaled up by the devicePixelRatio\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"imageData = image.getContext('2d').getImageData(0, 0, w, h).data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"imageDataAlpha = imageData.filter((d,i) => i%4 === 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"imageCenters = {\n return centers.filter(d => imageDataAlpha[Math.floor(d[0]) + Math.floor(d[1]) * w]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"{\n const context = DOM.context2d(w, h);\n\n context.beginPath();\n imageCenters.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHex, context.fill();\n\n return context.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"{\n const context = DOM.context2d(w, h);\n\n const canvasHex = new Path2D(hexbin.hexagon());\n context.lineWidth = 1;\n context.strokeStyle = c.fillHex;\n \n imageCenters.forEach(d => {\n context.translate(d[0], d[1]);\n context.stroke(canvasHex);\n context.translate(-d[0], -d[1])\n })\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"egdeChapter = md `## Edge hexagon cover - Why?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2298,"value":"md `#### One inland and one fickle hexagon:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2300,"value":"md `Move the right hexagon out to sea...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"viewof border = {\n return html ``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"{\n const hs = h/6;\n const pr = window.devicePixelRatio || 1;\n const canvas = DOM.canvas(w * pr, hs * pr);\n canvas.setAttribute('style', `width: ${w}px`)\n const context = canvas.getContext('2d');\n context.scale(pr, pr);\n\n const x = scale(pointDensity);\n\n if (show) {\n context.strokeStyle = colScale(pointDensity);\n context.beginPath();\n context.moveTo(0, hs/2);\n context.lineTo(x, hs/2);\n context.closePath();\n context.stroke();\n\n context.beginPath();\n context.arc(x, hs/2, 3, 0, 2 * Math.PI);\n context.fillStyle = colScale(pointDensity);\n context.fill()\n\n const formatNum = d3.format(',.1');\n context.textBaseline = 'middle';\n context.font = '14px sans-serif'\n context.fillStyle = colScale(pointDensity);\n context.fillText(formatNum(pointDensity), x + 10, hs/2)\n context.fillStyle = colScale(pointDensity);\n context.globalAlpha = 0.6\n context.fillText('Point density', x + 57, hs/2)\n }\n \n context.scale(1/pr, 1/pr);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2507,"value":"html `\n

\n ${tex.block`Point~density = \\frac{Number~of~points}{Real~area~in~pixel}`}\n_{\n ${tex.block`Real~area~in~pixel = Hexagon~cover \\times Hexagon~area`}\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"viewof coverCorrect = { \n const form = html`\n \n `\n form.value = form.input.checked;\n\n form.input.addEventListener('click', function() {\n form.value = this.checked;\n });\n\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2430,"value":"viewof show = { \n const form = html`\n \n `\n form.value = form.input.checked;\n\n form.input.addEventListener('click', function() {\n form.value = this.checked;\n d3.selectAll('.density').transition().style('opacity', form.value ? 1 : 0)\n });\n\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2316,"value":"md `## Edge hexagon cover - How?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2319,"value":"md `#### Draw a stroked image`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"imageEdge = {\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext('2d');\n path.context(context);\n\n context.beginPath();\n path(us);\n context.lineWidth = edgeBand\n context.strokeStyle = c.strokeLandLight, context.stroke();\n \n // return canvas not context.canvas which will produce \n // the wrong imageData scaled up by the devicePixelRatio\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"md `#### Get the image data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"imageEdgeDataAlpha = imageEdge.getContext('2d').getImageData(0,0,w,h).data.filter((d,i) => i%4 === 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1839,"value":"md `#### Single out the ${f(edgeCenters.length)} edge hexagons from all ${f(imageCenters.length)} hexagons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"{\n const canvas = DOM.canvas(w,h), context = canvas.getContext('2d');\n path.context(context);\n \n context.beginPath();\n path(us);\n context.lineWidth = edgeBand, context.strokeStyle = c.strokeLandLight, context.stroke();\n\n // All centers.\n context.beginPath();\n imageCenters.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHexLight, context.fill();\n \n // edgeCenters.\n context.beginPath();\n edgeCenters.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHexDark, context.fill();\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1851,"value":"md `_Play with the stroke width to see changes..._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"viewof edgeBand = slider({\n min: r*2,\n max: r*5, \n step: 1, \n value: r*2, \n title: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2554,"value":"md `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"edgeHexes = {\n const pr = window.devicePixelRatio || 1;\n const canvas = DOM.canvas(pr*w,pr*h);\n const context = canvas.getContext('2d');\n canvas.setAttribute('style', `width: ${w}px`);\n\n context.scale(pr,pr);\n \n drawScene(context);\n \n context.scale(1/pr, 1/pr);\n\n d3.select(canvas).call(zoom, pr);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"md `#### Visit ech edge hexagon`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"viewof check = { \n const form = html`\n \n `\n form.value = form.input.checked;\n\n form.input.addEventListener('click', function() {\n form.value = this.checked;\n });\n\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"md `What the algorithm sees:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"md `What the algorithm calculates:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"{\n const formatNum = d3.format(',');\n const formatPct = d3.format('.0%');\n\n const total = formatNum(cover.total);\n const inside = formatNum(cover.inside);\n const outside = formatNum(cover.outside);\n const coverRatio = formatPct(cover.cover);\n \n return md `\n| Measure | Measure |\n|----------------------------------------------------|-----------------------------------------------------|\n| Total filled Pixel | ${total} |\n| Inside Pixel | ${inside} |\n| Outside Pixel | ${outside} |\n| Cover | ${coverRatio} |\n`\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"md `------\n#### General`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"h = Math.round(width/3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"f = d3.format(',.0f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"c = ({\n fillLand: '#f8f8f8',\n fillLandDark: '#eee',\n strokeLand: '#bbb',\n strokeLandLight: '#ddd',\n fillHex: 'cornflowerblue',\n fillHexVeryLight: '#d0dff9',\n fillHexLight: '#a2bff4',\n fillHexDark: '#3c598e',\n strokeHex: '#999'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2407,"value":"md `#### Geo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"us = await d3.json('https://raw.githubusercontent.com/larsvers/map-store/master/us_mainland_geo.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2345,"value":"projection = d3.geoAlbers().fitSize([w,h], us)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"md `#### Edge explanation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"colourScale = d3.scaleLinear()\n .domain([1 / compareArea, 0.023])\n .range(['white', c.fillHex])\n .interpolate(d3.interpolateHcl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"function getColourRGB(stringCol) {\n const c = d3.color(stringCol);\n return [c.r, c.g, c.b];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"compareHex = {\n const hexRadius = h/2.1;\n const hexbin = d3.hexbin().extent([[0,0],[w,h]]).radius(hexRadius);\n const hexagon = new Path2D(hexbin.hexagon());\n const hexWidth = hexRadius * Math.sqrt(3);\n const rightHexBorderRight = Math.floor(w * 0.25 + (hexRadius * Math.sqrt(3))/2);\n const rightHexBorderLeft = Math.floor(w * 0.25 - (hexRadius * Math.sqrt(3))/2);\n return { r: hexRadius, hexagon, borderLeft: rightHexBorderLeft, borderRight: rightHexBorderRight }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"compareArea = 3/2 * Math.sqrt(3) * Math.pow(compareHex.r,2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"compareCover = {\n // const canvas = DOM.canvas(w, h); // debug. Also turn this into a viewof.\n const canvas = document.createElement('canvas');\n canvas.width = w, canvas.height = h;\n const context = canvas.getContext('2d');\n \n \n\n context.fillStyle = 'blue'\n context.fillRect(w/2 + border + 15, 0, width, h);\n \n context.globalCompositeOperation = 'destination-atop'\n\n context.save();\n context.translate(w * 0.75, h / 2) \n context.beginPath();\n context.fillStyle = 'red';\n context.fill(compareHex.hexagon);\n context.restore();\n \n const imgData = context.getImageData(w/2, 0, w/2, h).data;\n\n const coverInfo = getCover(imgData);\n\n // canvas.value = coverInfo.cover;\n // return canvas; // debug\n return coverInfo.cover\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"compareAreaUpdated = compareArea * compareCover","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"pointDensity = 50 / compareAreaUpdated","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"50 * 1/compareCover","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"hexagon = new Path2D(hexbin.hexagon())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"/**\n* Changes the pixel colour of darker pixels to the given colour.\n* @param {Object} context The canvas context.\n* @param {Array} data The imaage data.\n* @param {Array} rgb The desired color as an array.\n* @return {undefined} Changes the canvas pixel in place.\n*/\nfunction changePixelColor(context, data, rgb) {\n const [r,g,b] = rgb;\n const imgData = data.data;\n\n for(let i = 3; i < imgData.length; i+=4) { \n if(imgData[i] > 100) {\n let rOrig = imgData[i-3];\n let gOrig = imgData[i-2];\n let bOrig = imgData[i-1];\n \n if(rOrig + gOrig + bOrig < 200) {\n imgData[i-3] = r;\n imgData[i-2] = g;\n imgData[i-1] = b;\n }\n }\n }\n context.putImageData(data, 0,0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"function getCover(data) {\n // Init area count variables.\n let outside = 0, \n inside = 0;\n\n // Find filled pixel with some alpha \n // (>=100) and identify image part.\n for (var pixelIndex = 3; pixelIndex < data.length; pixelIndex+=4) {\n const alpha = data[pixelIndex];\n if (alpha < 100) {\n continue;\n } else {\n const red = data[pixelIndex-3];\n const blue = data[pixelIndex-1];\n red > blue ? inside++ : outside++;\n } \n }\n\n // Calculate cover and add to edge hexagon.\n const imgRatio = inside / (inside + outside);\n \n return {total: inside + outside, inside: inside, outside: outside, cover: imgRatio};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"scale = d3.scaleLinear().domain([50 / compareArea, 50 / (compareArea * 0.03)]).range([3, w])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"colScale = d3.scaleLinear().domain([50 / compareArea, 50 / (compareArea * 0.03)]).range(['#999', '#000'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"md `#### Edge algo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"scaleFactor = h/r/2.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":" function zoom(el, pixelRatio) {\n\n // Get the context.\n const context = el.node().getContext('2d');\n \n // Build the behaviour and call it on the canvas.\n el.call(d3.zoom().on('zoom', zoomed).scaleExtent([0.5, 5]));\n \n // Zoom handler.\n function zoomed() {\n\n // Grab the transform.\n const t = d3.event.transform;\n\n // Clear the rect on each zoom and save the context state.\n context.clearRect(0, 0, pixelRatio * w, pixelRatio * h);\n context.save();\n\n // Move the copntext's coordinate system into thhe right place.\n context.translate(pixelRatio * t.x, pixelRatio * t.y);\n context.scale(pixelRatio * t.k,pixelRatio * t.k);\n\n // ...well:\n drawScene(context);\n \n // Restore the context to the state before the zoom change, as\n // transforms are always applied from the initial state {0,0,1}.\n context.restore();\n \n } \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"mutable pick = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"viewof dur = slider({\n min: 250,\n max: 2000,\n step: 10,\n value: 750\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"function* time(array, index, duration) {\n const interpol = d3.interpolate(array[index], array[index+1]);\n const ticks = duration * 0.06;\n for(let i = 0; i < ticks; i++) {\n yield interpol(d3.easeExpOut(i/(ticks-1)));\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"position = {\n if(check) {\n for(let i = 0; i < edgeCenters.length-1; i++) {\n mutable pick = i+1;\n yield* time(edgeCenters, i, dur);\n }\n } else {\n yield* time(edgeCenters, mutable pick - 1, dur);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"edgeCenters = imageCenters.filter(d => imageEdgeDataAlpha[Math.floor(d[0]) + Math.floor(d[1]) * w])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"md `#### Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\n 'd3-array',\n 'd3-color',\n 'd3-drag',\n 'd3-ease',\n 'd3-fetch',\n 'd3-format',\n 'd3-geo',\n 'd3-hexbin',\n 'd3-hexgrid',\n 'd3-interpolate',\n 'd3-scale',\n 'd3-scale-chromatic',\n 'd3-selection',\n 'd3-shape',\n 'd3-zoom'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require('topojson@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"import {slider, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"