2d:null 2e:["$","title",null,{"children":"GeoDictionary | Tom Kristian Tjemsland | Observable"}] 33:Ta8c,{ const width = 750; const height = 750; let selected = null; const root = d3.create('div') root.append('div') .style('height', '25px') .style('font-weight', 'bold') .text('With GeoDictionary:'); const iterationsNode = root.append('div') .style('height', '25px') .text('Iterations: ---'); const performanceNode = root.append('div') .style('height', '25px') .text('Perfomance: ---'); const entries = []; const dict = new GeoDictionaryViz(); sampleData.forEach(d => { const id = entries.length; dict.add(d.x, d.y, id); // Add key with id entries.push({ id, pos: d, point: null, // Set later }) }); const svg = root.append('svg') .style('width', `${width}px`) .style('height', `${height}px`) .style('border', '2px dotted DimGrey') .on('mouseout', () => { if (selected) { selected.forEach(d => { const v = entries[d]; v.point.attr('fill', 'SteelBlue'); }); selected = null; } }) .on('mousemove', () => { // Unselect previous if (selected) { selected.forEach(d => { const v = entries[d]; v.point.attr('fill', 'SteelBlue'); }); } const mousePos = d3.mouse(d3.event.target); const res = dict.getClosest(1 + (mousePos[0] / 25), 57 + (mousePos[1] / 25)); if(res.targeted) { iterationsNode.text(`Iterations: ${res.iterations}`); performanceNode.text(`Performance: ${Math.round(res.performance * 1000) / 1000} ms`); res.visited.forEach(d => { const v = entries[d]; v.point.attr('fill', 'DarkTurquoise'); }); const target = entries[res.targeted]; target.point .raise() // Ensure that target is on top .attr('fill', 'OrangeRed'); selected = res.visited; } }) // Line function function appendLine(x1, y1, x2, y2, color) { svg.append('line') .attr('x1', x1).attr('y1', y1) .attr('x2', x2).attr('y2', y2) .attr('stroke', color) .attr('pointer-events', 'none'); } // Append grid for (let x = 25; x < width; x+=25) appendLine(x, 0, x, height, 'LightGrey'); for (let y = 25; y < height; y+=25) appendLine(0, y, width, y, 'LightGrey'); // Append sample data entries.forEach(e => { const x = (e.pos.x - 1) * 25; const y = (e.pos.y - 57) * 25; e.point = svg.append('circle') .attr('cx', x) .attr('cy', y) .attr('r', 2.5) .attr('fill', 'SteelBlue') .attr('pointer-events', 'none'); }); return root.node(); }34:T90f,{ const width = 750; const height = 750; let closest = null; let selected = false; const points = []; const root = d3.create('div') root.append('div') .style('height', '25px') .style('font-weight', 'bold') .text('Without GeoDictionary:'); const iterationsNode = root.append('div') .style('height', '25px') .text('Iterations: ---'); const performanceNode = root.append('div') .style('height', '25px') .text('Perfomance: ---'); const svg = root.append('svg') .style('width', `${width}px`) .style('height', `${height}px`) .style('border', '2px dotted DimGrey') .on('mouseout', () => { if (selected) { // Unselect all points.forEach(d => { d.point.attr('fill', 'SteelBlue'); }); selected = false; closest = null; } }) .on('mousemove', () => { // Select all if (!selected) { points.forEach(d => { d.point.attr('fill', 'DarkTurquoise'); }); } else { if (closest) closest.attr('fill', 'DarkTurquoise'); } iterationsNode.text(`Iterations: ${sampleData.length}`); const [x, y] = d3.mouse(d3.event.target); const pos = new Vector2(1 + (x / 25), 57 + (y / 25)); const t0 = performance.now(); let minDist = Infinity; closest = null; points.forEach(d => { const deltaX = d.pos.x - x; const deltaY = d.pos.y - y; const dist = deltaX * deltaX + deltaY * deltaY; if (dist < minDist) { minDist = dist; closest = d.point; } }); const t1 = performance.now(); closest .raise() // Ensure that target is on top .attr('fill', 'OrangeRed'); performanceNode.text(`Performance: ${Math.round((t1 - t0) * 1000) / 1000} ms`); selected = true; }) // Append sample data sampleData.forEach(e => { const x = (e.x - 1) * 25; const y = (e.y - 57) * 25; points.push({ pos: new Vector2(x, y), point: svg.append('circle') .attr('cx', x) .attr('cy', y) .attr('r', 2.5) .attr('fill', 'SteelBlue') .attr('pointer-events', 'none'), }) }); return root.node(); }35:T446,class GeoDictionary { constructor(decimals = 0) { this.resolution = 10 ** decimals; } add(x, y, val) { const key = [Math.floor(x * this.resolution), Math.floor(y * this.resolution)]; const tile = this[key]; // Append to tile if (tile) { tile.push([x, y, val]); } else { this[key] = [[x, y, val]]; } } getClosest(x, y) { const xKey = Math.floor(x * this.resolution); const yKey = Math.floor(y * this.resolution); let minDist = Infinity; let val = null; // Iterate over a 3x3 grid for (let i = xKey - 1; i <= xKey + 1; i++) { for (let j = yKey - 1; j <= yKey + 1; j++) { const tile = this[[i, j]]; // tile if(!tile) continue; // If value not set tile.forEach(t => { const deltaX = t[0] - x; const deltaY = t[1] - y; const dist = deltaX * deltaX + deltaY * deltaY; // Compare squared distance if (dist < minDist) { minDist = dist; val = t[2]; } }); } } return val; } }36:T58d,class GeoDictionaryViz { constructor(decimals = 0) { this.resolution = 10 ** decimals; } add(x, y, val) { const key = [Math.floor(x * this.resolution), Math.floor(y * this.resolution)]; const tile = this[key]; // Append to tile if (tile) { tile.push([x, y, val]); } else { this[key] = [[x, y, val]]; } } getClosest(x, y) { const t0 = performance.now(); const xKey = Math.floor(x * this.resolution); const yKey = Math.floor(y * this.resolution); let minDist = Infinity; let val = null; let iterations = 0; const visited = []; // Iterate over a 3x3 grid for (let i = xKey - 1; i <= xKey + 1; i++) { for (let j = yKey - 1; j <= yKey + 1; j++) { const tile = this[[i, j]]; // tile if(!tile) continue; // If value not set tile.forEach(t => { iterations++; // Add an iteration const deltaX = t[0] - x; const deltaY = t[1] - y; const dist = deltaX * deltaX + deltaY * deltaY; if(dist > 1 * this.resolution) return; visited.push(t[2]); if (dist < minDist) { minDist = dist; val = t[2]; } }); } } const t1 = performance.now(); return { iterations, visited, targeted: val, performance: (t1 - t0), }; } }37:[] 31:{"id":"3ac3fcf0949d3015","slug":"geodictionary","title":"GeoDictionary","thumbnail":"d43fd4e7d6287c2530abe4a97d336efc85ce4865a252ef9b711011e3a2b29e5a","access_level":"public","create_time":"$D2019-08-29T13:02:59.980Z","update_time":"$D2019-09-26T10:17:09.387Z","view_time":null,"first_public_time":"$D2019-08-29T13:29:09.003Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a49ab297471727ef","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":"starter_2024"},"version":481,"publish_version":481,"role":null,"authored":false,"authors":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null}],"members":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"GeoDictionary","cells":[{"id":0,"value":"md`# GeoDictionary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`Generates a dictionary with specified resolution. By default, long-lat pairs, without decimals, are assigned as keys.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`## To import:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"GetClipboardNode(\"import { GeoDictionary } from '@tomktjemsland/geodictionary'\", 'SteelBlue');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`## Example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`Hover over grid to find closest point.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`## Example data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sampleData = {\n const output = [];\n for (let i = 0; i < 10000; i++) {\n output.push(new Vector2(\n 1 + Math.random() * 30,\n 57 + Math.random() * 30,\n ));\n }\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`## Class:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`## Other:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"md`A version of GeoDictionary used to visualize operation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`## Imports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"d3 = require('d3@5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"import { Vector2 } from '@tomktjemsland/vector2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"import { GetClipboardNode } from '@tomktjemsland/copy-to-clipboard'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"