45:["$","title",null,{"children":"Dragology state diagram | Toph Tucker | Observable"}] 4d:Tad6,const stateDiagram = (() => { const {n, perms, pos, edges, W} = stateGraph; const key = (s) => s?.items?.join("") ?? null; const reachable = new Set(withItem.map(key)); const startKey = key(state); const dragged = item; const hoverKey = key(dragState?.state ?? dragState); const currentKey = hoverKey ?? key(dropState?.state ?? dropState) ?? startKey; const T = 13, G = 2, P = 3, NW = n * T + (n - 1) * G + 2 * P, NH = T + 2 * P; const tileOrigin = (i) => P + i * (T + G); const tint = (c) => d3.interpolateRgb("white", c)(0.2); const choose = (p) => { const s = {items: [...p]}; setState(s); setDropState(s); setDragState(null); setIndex(0); setStartOverride(s); }; const node = (p) => { const {x, y} = pos.get(p); const isReach = reachable.has(p), isCur = p === currentKey; return svg` choose(p)}> ${[...p].map((c, i) => { const held = isReach && c === dragged; const tf = `translate(${tileOrigin(i)},${P}) ` + (held ? `translate(1,-5) rotate(10 ${T / 2} ${T / 2})` : ""); return svg` ${held ? svg`` : null} ${c} `; })} `; }; const cur = pos.get(currentKey); const cursor = (() => { if (!cur) return null; const i = [...currentKey].indexOf(dragged); const tx = cur.x - NW / 2 + tileOrigin(i) + 1 + T / 2; const ty = cur.y - NH / 2 + P - 5 + T / 2; return svg` `; })(); return display(svg``); })();4e:T43a,const stateGraph = (() => { const labels = initialState.items; const n = labels.length; // Steinhaus–Johnson–Trotter order: ring neighbors differ by one adjacent swap const sjt = (items) => { if (items.length === 1) return [items]; const last = items[items.length - 1]; const rest = items.slice(0, -1); return sjt(rest).flatMap((p, i) => { const slots = d3.range(p.length + 1); if (i % 2) slots.reverse(); return slots.map((k) => [...p.slice(0, k), last, ...p.slice(k)]); }); }; const perms = sjt(labels).map((p) => p.join("")); const R = Math.max(280, perms.length * 11.7), W = 2 * R + 120; const pos = new Map(perms.map((p, i) => { const a = (i / perms.length) * 2 * Math.PI - Math.PI / 2; return [p, {x: W / 2 + R * Math.cos(a), y: W / 2 + R * Math.sin(a), a}]; })); const edges = []; for (const p of perms) for (let i = 0; i < n - 1; i++) { const q = [...p]; [q[i], q[i + 1]] = [q[i + 1], q[i]]; const s = q.join(""); if (p < s) edges.push([p, s]); } return {n, perms, pos, edges, W}; })();4f:[] 49:{"id":"3002f56730b60c47","slug":"dragology-state-diagram","title":"Dragology state diagram","thumbnail":"26b32b9239bda424703b543b7e0d557ff9f123341fd75642e94ef66320988d60","access_level":"public","create_time":"$D2026-11-04T21:37:23.983Z","update_time":"$D2026-11-04T22:49:40.598Z","view_time":null,"first_public_time":"$D2026-11-04T22:50:23.466Z","has_unpublished_edits":null,"fork":{"id":"26f47ed26f703856","slug":"hello-dragology","title":"Hello, Dragology","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"stars":3,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false},"version":1497,"publish_version":1497,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"bio":"Learned D3 at Businessweek, started using Observable to do my job at Kensho, took time off to write notebooks about Mayans and Galton, moved to San Francisco to work for Observable. Now work for it remotely from the Berkshires where my wife runs Avaloch.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dragology state diagram","cells":[{"id":1,"value":"# Dragology state diagram\nYesterday I [explored the new Dragology library](https://observablehq.com/@tophtucker/hello-dragology). The big point for me was that it works by enumerating reachable states and then picking the one closest to the mouse. That made me want to see the state diagram.\n\nBelow, there’s an interactive widget where you can drag and drop the letters A, B, C, and D. Below that is its state diagram. The current state is highlighted green; the states you can reach by dragging the current letter are highlighted blue; possible state transitions are drawn as lines. Click a state to jump to it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"mountDraggable({draggable: draggableList, initialState: startOverride ?? initialState, width, height: ROW_HEIGHT}, invalidation)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"$4d","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"You can change the items in `initialState` to see different state diagrams. Click **Tinker** in the upper right of the notebook and then edit this cell:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"const initialState = {items: [\"A\", \"B\", \"C\", \"D\"]};","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"---\n## Appendix\nYesterday’s [exploration](https://observablehq.com/@tophtucker/hello-dragology) was slow and largely done by hand; this graphic is entirely vibecoded.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import React from \"npm:react@19.2.5\";\nimport * as ReactDOMClient from \"npm:react-dom@19.2.5/client\";\nimport htm from \"npm:htm\";\nimport * as immer from \"npm:immer\";\nimport * as dragology from \"npm:dragology\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"const jsx = htm.bind(React.createElement);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"const TILE_SIZE = 50;\nconst TILE_GAP = 8;\nconst ROW_PADDING = 8;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"const ROW_HEIGHT = TILE_SIZE + ROW_PADDING * 2;\nconst tileX = (idx) => ROW_PADDING + idx * (TILE_SIZE + TILE_GAP);\nconst rowWidth = (n) => tileX(n) - TILE_GAP + ROW_PADDING;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function makeOnDragItem(state, drag, itemIdx) {\n return () => {\n setIndex(itemIdx);\n setState(state);\n const item = state.items[itemIdx];\n\n const without = immer.produce(state, (draft) => {\n draft.items.splice(itemIdx, 1);\n });\n\n const withItem = dragology.produceAmb(without, (draft) => {\n const newIdx = dragology.amb(d3.range(draft.items.length + 1));\n draft.items.splice(newIdx, 0, item);\n });\n\n return drag.closest(withItem).withFloating();\n };\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function mountDraggable({draggable, initialState, width, height}, invalidation) {\n const container = document.createElement(\"div\");\n const root = ReactDOMClient.createRoot(container);\n root.render(jsx`<${dragology.DraggableRenderer}\n draggable=${draggable}\n initialState=${initialState}\n width=${width}\n height=${height}\n onDropState=${setDropState}\n onDragState=${setDragState}\n />`);\n invalidation.then(() => root.unmount());\n return container;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const draggableList = ({state, d: drag}) => jsx`\n \n ${state.items.map(\n (item, itemIdx) => jsx`\n \n ${item}\n `\n )}\n`;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"const index = Mutable(0);\nconst setIndex = (n) => index.value = n;\n\nconst state = Mutable(initialState);\nconst setState = (s) => state.value = s;\n\nconst dropState = Mutable(null);\nconst setDropState = (n) => dropState.value = n;\n\nconst dragState = Mutable(null);\nconst setDragState = (n) => dragState.value = n;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"const startOverride = Mutable(null);\nconst setStartOverride = (s) => startOverride.value = s;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"const item = state.items[index];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"const without = immer.produce(state, (draft) => {\n draft.items.splice(index, 1);\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"const withItem = dragology.produceAmb(without, (draft) => {\n const newIdx = dragology.amb(d3.range(draft.items.length + 1));\n draft.items.splice(newIdx, 0, item);\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$4e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"2"}} 44:null