2b:null 2c:["$","title",null,{"children":"Tangled tree visualization II | Trent | Observable"}] 31:T557,chart = svg``32:Tbb4,levelsold = [ [{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']} ] ]33:Te49,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:[{"id":"85d15dbf7b0b0d133563784c93a9d6c1f4ae805fc75ffac13cb3e12c154bdda8e77d3a65f061706a8dea45722906fc1c3e7973a81c73eb9867a1d88f26b27fbe","href":"https://static.observableusercontent.com/files/85d15dbf7b0b0d133563784c93a9d6c1f4ae805fc75ffac13cb3e12c154bdda8e77d3a65f061706a8dea45722906fc1c3e7973a81c73eb9867a1d88f26b27fbe","name":"grilla de contagios - Sheet1@1.csv","type":"text/csv","lastModified":1670038475825.64,"size":1560}] 2f:{"id":"48f690c046714b2e","slug":null,"title":"Tangled tree visualization II","thumbnail":"532d4f026ee1db6bf9bbb617c3aa7d753ca1cf3eb45208da01a42ac798427633","access_level":"public","create_time":"$D2022-12-03T03:34:35.825Z","update_time":"$D2022-12-03T03:34:35.825Z","view_time":null,"first_public_time":"$D2022-12-03T03:34:35.825Z","has_unpublished_edits":null,"fork":{"id":"244fc5481d9bf2bc","slug":"tangled-tree-visualization-ii","title":"Tangled tree visualization II","owner":{"id":"82fa28a4bb8e5238","login":"rusosnith","name":"Andres Snitcofsky"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4ac88e6d09e16296","login":"trentlarson","name":"Trent","avatar_url":"https://avatars-next.observableusercontent.com/d6d0d2f500437b8fc3a638687110343934cc71c9240178058247f95d4e064286","tier":"starter_2024","bio":""},"version":498,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d8680f6e61c7822","login":"trentlarson","name":"Trent","avatar_url":"https://avatars-next.observableusercontent.com/d6d0d2f500437b8fc3a638687110343934cc71c9240178058247f95d4e064286","tier":null,"bio":""}],"members":[{"type":"individual","id":"1d8680f6e61c7822","login":"trentlarson","name":"Trent","avatar_url":"https://avatars-next.observableusercontent.com/d6d0d2f500437b8fc3a638687110343934cc71c9240178058247f95d4e064286","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tangled tree visualization II","cells":[{"id":0,"value":"md`# Tangled tree visualization II`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"levelsAuto = d3.stratify()\n .id(d => d[\"quien\"])\n .parentId(d => d[\"vinculoCon\"])(dataloaded)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"levelsAuto.find(d=> d.id == \"maestra\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"levelsAuto.find(d=> d.id == \"maestra\").parent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"levels = d3.groups(dataloaded, d=>d[\"dia de confirmado\"]).map((d,i)=>{\n return d[1].map(e=>{\n if(i){\n return {\n id : e.quien,\n parents : [levelsAuto.find(d=> d.id == e.quien).parent.id]}\n }else{\n return {\n id : e.quien}\n }\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"dataloaded = FileAttachment(\"grilla de contagios - Sheet1@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"background_color = 'white'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"d3 = require('d3-scale', 'd3-scale-chromatic', 'd3-array', 'd3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"