30:T63b,chart = { const svg = SankeyChart( { links: links }, { highlight, nodeLabel: (d) => index.get(d.id).name, nodeAlign, // e.g., d3.sankeyJustify; set by input above linkColor, // e.g., "source" or "target"; set by input above nodeGroup: (d) => index.get(d.id)[groupBy], nodeClick: (n) => { set( viewof highlight, highlight.includes(n.id) ? highlight.filter((h) => h !== n.id) : highlight.concat([n.id]) ); }, nodeOver: (node, nodes, links) => { mutable recipe = md`\`${ index.get(node.id).name }\` (via ${getBuildRecipe(node.id)[0].join("+")})`; }, nodeTitle: (d) => getBuildRecipe(d.id)[0], linkSource: ({ source }) => source.id, // given d in links, returns a node identifier string linkTarget: ({ target }) => target.id, // given d in links, returns a node identifier string // linkValue: ({ quantity: value }) => value, // given d in links, returns the quantitative value linkTitle: (d) => `1x ${index.get(d.source.id).name} → ${index.get(d.target.id).name}`, width: width * scaleFactor, height: (width * scaleFactor * 9) / 16 } ); return htl.html`${ highlight.length > 0 ? htl.html` { e.preventDefault(); set(viewof highlight, []); }}>(reset highlights)` : null } ${Swatches(svg.scales.color)} ${svg}`; }31:[{"id":"dd109bf19734c949a5fa3ff33c5fc6cb1b2b9e4b68c1a739f413172adc63915f17bd1c77212dbf9e8425a12bf0d0c2ea40b230983a59d1caf3288ec739b35eae","href":"https://static.observableusercontent.com/files/dd109bf19734c949a5fa3ff33c5fc6cb1b2b9e4b68c1a739f413172adc63915f17bd1c77212dbf9e8425a12bf0d0c2ea40b230983a59d1caf3288ec739b35eae","name":"Astroneer Item Crafting 73be4ff6b16b41d699fc4becd0f24ca9 8.csv","type":"text/csv","lastModified":1642793551910.914,"size":102917},{"id":"bc576f2324579be9aef06da29bab63e84ae7c9fc5efac5169a1c7b146d78486c890fb5aa934c53285e0bc9cc60694d9f09d032ec6e93dd1a844d9f77d5aa7693","href":"https://static.observableusercontent.com/files/bc576f2324579be9aef06da29bab63e84ae7c9fc5efac5169a1c7b146d78486c890fb5aa934c53285e0bc9cc60694d9f09d032ec6e93dd1a844d9f77d5aa7693","name":"Astroneer Item Crafting 73be4ff6b16b41d699fc4becd0f24ca9 3.csv","type":"text/csv","lastModified":1642786956453.71,"size":102718},{"id":"aa348ba5ce71fe7f7b837567e78a75ada0d362649bfcf761eb95baf81e65476eb6d9f7db9dfe8abce23745a032a0c99c9f149a94ed28675672460235f86cefdf","href":"https://static.observableusercontent.com/files/aa348ba5ce71fe7f7b837567e78a75ada0d362649bfcf761eb95baf81e65476eb6d9f7db9dfe8abce23745a032a0c99c9f149a94ed28675672460235f86cefdf","name":"Astroneer Item Crafting 73be4ff6b16b41d699fc4becd0f24ca9 7.csv","type":"text/csv","lastModified":1642789018332.772,"size":95561},{"id":"acce5e63747dfe3460fcf14e1401fb6079dd4b05a65d42182b6e33c162090b771d2461f2d9e4b44fec4ac5d855965f61965fc3208fe47db47e30136561ea7cac","href":"https://static.observableusercontent.com/files/acce5e63747dfe3460fcf14e1401fb6079dd4b05a65d42182b6e33c162090b771d2461f2d9e4b44fec4ac5d855965f61965fc3208fe47db47e30136561ea7cac","name":"Astroneer Item Crafting 73be4ff6b16b41d699fc4becd0f24ca9 4@1.csv","type":"text/csv","lastModified":1643055084910.463,"size":139988}] 2e:{"title":"Astroneer Crafting","cells":[{"id":0,"value":"# Astroneer Crafting\n> _visualize the flow of planets, resources, and items. [See my note](#todo1) about why scrap, trading, and soil centrifuge are incomplete_\n\nCredit https://astroneer.fandom.com/wiki/ for the crafting recipes, collected into and exported from [notion.so](https://sgregson.notion.site/73be4ff6b16b41d699fc4becd0f24ca9?v=1ecf72260bb7400781e28af94e206be9).","pinned":false,"hidden":false,"mode":"md"},{"id":1897,"value":"toc({ title: \"\", headers: \"h2,h3\", hideStartingFrom: \"Force Graph\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1753,"value":"## Diagram\n* Links between items represent one unit of that thing (there are two links from graphene to diamond). They display thicker the more resources it took to get there (nanocarbon is the thickest link).\n* Items (rectangles) scale to fit the links\n\n

💭 Usage

\n${md`- Click items to highlight them, or select them from the [highlighting item](#highlight) list\n- Hover over items and links to view context info\n- Zoom and drag (double-click / scroll to zoom, click canvas to reset)\n- Use the any of the dropdowns below to change how the diagram appears\n- Fullscreen the diagram with the button in the top-right corner (esc to exit)\n`}

","pinned":false,"hidden":false,"mode":"md"},{"id":870,"value":"mutable recipe = md`_hover an item for info_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"viewof nodeAlign = Inputs.select(\n new Map([\n [\"left (free items pull left)\", \"left\"],\n [\"right (final items pull right)\", \"right\"],\n [\"justify (both left+right)\", \"justify\"],\n [\"center (dense, balanced)\", \"center\"]\n ]),\n {\n value: \"center\",\n label: html`Alignment
left for \"when you can I reach __\" right for \"when should I seek ___?\"`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"viewof groupBy = Inputs.select(\n new Map([\n [\"tier (size)\", \"tier\"],\n [\"group\", \"group\"],\n [\"type (most granular)\", \"type\"]\n ]),\n { label: html`Color By`, value: \"group\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"viewof highlight = Inputs.select(data, {\n label: html`highlight item
cmd+click to select multiple or deselect`,\n format: (r) => r.name,\n valueof: (row) => row.id,\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"// Inputs.table(\n// highlight.map((d) => index.get(d)),\n// { columns: [\"name\", \"tier\", \"qty\", \"makesNames\"], layout: \"auto\" }\n// )\nhtml`${\n highlight.length > 0\n ? htl.html`${highlight.map((id) => prettyRecipe(id))}`\n : \"select a highlight above to see subcomponents\"\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"viewof linkColor = Inputs.select(\n new Map([\n [\"static\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"]\n ]),\n {\n value: new URLSearchParams(html``.search).get(\"color\") || \"target\",\n label: htl.html`Link Color
{\n e.preventDefault();\n set(viewof highlight, []);\n }}>remove highlighted items first`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"viewof scaleFactor = Inputs.range([0, 8], {\n label: html`scale factor
adjust for font size, resets with alignment changes`,\n step: 0.05,\n value: nodeAlign === \"justify\" ? 3.0 : nodeAlign === \"right\" ? 2.1 : 1.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1919,"value":"### Input","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"// Data collated from the astroneer wiki and assembeld in notion.so\n// NOTE: use the CSV file and not the notion zip export ( it mangles csv column names)\ninput = FileAttachment(\n \"Astroneer Item Crafting 73be4ff6b16b41d699fc4becd0f24ca9 4@1.csv\"\n).csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1826,"value":"cycleWarning","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"// index to find items by name (for re-assigning \"2x resin\" lookups)\n// TODO: i should be able to remove this by instead using the \"madeFrom\" column on every 2x item\nbyName = d3.index(input, (d) => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"overrides = Object.fromEntries(\n input\n .filter((row) => row.name.includes(\"x)\") || row.qty > 1)\n .map((e) => {\n return [\n e.id,\n Array.from(\n { length: parseInt(e.qty) },\n // TODO: update this to use the \"madeFrom\" reference\n // throw errors if there's more than one reference\n () => byName.get(e.name.replace(/ ?\\(.+/, \"\")).id\n ).join(\",\")\n ];\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"### Converted to node/link graph","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"data = {\n const idsToSkip = Object.keys(overrides);\n\n return input.reduce((all, { // ignore two keys (notion URLs don't matter)\n madeFrom, makes, ...row }) => {\n // skip placeholder\n if (idsToSkip.includes(row.id)) return all;\n\n row.qty = parseInt(row.qty);\n\n for (const [toReplace, replaceWith] of Object.entries(overrides)) {\n if (row.madeFromIds.includes(toReplace)) {\n row.madeFromIds = row.madeFromIds.replace(toReplace, replaceWith);\n }\n }\n\n row.madeFromIds = row.madeFromIds === \"\" ? [] : row.madeFromIds.split(\",\");\n row.makesIds = row.makesIds === \"\" ? [] : row.makesIds.split(\",\");\n\n all.push(row);\n\n return all;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"// index to lookup by id\nindex = d3.index(data, (d) => d.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"viewof rawSearch = Inputs.search(data, { label: \"search items\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"Inputs.table(rawSearch)","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"links = data\n .reduce((allLinks, { madeFromIds: sourceIds, id: targetId }, i, arr) => {\n const target = index.get(targetId);\n\n if (sourceIds.length > 0) {\n sourceIds.forEach((sourceId) => {\n const source = index.get(sourceId);\n // console.log({ source, target });\n allLinks.push({\n source: index.get(sourceId),\n target: index.get(targetId),\n value: getBuildCost(sourceId)\n });\n });\n }\n\n return allLinks;\n }, [])\n .sort((a, b) => d3.ascending(a.value, b.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof linkSearch = Inputs.search(\n links.map(\n ({ source: { name: source }, target: { name: target }, value }) => ({\n target,\n source,\n value\n })\n ),\n { label: \"search links\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"Inputs.table(linkSearch, { sort: \"value\", reverse: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1927,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"// todo: memoize\nfunction getBuildCost(id) {\n const node = index.get(id);\n\n if (node.madeFromIds.length === 0) return parseInt(node.qty);\n\n return node.madeFromIds.reduce((cost, ingredientId) => {\n return cost + getBuildCost(ingredientId);\n }, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"// todo: memoize\nfunction getBuildRecipe(node, layers = [[]], depth = 0) {\n if (typeof node === \"string\") {\n node = index.get(node);\n }\n\n // things you find in the universe\n if (depth === 0 && node.madeFromIds?.length === 0) {\n return [[`...nothing – go get it!`]];\n }\n\n const sources = node.madeFromIds?.map((id) => index.get(id));\n layers[depth] = layers[depth].concat(sources.map((obj) => obj.name));\n\n if (sources.some((obj) => obj.madeFromIds?.length > 0)) {\n // create a new layer\n layers.push([]);\n\n sources\n .filter((obj) => obj.madeFromIds?.length > 0)\n .forEach((obj) => {\n getBuildRecipe(obj, layers, depth + 1);\n });\n }\n\n if (depth === 0) {\n // const recipe = layers[0];\n // const required = d3\n // .rollups(\n // layers.flat(),\n // (g) => g.length,\n // (d) => d\n // )\n // .sort(([, a], [, b]) => b - a);\n\n return layers;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1562,"value":"prettyRecipe = (id) => {\n const inputs = getBuildRecipe(id).filter((l) => l.length > 0);\n return md`|||\n|---|---\n|To get **${index.get(id).name}** you need|${inputs[0].join(\", \")}${\n getBuildRecipe(highlight[0]).length > 1\n ? `\\n|...using| ${inputs\n .slice(1)\n .map((layer) =>\n d3\n .rollups(\n layer,\n (g) => g.length,\n (d) => d\n )\n .sort((a, b) => b[1] - a[1])\n .map(([name, qty]) => `${qty}x ${name}`)\n .join(\", \")\n )\n .join(\"|\\n|...using|\")}`\n : \"\"\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"function getRelated(id, dir = \"\", nodes = []) {\n const node = index.get(id);\n const newFrom = node?.madeFromIds.filter((n) => !nodes.includes(n));\n const newMakes = node?.makesIds.filter((n) => !nodes.includes(n));\n\n nodes = nodes.concat([id], newFrom, newMakes);\n\n // check in one direction\n if (newFrom && newFrom.length !== 0 && (dir === \"\" || dir === \"down\"))\n newFrom.forEach((n) => {\n nodes = getRelated(n, \"down\", nodes);\n });\n\n if (newMakes && newMakes.length !== 0 && (dir === \"\" || dir === \"up\"))\n newMakes.forEach((n) => {\n nodes = getRelated(n, \"up\", nodes);\n });\n\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"todo1 = md`---\n## [TODO] Trading, Scrap, and Soil Cycles\nThe basic sankey diagram can only illustrate one-way resource flows, and cannot model loops like what results from the Soil Centrifuge creating Compound (which is used to create the Soil Centrifuge)\n\nI'll update to a better version (example below) in time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"cycleWarning = {\n const smallestCycle = getCycle(\n Object.fromEntries(data.map((d) => [d.id, d.madeFromIds]))\n );\n\n if (smallestCycle) {\n throw new Error(\n `Cycle exists in data: ${smallestCycle.map((id) =>\n false ? id : index.get(id).name\n )}`\n );\n }\n return `🎉 acyclic graph!`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"function getCycle(graph) {\n // Copy the graph, converting all node references to String\n graph = Object.assign(...Object.keys(graph).map( node =>\n ({ [node]: graph[node].map(String) }) \n ));\n\n let queue = Object.keys(graph).map( node => [node] );\n while (queue.length) {\n const batch = [];\n for (const path of queue) {\n const parents = graph[path[0]] || [];\n for (const node of parents) {\n if (node === path[path.length-1]) return [node, ...path];\n batch.push([node, ...path]);\n }\n }\n queue = batch;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"import {\n drawSankey,\n finalGraph\n} from \"@tomshanley/sankey-circular-deconstructed\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"finalGraph","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1592,"value":"// basic sankey chart stuff","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"// pulls from my fork of sankey chart, which allows zooming\nimport {\n SankeyChart,\n // viewof nodeAlign,\n // viewof linkColor,\n highlight as highlightStyles\n} from \"@sgregson/d3-sankey\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"highlightStyles","pinned":false,"hidden":false,"mode":"ojs"},{"id":1663,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1590,"value":"// fullscreen stuff","pinned":true,"hidden":false,"mode":"ojs"},{"id":931,"value":"import { fullscreen } from \"@fil/fullscreen\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":942,"value":"fullscreen(chart, { center: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"// utilities and components","pinned":true,"hidden":false,"mode":"ojs"},{"id":1005,"value":"import { styles } from \"@sgregson/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"import { notice, toc } from \"@sgregson/components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1611,"value":"import { set } from \"@observablehq/synchronized-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"### Force Graph","pinned":false,"hidden":false,"mode":"md"},{"id":1264,"value":"import { ForceGraph } from \"@d3/disjoint-force-directed-graph\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1911,"value":"Swatches(forceGraph.scales.color)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"forceGraph = ForceGraph(\n {\n nodes: data,\n links: data.reduce((acc, { name, id, madeFromIds }) => {\n for (const source of madeFromIds) {\n acc.push({ source, target: id, name });\n }\n return acc;\n }, [])\n },\n { nodeTitle: (d) => d.name, nodeGroup: (d) => index.get(d.id)[groupBy] }\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}