2c:null 2d:["$","title",null,{"children":"Tangled tree visualization II w/ Adjusted Leaf Labels | Zev Youra | Observable"}] 32:T4c9,svg``33:T1a85,data = { var levels = [ [{id: 'Chaos'}], [ {id: 'Gaea', parents: ['Chaos']}, {id: 'Uranus'} ], [ {id: 'Oceanus', parents: ['Gaea', 'Uranus']}, {id: 'Thethys', parents: ['Gaea', 'Uranus']}, {id: 'Pontus'}, {id: 'Rhea', parents: ['Gaea', 'Uranus']}, {id: 'Cronus', parents: ['Gaea', 'Uranus']}, {id: 'Coeus', parents: ['Gaea', 'Uranus']}, {id: 'Phoebe', parents: ['Gaea', 'Uranus']}, {id: 'Crius', parents: ['Gaea', 'Uranus']}, {id: 'Hyperion', parents: ['Gaea', 'Uranus']}, {id: 'Iapetus', parents: ['Gaea', 'Uranus']}, {id: 'Thea', parents: ['Gaea', 'Uranus']}, {id: 'Themis', parents: ['Gaea', 'Uranus']}, {id: 'Mnemosyne', parents: ['Gaea', 'Uranus']} ], [ {id: 'Doris', parents: ['Oceanus', 'Thethys']}, {id: 'Neures', parents: ['Pontus', 'Gaea']}, {id: 'Dionne'}, {id: 'Demeter', parents: ['Rhea', 'Cronus']}, {id: 'Hades', parents: ['Rhea', 'Cronus']}, {id: 'Hera', parents: ['Rhea', 'Cronus']}, {id: 'Alcmene'}, {id: 'Zeus', parents: ['Rhea', 'Cronus']}, {id: 'Eris'}, {id: 'Leto', parents: ['Coeus', 'Phoebe']}, {id: 'Amphitrite'}, {id: 'Medusa'}, {id: 'Poseidon', parents: ['Rhea', 'Cronus']}, {id: 'Hestia', parents: ['Rhea', 'Cronus']} ], [ {id: 'Thetis', parents: ['Doris', 'Neures']}, {id: 'Peleus'}, {id: 'Anchises'}, {id: 'Adonis'}, {id: 'Aphrodite', parents: ['Zeus', 'Dionne']}, {id: 'Persephone', parents: ['Zeus', 'Demeter']}, {id: 'Ares', parents: ['Zeus', 'Hera']}, {id: 'Hephaestus', parents: ['Zeus', 'Hera']}, {id: 'Hebe', parents: ['Zeus', 'Hera']}, {id: 'Hercules', parents: ['Zeus', 'Alcmene']}, {id: 'Megara'}, {id: 'Deianira'}, {id: 'Eileithya', parents: ['Zeus', 'Hera']}, {id: 'Ate', parents: ['Zeus', 'Eris']}, {id: 'Leda'}, {id: 'Athena', parents: ['Zeus']}, {id: 'Apollo', parents: ['Zeus', 'Leto']}, {id: 'Artemis', parents: ['Zeus', 'Leto']}, {id: 'Triton', parents: ['Poseidon', 'Amphitrite']}, {id: 'Pegasus', parents: ['Poseidon', 'Medusa']}, {id: 'Orion', parents: ['Poseidon']}, {id: 'Polyphemus', parents: ['Poseidon']} ], [ {id: 'Deidamia'}, {id: 'Achilles', parents: ['Peleus', 'Thetis']}, {id: 'Creusa'}, {id: 'Aeneas', parents: ['Anchises', 'Aphrodite']}, {id: 'Lavinia'}, {id: 'Eros', parents: ['Hephaestus', 'Aphrodite']}, {id: 'Helen', parents: ['Leda', 'Zeus']}, {id: 'Menelaus'}, {id: 'Polydueces', parents: ['Leda', 'Zeus']} ], [ {id: 'Andromache'}, {id: 'Neoptolemus', parents: ['Deidamia', 'Achilles']}, {id: 'Aeneas(2)', parents: ['Creusa', 'Aeneas']}, {id: 'Pompilius', parents: ['Creusa', 'Aeneas']}, {id: 'Iulus', parents: ['Lavinia', 'Aeneas']}, {id: 'Hermione', parents: ['Helen', 'Menelaus']} ] ] // 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 = { height: d3.max(nodes, n => n.y) + node_height/2 + 2*padding, node_height, node_width, bundle_width, level_y_padding, metro_d } // add node -> child references nodes.forEach(n => n.children = []) nodes.forEach(n => n.parents.forEach(p => p.children.push(n))) nodes.forEach(n => n.leaf = n.children.length === 0) return {levels, nodes, nodes_index, links, bundles, layout} }34:[] 30:{"id":"f00c20792d510e1b","slug":"tangled-tree-visualization-ii-w-adjusted-leaf-labels","title":"Tangled tree visualization II w/ Adjusted Leaf Labels","thumbnail":"4fd68188e158c6f81659738458e24433d0a4cc6ba626189d79af33f5aec863f1","access_level":"public","create_time":"$D2019-03-01T15:22:17.332Z","update_time":"$D2019-03-01T15:36:59.988Z","view_time":null,"first_public_time":"$D2019-03-01T15:37:10.372Z","fork":{"id":"4cab522856cbfdde","slug":"tangled-tree-visualization-ii","title":"Tangled tree visualization","owner":{"id":"26c2ccc018e1ea02","login":"nitaku","name":"Matteo Abrate"}},"stars":5,"starred":false,"owner":{"type":"team","id":"80a52c093fcb91a5","login":"zzzev","name":"Zev Youra","avatar_url":"https://avatars-next.observableusercontent.com/e46dd464d5c1b415fc4f637fee1048757ab80e9001f6117871bd08c8aff84009","tier":"starter_2024"},"version":449,"publish_version":449,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b24aed4afb24eb1","login":"zzzev","name":"Zev Youra","avatar_url":"https://avatars-next.observableusercontent.com/e46dd464d5c1b415fc4f637fee1048757ab80e9001f6117871bd08c8aff84009","tier":null}],"members":[{"type":"individual","id":"1b24aed4afb24eb1","login":"zzzev","name":"Zev Youra","avatar_url":"https://avatars-next.observableusercontent.com/e46dd464d5c1b415fc4f637fee1048757ab80e9001f6117871bd08c8aff84009","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Tangled tree visualization II w/ Adjusted Leaf Labels","cells":[{"id":0,"value":"md`# Tangled tree visualization II w/ Adjusted Leaf Labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"md`### What's Different in this Fork\n\nThis is only a small modification of the forked notebook, which positions leaf labels in line with the leaf node instead of above it. I think this makes 95% of the leaf nodes look better, but it does cause a few labels to be slightly crowded (e.g. \"Adonis\" and \"Aphrodite\" on the fifth level).\n\n#### Original Introduction Text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"d3 = require('d3-scale', 'd3-scale-chromatic', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"