31:T557,chart = svg``32:Ta2e,levels = [ [ { id: "vesania" }, { id: "sylva" }, { id: "desolo" }, { id: "calidor" }, { id: "novus" }, { id: "glacio" }, { id: "atrox" }, { id: "trade platform" } ], [ { id: "methane", parents: ['novus', 'glacio'] }, { id: "sulfur", parents: ['calidor', 'atrox'] }, { id: "argon", parents: ['vesania', 'atrox'] }, { id: "hydrogen", parents: ['sylva', 'calidor', 'vesania', 'novus'] }, { id: "nitrogen", parents: ['sylva', 'vesania', 'atrox'] }, { id: "helium", parents: ['atrox'] }, { id: "resin", parents: [...allPlanets, ...trade] }, { id: "quartz", parents: [...allPlanets, ...trade] }, { id: "compound", parents: [...allPlanets, ...trade] }, { id: "organic", parents: [...allPlanets, ...trade] }, { id: "wolframite", parents: ['desolo', 'calidor'] }, { id: "clay", parents: [...allPlanets, ...trade] }, { id: "hematite", parents: ['novus', 'glacio'] }, { id: "malachite", parents: ['calidor', 'sylva'] }, { id: "laterite", parents: [...allPlanets, ...trade] }, { id: "ammonium", parents: [...allPlanets, ...trade] }, { id: "graphite", parents: [...allPlanets, ...trade] }, { id: "titanite", parents: ['glacio', 'vesania'] }, { id: "lithium", parents: ['vesania', 'novus'] }, { id: "astronium", parents: [...allPlanets] }, { id: "sphalerite", parents: ['sylva', 'desolo'] } ], [ { id: "glass", parents: ["quartz"] }, { id: "carbon", parents: ["organic"] }, { id: "tungsten", parents: ["wolframite"] }, { id: "ceramic", parents: ["clay"] }, { id: "iron", parents: ["hematite"] }, { id: "copper", parents: ["malachite"] }, { id: "aluminum", parents: ["laterite"] }, { id: "titanium", parents: ["titanite"] }, { id: "zinc", parents: ["sphalerite"] } ], [ { id: "silicone", parents: ["resin", "quartz", "methane"] }, { id: "rubber", parents: ["resin", "organic"] }, { id: "plastic", parents: ["compound", "carbon"] }, { id: "explosive powder", parents: ["sulfur", "carbon"] }, { id: "steel", parents: ["carbon", "argon", "iron"] }, { id: "tungsten carbide", parents: ["tungsten", "carbon"] }, { id: "aluminum alloy", parents: ["copper", "aluminum"] }, { id: "hydrazine", parents: ["ammonium", "ammonium", "hydrogen"] } ], [{ id: "graphene", parents: ["hydrazine", "graphite"] }], [ { id: "diamond", parents: ["graphene", "graphene"] }, { id: "titanium alloy", parents: ["graphene", "titanium", 'nitrogen'] }, { id: "nanocarbon alloy", parents: ["steel", 'titanium alloy', "helium"] } ] ]33:Te47,data = { // precompute level depth levels.forEach((l,i) => l.forEach(n => n.level = i)) var nodes = levels.reduce( ((a,x) => a.concat(x)), [] ) var nodes_index = {} nodes.forEach(d => nodes_index[d.id] = d) // objectification nodes.forEach(d => { d.parents = (d.parents === undefined ? [] : d.parents).map(p => nodes_index[p]) }) // precompute bundles levels.forEach((l, i) => { var index = {} l.forEach(n => { if(n.parents.length == 0) { return } var id = n.parents.map(d => d.id).sort().join('--') if (id in index) { index[id].parents = index[id].parents.concat(n.parents) } else { index[id] = {id: id, parents: n.parents.slice(), level: i} } n.bundle = index[id] }) l.bundles = Object.keys(index).map(k => index[k]) l.bundles.forEach((b, i) => b.i = i) }) var links = [] nodes.forEach(d => { d.parents.forEach(p => links.push({source: d, bundle: d.bundle, target: p})) }) var bundles = levels.reduce( ((a,x) => a.concat(x.bundles)), [] ) // reverse pointer from parent to bundles bundles.forEach(b => b.parents.forEach(p => { if(p.bundles_index === undefined) { p.bundles_index = {} } if(!(b.id in p.bundles_index)) { p.bundles_index[b.id] = [] } p.bundles_index[b.id].push(b) })) nodes.forEach(n => { if(n.bundles_index !== undefined) { n.bundles = Object.keys(n.bundles_index).map(k => n.bundles_index[k]) } else { n.bundles_index = {} n.bundles = [] } n.bundles.forEach((b, i) => b.i = i) }) links.forEach(l => { if(l.bundle.links === undefined) { l.bundle.links = [] } l.bundle.links.push(l) }) // layout const padding = 8 const node_height = 22 const node_width = 70 const bundle_width = 14 const level_y_padding = 16 const metro_d = 4 const c = 16 const min_family_height = 16 nodes.forEach(n => n.height = (Math.max(1, n.bundles.length)-1)*metro_d) var x_offset = padding var y_offset = padding levels.forEach(l => { x_offset += l.bundles.length*bundle_width y_offset += level_y_padding l.forEach((n, i) => { n.x = n.level*node_width + x_offset n.y = node_height + y_offset + n.height/2 y_offset += node_height + n.height }) }) var i = 0 levels.forEach(l => { l.bundles.forEach(b => { b.x = b.parents[0].x + node_width + (l.bundles.length-1-b.i)*bundle_width b.y = i*node_height }) i += l.length }) links.forEach(l => { l.xt = l.target.x l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i*metro_d - l.target.bundles.length*metro_d/2 + metro_d/2 l.xb = l.bundle.x l.xs = l.source.x l.ys = l.source.y }) // compress vertical space var y_negative_offset = 0 levels.forEach(l => { y_negative_offset += -min_family_height + d3.min(l.bundles, b => d3.min(b.links, link => (link.ys-c)-(link.yt+c))) || 0 l.forEach(n => n.y -= y_negative_offset) }) // very ugly, I know links.forEach(l => { l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i*metro_d - l.target.bundles.length*metro_d/2 + metro_d/2 l.ys = l.source.y l.c1 = l.source.level-l.target.level > 1 ? node_width+c : c l.c2 = c }) var layout = { width: d3.max(nodes, n => n.x) + node_width + 2*padding, height: d3.max(nodes, n => n.y) + node_height/2 + 2*padding, node_height, node_width, bundle_width, level_y_padding, metro_d } return {levels, nodes, nodes_index, links, bundles, layout} }34:[] 2f:{"title":"Astroneer tangled tree","cells":[{"id":0,"value":"md`# Astroneer tangled tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`Another take on a [tangled tree visualization](https://beta.observablehq.com/@nitaku/tangled-tree-visualization). This time, metro-style bundling is used when a parent node appears in multiple \"families\", and the layout is made more compact on the y axis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"background_color = 'white'","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"d3 = require('d3-scale', 'd3-scale-chromatic', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"allPlanets = [\n \"sylva\",\n \"desolo\",\n \"calidor\",\n \"vesania\",\n \"novus\",\n \"glacio\",\n \"atrox\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"trade = [\"trade platform\"]","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}