29:null 2a:["$","title",null,{"children":"Arrow Key Navigation Cost Functions | Austin Whittier | Observable"}] 2f:T613,{ const n = 4; const node = html`

${draw( makeElements(wiggle, width / n, height), makeSearchFn((start, end, direction) => distance(start.center, end.center) ), { width: width / n } )}

Raw distance

${draw( makeElements(wiggle, width / n, height), makeSearchFn((start, end, direction) => biasedDistance(start.center, end.center, direction) ), { width: width / n } )}

Direction-biased distance

${draw( makeElements(wiggle, width / n, height), makeSearchFn((start, end, direction) => angularCost(start.center, end.center, direction) ), { width: width / n } )}

Angular distance

${draw( makeElements(wiggle, width / n, height), makeSearchFn((start, end, direction) => compositeCost(start.center, end.center, direction) ), { width: width / n } )}

Composite cost

`; function preventScroll(e) { if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } } node.addEventListener('keydown', preventScroll); invalidation.then(() => node.removeEventListener('keydown', preventScroll)); return node; }30:Ta33,function draw( elements, getElementInDirection, { width: widthOpt = width, height: heightOpt = height } = {} ) { const width = widthOpt; const height = heightOpt; const svg = d3 .create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('display', 'block'); const arrowId = DOM.uid("arrow"); let selectedElement = null; function update() { if (selectedElement) { const highlight = svg.selectAll('.highlight').data([selectedElement]); highlight .enter() .append('circle') .attr('class', 'highlight') .attr('r', 5) .attr('cx', d => d.center.x) .attr('cy', d => d.center.y) .attr('fill', 'red'); highlight .attr('cx', d => d.center.x) .attr('cy', d => d.center.y) .attr('fill', 'red'); } } svg .append("defs") .append("marker") .attr("id", arrowId.id) .attr("markerHeight", 10) .attr("markerWidth", 10) .attr("refX", 5) .attr("refY", 2.5) .attr("orient", "auto") .append("path") .attr("fill", 'black') .attr("d", "M0,0v5l5,-2.5Z"); svg .selectAll('rect') .data(elements) .enter() .append('rect') .attr('stroke', 'black') .attr('fill', 'white') .attr('x', ({ x }) => x) .attr('y', ({ y }) => y) .attr('width', ({ width }) => width) .attr('height', ({ height }) => height) .on('mousedown', d => coordinator.broadcastSelection(d)); const connections = getConnections(elements, getElementInDirection); svg .selectAll('line') .data(connections) .enter() .append('line') .attr('stroke', 'black') .attr('fill', 'none') .attr("marker-end", arrowId) .attr('x1', ({ start }) => start.x) .attr('y1', ({ start }) => start.y) .attr('x2', ({ end }) => end.x) .attr('y2', ({ end }) => end.y); function updateInDirection(e) { if (selectedElement) { const next = getElementInDirection(selectedElement, elements, e.detail); if (next) { selectedElement = next; update(); } } } function updateFromSelection(e) { const el = elements.find(d => d.id === e.detail.id); selectedElement = el; update(); } coordinator.addEventListener('direction', updateInDirection); coordinator.addEventListener('selection', updateFromSelection); invalidation.then(() => { coordinator.removeEventListener('direction', updateInDirection); coordinator.removeEventListener('selection', updateFromSelection); }); return svg.node(); }31:[] 2d:{"id":"c3b469426711a911","slug":"arrow-key-navigation-cost-functions","title":"Arrow Key Navigation Cost Functions","thumbnail":"224ff506e7016dbe0dfa1f55d1f98de7dd7e9c2ba6b0997b252f323c701c16af","access_level":"public","create_time":"$D2020-01-18T19:22:07.265Z","update_time":"$D2020-08-10T19:39:33.750Z","view_time":null,"first_public_time":"$D2020-04-17T22:00:16.381Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d03f0e4f0b69bd97","login":"awhitty","name":"Austin Whittier","avatar_url":"https://avatars-next.observableusercontent.com/8fe94f897411f0ca1a171f84532a98f5670d2a2cdc3d30a918894fdd24db40c0","tier":"starter_2024"},"version":871,"publish_version":871,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a27c1c116e001e2","login":"awhitty","name":"Austin Whittier","avatar_url":"https://avatars-next.observableusercontent.com/8fe94f897411f0ca1a171f84532a98f5670d2a2cdc3d30a918894fdd24db40c0","tier":null}],"members":[{"type":"individual","id":"2a27c1c116e001e2","login":"awhitty","name":"Austin Whittier","avatar_url":"https://avatars-next.observableusercontent.com/8fe94f897411f0ca1a171f84532a98f5670d2a2cdc3d30a918894fdd24db40c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Arrow Key Navigation Cost Functions","cells":[{"id":0,"value":"md`# Arrow Key Navigation Cost Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"md`This is a comparison of a few different methods for navigating between items arranged in a 2D coordinate system using the arrow keys on a keyboard. It's surprisingly tricky to get an intuitive user experience under certain edge cases!\n\n_Note: I did this exploration before learning about the [CSS Spatial Navigation](https://drafts.csswg.org/css-nav-1/) specification, but I intend to revisit my \"Composite cost\" function and compare it to the [function described in the spec](https://drafts.csswg.org/css-nav-1/#propdef-spatial-navigation-function)._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"md`_(Click inside a box, then use arrow keys to navigate)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof wiggle = slider({ min: 0, max: 40, title: '\"Wiggle\" factor' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"viewof factor = slider({ min: 0, max: 100 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"function makeSearchFn(costFn) {\n return function(element, elements, direction) {\n return _(elements)\n .filter(compare => isInDirection(element, compare, direction))\n .minBy(compare => costFn(element, compare, direction));\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function biasedDistance(start, end, direction) {\n if (direction === Direction.UP || direction === Direction.DOWN) {\n return Math.sqrt(\n Math.pow(start.x - end.x, 4) + Math.pow(start.y - end.y, 2)\n );\n } else {\n return Math.sqrt(\n Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 4)\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"draw(\n elements,\n makeSearchFn((start, end, direction) =>\n biasedDistance(start.center, end.center, direction)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"function distance(A, B) {\n return Math.sqrt(Math.pow(A.x - B.x, 2) + Math.pow(A.y - B.y, 2));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"draw(elements, makeSearchFn((start, end) => distance(start.center, end.center)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"function angularCost(A, B, direction) {\n const theta = directionToAngle(direction);\n const idealx = Math.cos(theta);\n const idealy = Math.sin(theta);\n const dx = B.x - A.x;\n const dy = B.y - A.y;\n return Math.abs(\n normalizeAngle(Math.atan2(-dy, dx) - Math.atan2(idealy, idealx))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"function normalizeAngle(theta) {\n if (theta > Math.PI) {\n return theta - 2 * Math.PI;\n } else if (theta <= -Math.PI) {\n return theta + 2 * Math.PI;\n } else {\n return theta;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"draw(\n elements,\n makeSearchFn((start, end, direction) =>\n angularCost(start.center, end.center, direction)\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"function compositeCost(A, B, direction) {\n const angleCost = angularCost(A, B, direction);\n const distanceCost = distance(A, B);\n return angleCost * factor + distanceCost;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"draw(\n elements,\n makeSearchFn((start, end, direction) =>\n compositeCost(start.center, end.center, direction)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"coordinator = {\n const node = html`

`;\n\n function broadcastDirection(direction) {\n node.dispatchEvent(new CustomEvent(\"direction\", { detail: direction }));\n }\n\n function broadcastSelection(id) {\n node.dispatchEvent(new CustomEvent(\"selection\", { detail: id }));\n }\n\n function handleKeyEvent(e) {\n const dir = keyToDirection(e.key);\n if (dir) {\n broadcastDirection(dir);\n }\n }\n\n document.addEventListener('keydown', handleKeyEvent);\n invalidation.then(() => {\n document.removeEventListener('keydown', handleKeyEvent);\n });\n\n return Object.assign(node, {broadcastSelection, broadcastDirection});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function getConnections(elements, getElementInDirection) {\n return elements\n .map(start =>\n directions.map(direction => {\n const end = getElementInDirection(\n start,\n elements.filter(c => c !== start),\n direction\n );\n if (end) {\n return findBestAnchors(start, end, direction);\n } else {\n return null;\n }\n })\n )\n .flat()\n .filter(e => e !== null);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function makeElements(wiggle, width, height) {\n let i = 0;\n const random = d3.randomNormal.source(seedrandom(\"hey what's up\"))(0, 1);\n return d3\n .range(40, width - 40, 60)\n .map(x => {\n return d3.range(40, height - 40, 60).map(y => {\n return {\n ...rect(x + random() * wiggle, y + random() * wiggle, 30, 30),\n id: i++\n };\n });\n })\n .flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"elements = makeElements(wiggle, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"function findBestAnchors(start, end, direction) {\n const startAnchor = anchorInDirection(start, direction);\n const endAnchors = anchorPoints(end);\n const pairings = endAnchors.map(end => ({ start: startAnchor, end }));\n return _.minBy(pairings, ({ start, end }) => distance(start, end));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"function anchorInDirection(rect, direction) {\n if (direction === Direction.UP) {\n return { x: rect.center.x, y: rect.top };\n } else if (direction === Direction.DOWN) {\n return { x: rect.center.x, y: rect.bottom };\n } else if (direction === Direction.LEFT) {\n return { x: rect.left, y: rect.center.y };\n } else if (direction === Direction.RIGHT) {\n return { x: rect.right, y: rect.center.y };\n } else {\n throw new Error('Not a valid direction');\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"function anchorPoints(rect) {\n return [\n { x: rect.center.x, y: rect.top },\n { x: rect.center.x, y: rect.bottom },\n { x: rect.left, y: rect.center.y },\n { x: rect.right, y: rect.center.y }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"function isInDirection(start, end, direction) {\n if (direction === Direction.UP) {\n return end.bottom <= start.top;\n } else if (direction === Direction.DOWN) {\n return end.top >= start.bottom;\n } else if (direction === Direction.LEFT) {\n return end.right <= start.left;\n } else if (direction === Direction.RIGHT) {\n return end.left >= start.right;\n } else {\n return false;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function rect(x, y, width, height) {\n const shape = {\n x,\n y,\n width,\n height,\n top: y,\n left: x,\n bottom: y + height,\n right: x + width\n };\n return { ...shape, center: rectCenter(shape) };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function rectCenter(rect) {\n return {\n x: rect.x + rect.width / 2,\n y: rect.y + rect.height / 2\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"// Returns angle in radians in range [0,2π)\nfunction directionToAngle(direction) {\n switch (direction) {\n case Direction.RIGHT:\n return 0;\n case Direction.UP:\n return Math.PI / 2;\n case Direction.LEFT:\n return Math.PI;\n case Direction.DOWN:\n return (3 * Math.PI) / 2;\n default:\n throw new Error('Not a valid direction');\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"function keyToDirection(key) {\n switch (key) {\n case 'ArrowUp':\n return Direction.UP;\n case 'ArrowDown':\n return Direction.DOWN;\n case 'ArrowLeft':\n return Direction.LEFT;\n case 'ArrowRight':\n return Direction.RIGHT;\n default:\n return null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Direction = ({\n UP: 'up',\n DOWN: 'down',\n LEFT: 'left',\n RIGHT: 'right'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"directions = Object.values(Direction)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"seedrandom = require(\"seedrandom\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"_ = require('lodash@4')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"import { slider } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"