40:null 41:["$","title",null,{"children":"Tangled tree | Tim Papoulias | Observable"}] 47:T1089,constructTangleLayout = (levels, options={}) => { // 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('-X-'); if (id in index) { index[id].parents = index[id].parents.concat(n.parents); } else { index[id] = { id: id, parents: n.parents.slice(), level: i, span: i - d3.min(n.parents, p => p.level) }; } 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.sort((a,b) => d3.descending(d3.max(a, d => d.span), d3.max(b, d => d.span))) 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 min_family_height = 22; options.c ||= 16; const c = options.c; options.bigc ||= node_width+c; 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 = d3.max(b.parents, d => d.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.yb = l.bundle.y; 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 - 2*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 ? Math.min(options.bigc, l.xb-l.xt, l.yb-l.yt)-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 }; }48:T748,// import { renderChart } from "@nitaku/tangled-tree-visualization-ii" renderChart = (data, options = {}) => { options.color ||= (d, i) => color(i); const tangleLayout = constructTangleLayout(_.cloneDeep(data), options); return svg``; }49:[] 45:{"id":"5bc9d3cd79e1764d","slug":null,"title":"Tangled tree","thumbnail":"1cd46ea3a5279d5be717b3b3a586f8bb4eb17d5730d2efdcaea174a67adaed15","access_level":"public","create_time":"$D2023-01-23T11:19:54.485Z","update_time":"$D2023-01-25T07:37:08.886Z","view_time":null,"first_public_time":"$D2023-01-23T11:19:54.485Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"05e4f1c8116ccc8c","login":"timpap","name":"Tim Papoulias","avatar_url":"https://avatars-next.observableusercontent.com/cb92d4f259b1d32debcbf4a634abc5137c5de467f1793a7d1a7de03770ad0809","tier":"starter_2024","bio":"","following":false},"version":88,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae90a13aaccaccd2","login":"timpap","name":"Tim Papoulias","avatar_url":"https://avatars-next.observableusercontent.com/cb92d4f259b1d32debcbf4a634abc5137c5de467f1793a7d1a7de03770ad0809","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ae90a13aaccaccd2","login":"timpap","name":"Tim Papoulias","avatar_url":"https://avatars-next.observableusercontent.com/cb92d4f259b1d32debcbf4a634abc5137c5de467f1793a7d1a7de03770ad0809","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"248b97e812dda4ec","slug":"experiments","title":"Experiments","owner":{"id":"05e4f1c8116ccc8c","login":"timpap","name":"Tim Papoulias"}},"type":"notebook","body":{"titling":"auto","title":"Tangled tree","cells":[{"id":0,"value":"# Tangled tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"renderChart(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"data = [\n [\n { id: \"MELITA\tGOUDER\" },\n { id: \"ANGELO\tGOUDER\" },\n { id: \"CLAIRE\tBALZAN\" },\n { id: \"LEONE\tBALZAN\" }\n ],\n [\n {\n id: \"ANGELO GOUDER\",\n parents: [\"MELITA\tGOUDER\", \"ANGELO\tGOUDER\"]\n },\n {\n id: \"IMELDA GOUDER\",\n parents: [\"CLAIRE\tBALZAN\", \"LEONE\tBALZAN\"]\n }\n ],\n [\n { id: \"Children\", parents: [\"ANGELO GOUDER\"] },\n { id: \"Siblings\", parents: [\"ANGELO GOUDER\"] },\n { id: \"Household\", parents: [\"ANGELO GOUDER\"] }\n ],\n [\n { id: \"GEMMA\tGOUDER\", parents: [\"Children\"] },\n { id: \"MELANIE\tGOUDER\", parents: [\"Children\"] },\n { id: \"CARLOS\tGOUDER\", parents: [\"Children\"] },\n { id: \"DORIS\tGOUDER\", parents: [\"Siblings\"] },\n { id: \"LUDE\tAXISA\", parents: [\"Siblings\"] },\n { id: \"ELIAS\tGOUDER\", parents: [\"Siblings\"] },\n { id: \"MELITA\tGOUDER (h)\", parents: [\"Household\"] },\n { id: \"ANGELO\tGOUDER (h)\", parents: [\"Household\"] }\n ]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"background_color = 'white'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"