\n Embeddings. They're one of the parts of the LLM/AI wave that I sort of like.\n

\n An embedding model takes a bit of text and returns a big array of floating-point numbers that represent its\n position in a sort of _hyper-dimensional embedding space_. You interpret this array as sort of a big coordinate,\n like longitude & latitude & elevation & time and a thousand other dimensions, and you get sort of the word's place\n in the computer's… mind-brain, or whatever.\n

\n Embeddings are pretty cool when they work, because they sort of capture the idea of{\" \"}\n 'vibes', which makes them useful for search applications.\n Someone can search for 'lettuce' and get results for 'spinach' too because they're similar. It's amazing when it\n works. And pretty weird when it doesn't!\n

\n This project is based on this{\" \"}\n \n blog post I read last year\n {\" \"}\n about 'how RAG fails', which was unfortunately written by someone{\" \"}\n with a RAG alternative to sell.\n

\n But maybe maybe RAG is doomed, in some ways? Half the time it does something magical, and half the time it\n produces something deeply weird. It thinks that, for example, \"the 1900s\" are more similar to \"the 1700s\" than to\n \"20th century.\" Most of these, I think, are related to how the RAG is a little literal and focused on the style of\n a phrase as well as the content of it. On the other hand, all other search solutions, like fuzzy matching and most\n ranking algorithms, are also some sort of good-enough heuristic, so maybe RAG is totally fine.\n

\n Play around. You can enter up to 8 words or phrases. The thickness and opacity of the connections indicates how\n connected the model thinks the things are.\n

\n \n)\n\nconst examples =

\n Examples:{\" \"}\n {[\n {\n title: \"Apples and bananas are really different\",\n q: \"/?word=apples&word=oranges&word=bananas&word=grapefruit&word=blueberry&word=blackberry&word=raspberry&word=\",\n },\n {\n title: \"Lexus is way different from Tesla\",\n q: \"/?word=porsche&word=ferrari&word=tesla&word=kia&word=lexus&word=toyota&word=hyundai&word=\",\n },\n {\n title: \"Cats and dogs are more similar to each other than to canine and feline\",\n q: \"/?word=dog&word=cat&word=feline&word=canine&word=&word=&word=&word=\",\n },\n {\n title: \"Chess pieces wtf\",\n q: \"/?word=pawn&word=king&word=queen&word=rook&word=castle&word=&word=&word=\",\n },\n ].map((ex, i, arr) => {\n return (\n <>\n {ex.title}\n {i === arr.length - 1 ? \"\" : \", \"}\n \n )\n })}\n

\n\n// Based on https://github.com/Shawns2759/vector-similarity MIT\nfunction dotProduct(a: number[], b: number[]): number {\n return a.reduce((sum, value, index) => sum + value * b[index], 0)\n}\n\nfunction vectorMagnitude(a: number[]): number {\n return Math.sqrt(a.reduce((sum, value) => sum + value * value, 0))\n}\n\nfunction cosineSimilarity(a: number[], b: number[]): number {\n const dotProd = dotProduct(a, b)\n const magnitudeA = vectorMagnitude(a)\n const magnitudeB = vectorMagnitude(b)\n return dotProd / (magnitudeA * magnitudeB)\n}\n\nconst app = new Hono()\napp.get(\"/\", async (c) => {\n const r = blockAi(c.req.headers.get(\"User-Agent\"))\n if (r) return r\n\n if (working) {\n return c.text(\"Sorry, another embedding is being fetched, wait a moment and try again\")\n }\n\n working = true\n const inputQ = c.req.queries(\"word\")\n const items = (inputQ ?? []).filter(Boolean)\n const inputResult = v.safeParse(inputSchema, items)\n\n if (inputResult.success) {\n const input = inputResult.output\n const embeddings = await client.embed({\n input,\n model: \"voyage-3-lite\",\n })\n\n const zipped = input.map((word, i) => {\n return {\n word,\n embedding: embeddings.data?.at(i)?.embedding,\n }\n })\n\n const data = {\n nodes: zipped.map(z => {\n return {\n id: z.word,\n }\n }),\n links: zipped.flatMap((z, i) => {\n return zipped.slice(i + 1).map(z2 => {\n return {\n source: z.word,\n target: z2.word,\n value: cosineSimilarity(z.embedding, z2.embedding),\n }\n })\n }),\n }\n\n let nodePool = data.nodes.slice()\n let ordered = []\n\n const linkOrder = data.links.sort((l1, l2) => {\n return l2.value - l1.value\n })\n\n console.log(linkOrder)\n for (let link of linkOrder) {\n const s = nodePool.find(n => {\n return n.id === link.source\n })\n const t = nodePool.find(n => n.id === link.target)\n nodePool = nodePool.filter(n => n !== s && n !== t)\n console.log(s, t)\n if (s) ordered.push(s)\n if (t) ordered.push(t)\n }\n\n data.nodes = ordered.concat(nodePool)\n\n setTimeout(() => {\n working = false\n }, THROTTLE)\n\n return c.html(\n \n \n Surprising embeddings\n \n\n \n \n \n

\n Surprising embeddings\n \n Using Voyage AI voyage-3-lite model\n \n

\n \n \n \n

\n\n \n\n {examples}\n\n

{intro}

\n\n \n \n ,\n )\n }\n\n return c.html(\n \n \n Surprising embeddings\n \n\n \n \n \n

\n Surprising embeddings\n \n Using Voyage AI voyage-3-lite model\n \n

\n\n {examples}\n\n \n\n

{intro}

\n \n \n ,\n )\n})\n\nexport default app.fetch","surprising-embeddings",[],[189],{"_106":199,"_99":200,"_148":201,"_150":-5,"_151":137,"_152":202,"_154":155,"_108":203,"_103":204,"_158":159,"_160":205,"_162":27,"_163":-5,"_164":206,"_102":207},"caf606ce-da98-11ef-a3ba-e6cdfca9ef9f","visualization","83d70fb2-da85-11ef-a00c-e6cdfca9ef9f",306,["D",1737753524665],156,"import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 40])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.5, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", \"100%\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; aspect-ratio: 1/1;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source), color(d.target))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx].x\n })\n .attr(\"y1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx].y\n })\n .attr(\"x2\", d => {\n const idx = nodes.findIndex(n => n.id === d.source)\n return positions[idx].x\n })\n .attr(\"y2\", d => {\n const idx = nodes.findIndex(n => n.id === d.source)\n return positions[idx].y\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source === d.id || l.target === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",[],[200],"files",[145,167,176,187,198],"counts",{"_212":33,"_213":157,"_214":33,"_215":157},"pulls","branches","forks","envVars","contents",[218,221,224,227,230],{"_106":146,"_99":147,"_148":149,"_150":-5,"_151":137,"_152":153,"_154":155,"_108":219,"_103":157,"_158":159,"_160":161,"_162":27,"_163":-5,"_102":220},["D",1737755464259],[147],{"_106":168,"_99":169,"_148":170,"_150":-5,"_151":137,"_152":136,"_154":155,"_108":222,"_103":172,"_158":159,"_160":173,"_162":27,"_163":-5,"_102":223},["D",1738862357875],[169],{"_106":177,"_99":178,"_148":179,"_150":-5,"_151":137,"_152":180,"_154":155,"_108":225,"_103":182,"_158":183,"_160":184,"_162":27,"_163":-5,"_102":226},["D",1737738093468],[178],{"_106":188,"_99":189,"_148":190,"_150":-5,"_151":137,"_152":191,"_154":155,"_108":228,"_103":193,"_158":183,"_160":194,"_162":27,"_163":195,"_102":229},["D",1737755227874],[189],{"_106":199,"_99":200,"_148":201,"_150":-5,"_151":137,"_152":202,"_154":155,"_108":231,"_103":204,"_158":159,"_160":205,"_162":27,"_163":-5,"_102":232},["D",1737753524665],[200],"file","upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":239,"_243":244,"_527":94,"_528":155},{"_106":107,"_99":100,"_108":240,"_110":-5,"_111":27,"_112":113,"_114":115,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":33,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":241,"_134":242},["D",1737736218273],{"_97":98,"_132":133},{"_103":136,"_99":43,"_106":137,"_138":107,"_139":-5,"_140":-5,"_141":-5,"_142":-5},"history",[245,254,263,272,281,290,299,308,317,325,334,343,351,360,369,378,387,396,405,414,423,432,440,448,456,464,473,482,491,500,509,518],{"_148":201,"_103":246,"_108":247,"_151":137,"_208":248},271,["D",1737750774535],[249],{"_106":250,"_151":137,"_148":201,"_99":200,"_160":251,"_158":159,"_103":252,"_150":-5,"_108":247,"_152":246,"_163":-5,"_154":27,"_162":27,"_102":253},"63c08ebc-da92-11ef-b4ac-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n console.log(positions[idx][0], idx, positions)\n return positions[idx][0]\n })\n .attr(\"y1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx][1]\n })\n .attr(\"x2\", d => {\n const idx = nodes.findIndex(n => n.id === d.source)\n return positions[idx][0]\n })\n .attr(\"y2\", d => {\n const idx = nodes.findIndex(n => n.id === d.source)\n return positions[idx][1]\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",146,[200],{"_148":201,"_103":255,"_108":256,"_151":137,"_208":257},270,["D",1737750741124],[258],{"_106":259,"_151":137,"_148":201,"_99":200,"_160":260,"_158":159,"_103":261,"_150":-5,"_108":256,"_152":255,"_163":-5,"_154":27,"_162":27,"_102":262},"4fd64888-da92-11ef-a763-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx][0]\n })\n .attr(\"y1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx][1]\n })\n .attr(\"x2\", d => {\n const idx = nodes.findIndex(n => n.id === d.source)\n return positions[idx][0]\n })\n .attr(\"y2\", d => {\n const idx = nodes.findIndex(n => n.id === d.source)\n return positions[idx][1]\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",145,[200],{"_148":201,"_103":264,"_108":265,"_151":137,"_208":266},269,["D",1737750726802],[267],{"_106":268,"_151":137,"_148":201,"_99":200,"_160":269,"_158":159,"_103":270,"_150":-5,"_108":265,"_152":264,"_163":-5,"_154":27,"_162":27,"_102":271},"474cbf76-da92-11ef-87dd-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx][0]\n })\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx][0]\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",144,[200],{"_148":201,"_103":273,"_108":274,"_151":137,"_208":275},268,["D",1737750723132],[276],{"_106":277,"_151":137,"_148":201,"_99":200,"_160":278,"_158":159,"_103":279,"_150":-5,"_108":274,"_152":273,"_163":-5,"_154":27,"_162":27,"_102":280},"451d2272-da92-11ef-a383-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n return positions[idx][0]\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",143,[200],{"_148":201,"_103":282,"_108":283,"_151":137,"_208":284},267,["D",1737750715305],[285],{"_106":286,"_151":137,"_148":201,"_99":200,"_160":287,"_158":159,"_103":288,"_150":-5,"_108":283,"_152":282,"_163":-5,"_154":27,"_162":27,"_102":289},"4072aec2-da92-11ef-9e87-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target)\n console.log(idx)\n return positions[idx][0]\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",142,[200],{"_148":201,"_103":291,"_108":292,"_151":137,"_208":293},266,["D",1737750702156],[294],{"_106":295,"_151":137,"_148":201,"_99":200,"_160":296,"_158":159,"_103":297,"_150":-5,"_108":292,"_152":291,"_163":-5,"_154":27,"_162":27,"_102":298},"389c9262-da92-11ef-98e2-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr(\"x1\", d => {\n const idx = nodes.findIndex(n => n.id === d.target.id)\n console.log(idx)\n return positions[idx][0]\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",141,[200],{"_148":201,"_103":300,"_108":301,"_151":137,"_208":302},265,["D",1737750648458],[303],{"_106":304,"_151":137,"_148":201,"_99":200,"_160":305,"_158":159,"_103":306,"_150":-5,"_108":301,"_152":300,"_163":-5,"_154":27,"_162":27,"_102":307},"189ae2c0-da92-11ef-8b2d-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n .attr('x1', d => {\n console.log(d)\n return positions[d.target]\n })\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",140,[200],{"_148":201,"_103":309,"_108":310,"_151":137,"_208":311},264,["D",1737750581573],[312],{"_106":313,"_151":137,"_148":201,"_99":200,"_160":314,"_158":159,"_103":315,"_150":-5,"_108":310,"_152":309,"_163":-5,"_154":27,"_162":27,"_102":316},"f0bcbfd0-da91-11ef-8d2a-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 2.5) + width / 2,\n }\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",139,[200],{"_148":201,"_103":318,"_108":319,"_151":137,"_208":320},263,["D",1737750567603],[321],{"_106":322,"_151":137,"_148":201,"_99":200,"_160":323,"_158":159,"_103":193,"_150":-5,"_108":319,"_152":318,"_163":-5,"_154":27,"_162":27,"_102":324},"e869c468-da91-11ef-8e0f-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 3) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 3) + width / 2,\n }\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",[200],{"_148":201,"_103":326,"_108":327,"_151":137,"_208":328},262,["D",1737750557330],[329],{"_106":330,"_151":137,"_148":201,"_99":200,"_160":331,"_158":159,"_103":332,"_150":-5,"_108":327,"_152":326,"_163":-5,"_154":27,"_162":27,"_102":333},"e24a1efc-da91-11ef-8a59-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n }\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",137,[200],{"_148":201,"_103":335,"_108":336,"_151":137,"_208":337},261,["D",1737750548029],[338],{"_106":339,"_151":137,"_148":201,"_99":200,"_160":340,"_158":159,"_103":341,"_150":-5,"_108":336,"_152":335,"_163":-5,"_154":27,"_162":27,"_102":342},"dcbe5bd8-da91-11ef-8d2a-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n }\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",136,[200],{"_148":201,"_103":344,"_108":345,"_151":137,"_208":346},260,["D",1737750526589],[347],{"_106":348,"_151":137,"_148":201,"_99":200,"_160":340,"_158":159,"_103":349,"_150":-5,"_108":345,"_152":344,"_163":-5,"_154":27,"_162":27,"_102":350},"cff9cb1c-da91-11ef-9e87-e6cdfca9ef9f",135,[200],{"_148":201,"_103":352,"_108":353,"_151":137,"_208":354},259,["D",1737750524782],[355],{"_106":356,"_151":137,"_148":201,"_99":200,"_160":357,"_158":159,"_103":358,"_150":-5,"_108":353,"_152":352,"_163":-5,"_154":27,"_162":27,"_102":359},"cee31daa-da91-11ef-90b8-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n }\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",134,[200],{"_148":201,"_103":361,"_108":362,"_151":137,"_208":363},258,["D",1737750510358],[364],{"_106":365,"_151":137,"_148":201,"_99":200,"_160":366,"_158":159,"_103":367,"_150":-5,"_108":362,"_152":361,"_163":-5,"_154":27,"_162":27,"_102":368},"c64abb94-da91-11ef-abd1-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return {\n x: (Math.cos((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n y: (Math.sin((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n }\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${positions[i].x}, ${positions[i].y})`)\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",133,[200],{"_148":201,"_103":370,"_108":371,"_151":137,"_208":372},257,["D",1737750467980],[373],{"_106":374,"_151":137,"_148":201,"_99":200,"_160":375,"_158":159,"_103":376,"_150":-5,"_108":371,"_152":370,"_163":-5,"_154":27,"_162":27,"_102":377},"ad078b12-da91-11ef-b7fd-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return [\n (Math.cos((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n (Math.sin((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n ]\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",132,[200],{"_148":201,"_103":379,"_108":380,"_151":137,"_208":381},256,["D",1737750453692],[382],{"_106":383,"_151":137,"_148":201,"_99":200,"_160":384,"_158":159,"_103":385,"_150":-5,"_108":380,"_152":379,"_163":-5,"_154":27,"_162":27,"_102":386},"a4841a28-da91-11ef-a336-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconst positions = Array.from({ length: nodes.length }, (_, i) => {\n return [\n (Math.cos((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n (Math.sin((i / nodes.length) * Math.PI * 2) * width / 4) + width / 2,\n ]\n})\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",131,[200],{"_148":201,"_103":388,"_108":389,"_151":137,"_208":390},255,["D",1737750364118],[391],{"_106":392,"_151":137,"_148":201,"_99":200,"_160":393,"_158":159,"_103":394,"_150":-5,"_108":389,"_152":388,"_163":-5,"_154":27,"_162":27,"_102":395},"6f1fa94c-da91-11ef-b7fd-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d.value))\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",130,[200],{"_148":201,"_103":397,"_108":398,"_151":137,"_208":399},254,["D",1737750361076],[400],{"_106":401,"_151":137,"_148":201,"_99":200,"_160":402,"_158":159,"_103":403,"_150":-5,"_108":398,"_152":397,"_163":-5,"_154":27,"_162":27,"_102":404},"6d4f8600-da91-11ef-ab9f-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", d => opacityScale(d))\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",129,[200],{"_148":201,"_103":406,"_108":407,"_151":137,"_208":408},253,["D",1737750352168],[409],{"_106":410,"_151":137,"_148":201,"_99":200,"_160":411,"_158":159,"_103":412,"_150":-5,"_108":407,"_152":406,"_163":-5,"_154":27,"_162":27,"_102":413},"68009766-da91-11ef-a7c0-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke-opacity\", d => opacityScale(d.value))\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",128,[200],{"_148":201,"_103":415,"_108":416,"_151":137,"_208":417},252,["D",1737750332007],[418],{"_106":419,"_151":137,"_148":201,"_99":200,"_160":420,"_158":159,"_103":421,"_150":-5,"_108":416,"_152":415,"_163":-5,"_154":27,"_162":27,"_102":422},"5bfbde6c-da91-11ef-8d2a-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst opacityScale = d3.scaleLinear().domain(valueRange).range([0.1, 1])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",127,[200],{"_148":190,"_103":424,"_108":425,"_151":137,"_208":426},251,["D",1737750290081],[427],{"_106":428,"_151":137,"_148":190,"_99":189,"_160":429,"_158":183,"_103":430,"_150":-5,"_108":425,"_152":424,"_163":195,"_154":27,"_162":27,"_102":431},"42fea4f8-da91-11ef-8db7-e6cdfca9ef9f","/** @jsxImportSource npm:hono@3/jsx */\nimport * as v from \"jsr:@valibot/valibot\"\nimport { Hono } from \"npm:hono\"\nimport { VoyageAIClient } from \"npm:voyageai\"\n\n// Create login schema with email and password\nconst inputSchema = v.pipe(v.array(v.pipe(v.string(), v.minLength(1), v.maxLength(32))), v.minLength(1), v.maxLength())\nconst client = new VoyageAIClient({ apiKey: Deno.env.get(\"VOYAGE_API_TOKEN\") })\n\nlet working = false\n// milliseconds between requests to pause\nconst THROTTLE = 1000\n\nconst examples =

\n\n// Based on https://github.com/Shawns2759/vector-similarity MIT\nfunction dotProduct(a: number[], b: number[]): number {\n return a.reduce((sum, value, index) => sum + value * b[index], 0)\n}\n\nfunction vectorMagnitude(a: number[]): number {\n return Math.sqrt(a.reduce((sum, value) => sum + value * value, 0))\n}\n\nfunction cosineSimilarity(a: number[], b: number[]): number {\n const dotProd = dotProduct(a, b)\n const magnitudeA = vectorMagnitude(a)\n const magnitudeB = vectorMagnitude(b)\n return dotProd / (magnitudeA * magnitudeB)\n}\n\nconst app = new Hono()\napp.get(\"/\", async (c) => {\n if (working) {\n return c.text(\"Sorry, another embedding is being fetched, wait a moment and try again\")\n }\n\n working = true\n const inputQ = c.req.queries(\"word\")\n const items = (inputQ ?? []).filter(Boolean)\n const inputResult = v.safeParse(inputSchema, items)\n\n if (inputResult.success) {\n const input = inputResult.output\n const embeddings = await client.embed({\n input,\n model: \"voyage-3-lite\",\n })\n\n const zipped = input.map((word, i) => {\n return {\n word,\n embedding: embeddings.data?.at(i)?.embedding,\n }\n })\n\n const data = {\n nodes: zipped.map(z => {\n return {\n id: z.word,\n }\n }),\n links: zipped.flatMap((z, i) => {\n return zipped.slice(i + 1).map(z2 => {\n return {\n source: z.word,\n target: z2.word,\n value: cosineSimilarity(z.embedding, z2.embedding),\n }\n })\n }),\n }\n\n setTimeout(() => {\n working = false\n }, THROTTLE)\n\n return c.html(\n \n \n Surprising embeddings\n \n \n \n

Surprising embeddings

\n \n \n \n

\n\n \n\n {examples}\n

\n\n \n \n ,\n )\n }\n\n return c.html(\n \n \n Surprising embeddings\n \n \n \n

Surprising embeddings

\n\n \n\n {examples}\n

\n \n \n ,\n )\n})\n\nexport default app.fetch",98,[189],{"_148":190,"_103":433,"_108":434,"_151":137,"_208":435},250,["D",1737750224133],[436],{"_106":437,"_151":137,"_148":190,"_99":189,"_160":429,"_158":183,"_103":438,"_150":-5,"_108":434,"_152":433,"_163":195,"_154":27,"_162":27,"_102":439},"1baf8a48-da91-11ef-97d8-e6cdfca9ef9f",97,[189],{"_148":190,"_103":441,"_108":442,"_151":137,"_208":443},249,["D",1737750221451],[444],{"_106":445,"_151":137,"_148":190,"_99":189,"_160":429,"_158":183,"_103":446,"_150":-5,"_108":442,"_152":441,"_163":195,"_154":27,"_162":27,"_102":447},"1a16b8c8-da91-11ef-b1c4-e6cdfca9ef9f",96,[189],{"_148":190,"_103":449,"_108":450,"_151":137,"_208":451},248,["D",1737750213425],[452],{"_106":453,"_151":137,"_148":190,"_99":189,"_160":429,"_158":183,"_103":454,"_150":-5,"_108":450,"_152":449,"_163":195,"_154":27,"_162":27,"_102":455},"154e2cc2-da91-11ef-9b1e-e6cdfca9ef9f",95,[189],{"_148":190,"_103":457,"_108":458,"_151":137,"_208":459},247,["D",1737750211574],[460],{"_106":461,"_151":137,"_148":190,"_99":189,"_160":429,"_158":183,"_103":462,"_150":-5,"_108":458,"_152":457,"_163":195,"_154":27,"_162":27,"_102":463},"1433dddc-da91-11ef-9b1e-e6cdfca9ef9f",94,[189],{"_148":201,"_103":465,"_108":466,"_151":137,"_208":467},246,["D",1737750172982],[468],{"_106":469,"_151":137,"_148":201,"_99":200,"_160":470,"_158":159,"_103":471,"_150":-5,"_108":466,"_152":465,"_163":-5,"_154":27,"_162":27,"_102":472},"fd332ea8-da90-11ef-bf52-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0]\n\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.1\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",126,[200],{"_148":201,"_103":474,"_108":475,"_151":137,"_208":476},245,["D",1737750145982],[477],{"_106":478,"_151":137,"_148":201,"_99":200,"_160":479,"_158":159,"_103":480,"_150":-5,"_108":475,"_152":474,"_163":-5,"_154":27,"_162":27,"_102":481},"ed1ac21a-da90-11ef-a77f-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0];\n \n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.2\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",125,[200],{"_148":201,"_103":483,"_108":484,"_151":137,"_208":485},244,["D",1737750135451],[486],{"_106":487,"_151":137,"_148":201,"_99":200,"_160":488,"_158":159,"_103":489,"_150":-5,"_108":484,"_152":483,"_163":-5,"_154":27,"_162":27,"_102":490},"e6d3cfe6-da90-11ef-b77a-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n const d = d3.select(e.target).data()[0];\n \n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",124,[200],{"_148":201,"_103":492,"_108":493,"_151":137,"_208":494},243,["D",1737750082108],[495],{"_106":496,"_151":137,"_148":201,"_99":200,"_160":497,"_158":159,"_103":498,"_150":-5,"_108":493,"_152":492,"_163":-5,"_154":27,"_162":27,"_102":499},"c7081d84-da90-11ef-a60a-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", e => {\n link.attr(\"opacity\", l => {\n console.log(d3.select(e.target))\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",123,[200],{"_148":201,"_103":501,"_108":502,"_151":137,"_208":503},242,["D",1737749999393],[504],{"_106":505,"_151":137,"_148":201,"_99":200,"_160":506,"_158":159,"_103":507,"_150":-5,"_108":502,"_152":501,"_163":-5,"_154":27,"_162":27,"_102":508},"95bb6632-da90-11ef-8a1a-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", d => {\n link.attr(\"opacity\", l => {\n console.log(d)\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",122,[200],{"_148":201,"_103":510,"_108":511,"_151":137,"_208":512},241,["D",1737749988601],[513],{"_106":514,"_151":137,"_148":201,"_99":200,"_160":515,"_158":159,"_103":516,"_150":-5,"_108":511,"_152":510,"_163":-5,"_154":27,"_162":27,"_102":517},"8f4c877c-da90-11ef-a418-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", d => {\n link.attr(\"opacity\", l => {\n console.log(l.source.id, d.id)\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",121,[200],{"_148":201,"_103":519,"_108":520,"_151":137,"_208":521},240,["D",1737749974759],[522],{"_106":523,"_151":137,"_148":201,"_99":200,"_160":524,"_158":159,"_103":525,"_150":-5,"_108":520,"_152":519,"_163":-5,"_154":27,"_162":27,"_102":526},"870d3138-da90-11ef-a60a-e6cdfca9ef9f","import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm\"\n\nconst width = document.querySelector(\"main\").offsetWidth\nconst dataText = document.querySelector(\"#data\").innerHTML\nconsole.log(dataText)\n\nconst data = JSON.parse(\n dataText,\n)\n// Specify the dimensions of the chart.\nconst height = 700\n\n// Specify the color scale.\nconst color = d3.scaleOrdinal(d3.schemeCategory10)\n\n// The force simulation mutates links and nodes, so create a copy\n// so that re-evaluating this cell produces the same result.\nconst links = data.links.map((d) => ({ ...d }))\nconst nodes = data.nodes.map((d) => ({ ...d }))\n\nconst valueRange = d3.extent(data.links, d => d.value)\nconst scale = d3.scaleLinear().domain(valueRange).range([1, 30])\nconst distanceScale = d3.scaleLinear().domain(valueRange).range([width, width / 10])\n\nconsole.log(\"value range\", valueRange)\n\n// Create a simulation with several forces.\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n \"link\",\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance((d) => {\n return width / 2\n // return distanceScale(d.value)\n }),\n )\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .on(\"tick\", ticked)\n\n// Create the SVG container.\nconst svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n// Add a line for each link, and a circle for each node.\nconst link = svg\n .append(\"g\")\n .attr(\"stroke-opacity\", 1)\n .selectAll()\n .data(links)\n .join(\"line\")\n .attr(\"stroke\", d => {\n return d3.interpolateLab(color(d.source.id), color(d.target.id))(0.5)\n })\n .attr(\"stroke-width\", (d) => scale(d.value))\n\nconst node = svg\n .append(\"g\")\n .selectAll()\n .data(nodes)\n .join(\"g\")\n\nnode\n .append(\"circle\")\n .attr(\"r\", 50)\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", (d) => color(d.id))\n\nnode\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"white\")\n .attr(\"y\", \"0.31em\")\n .text(d => d.id)\n .clone(true).lower()\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 3)\n\nnode.append(\"title\").text((d) => d.id)\n\n// Add a drag behavior.\nnode.call(\n d3.drag().on(\"start\", dragstarted).on(\"drag\", dragged).on(\"end\", dragended),\n)\n\nnode.on(\"mouseenter\", d => {\n link.attr(\"opacity\", l => {\n console.log(l.source.id === d.id)\n return (l.source.id === d.id || l.target.id === d.id) ? 1 : 0\n })\n})\n\nnode.on(\"mouseleave\", d => {\n link.attr(\"opacity\", 0.5)\n})\n// Set the position attributes of links and nodes each time the simulation ticks.\nfunction ticked() {\n link\n .attr(\"x1\", (d) => d.source.x)\n .attr(\"y1\", (d) => d.source.y)\n .attr(\"x2\", (d) => d.target.x)\n .attr(\"y2\", (d) => d.target.y)\n\n node.attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n}\n\n// Reheat the simulation when drag starts, and fix the subject position.\nfunction dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart()\n event.subject.fx = event.subject.x\n event.subject.fy = event.subject.y\n}\n\n// Update the subject (dragged node) position during drag.\nfunction dragged(event) {\n event.subject.fx = event.x\n event.subject.fy = event.y\n}\n\n// Restore the target alpha so the simulation cools after dragging ends.\n// Unfix the subject position now that it’s no longer being dragged.\nfunction dragended(event) {\n if (!event.active) simulation.alphaTarget(0)\n event.subject.fx = null\n event.subject.fy = null\n}\n\ndocument.querySelector(\"#root\").appendChild(svg.node())\n\nconsole.log(data)",120,[200],"page","hasNext","routes/_app","actionData","errors"]

History