2d:null 2e:["$","title",null,{"children":"Ameya Patil Family Tree | Ameya Patil | Observable"}] 33:T1351,function update(event, source) { const duration = event?.altKey ? 2500 : 250; // hold the alt key to slow down the transition const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margins.marginTop + margins.marginBottom; const transition = svg.transition() .duration(duration) .attr("height", height) .attr("viewBox", [-margins.marginLeft, left.x - margins.marginTop, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) nodeEnter.append("circle") .attr("r", 6) .attr("fill", function(d) { return details[d.data.id].sex == "M" ? "#2ce2f2" : "#fa9fb5" }) .attr("stroke", "#000") .attr("stroke-width", d => d._children ? 2 : 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(event, d); }); nodeEnter.append("text") .attr("dy", "-1.8em") .attr("font-size", "1.2em") // .attr("x", d => d._children ? -6 : ) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(function(d) { return details[d.data.id].name }) .on("mouseover", function(event, d) { // d3.select(this) // .transition() // .duration(200) // .style("stroke-width", 1); tooltip.display(d, false) }) .on("mousemove", function(event, d) { tooltip.move(event) }) .on("mouseout", function(event, d) { // d3.select(this) // .transition() // .duration(200) // .style("stroke-width", 0); tooltip.hide() }) nodeEnter.append("text") .attr("dy", "1.8em") .attr("font-size", "1.2em") // .attr("x", d => d._children ? -6 : ) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text(function(d) { var str = "" var marriedTo = details[d.data.id].marriedTo for (var i=0; i `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); }34:T53e,class Tooltip { constructor(selection, callback) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this._callback = callback; this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, spouse) { this.selection.style("display", "block").html(this._callback(datum, spouse)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }35:[{"id":"cd2c37d6d9fdd6572b06fbc219e6a450c39372d1b73b91dc0871512df899c011fd94e04914f4685e4b89702d84bfc5e019a1eadc84b16f32b52031599a109800","href":"https://static.observableusercontent.com/files/cd2c37d6d9fdd6572b06fbc219e6a450c39372d1b73b91dc0871512df899c011fd94e04914f4685e4b89702d84bfc5e019a1eadc84b16f32b52031599a109800","name":"ameya_maternal-2.json","type":"application/json","lastModified":1726027563964.022,"size":8564},{"id":"19a824bdf823883e782f296a9060ad5e04ad60fe66571aa50b92b8ba34a134c5d216bea029f33186f4b53e595c037bfc4d1f4518189d651a0828d163345ce9c8","href":"https://static.observableusercontent.com/files/19a824bdf823883e782f296a9060ad5e04ad60fe66571aa50b92b8ba34a134c5d216bea029f33186f4b53e595c037bfc4d1f4518189d651a0828d163345ce9c8","name":"family_tree-7@2.csv","type":"text/csv","lastModified":1726027828962.396,"size":5636},{"id":"e5d3adaee593787f99e164a7b0c9b395473ee7a0bc2de9900f4cb0812df4c21bcf991f01acca9ac9443b942e165503dcf0b4cf5a848056706396150d1d543279","href":"https://static.observableusercontent.com/files/e5d3adaee593787f99e164a7b0c9b395473ee7a0bc2de9900f4cb0812df4c21bcf991f01acca9ac9443b942e165503dcf0b4cf5a848056706396150d1d543279","name":"ameya_paternal@6.json","type":"application/json","lastModified":1705114649559.534,"size":11707}] 31:{"id":"e92ab45ef3f17f10","slug":"ameya-patil-family-tree","title":"Ameya Patil Family Tree","thumbnail":"1426898358b18f87712bb79519dd1e95448267d55bd530ed0b5a375a8381e7b5","access_level":"public","create_time":"$D2024-01-01T11:15:16.551Z","update_time":"$D2024-09-11T04:10:28.393Z","view_time":null,"first_public_time":"$D2024-01-01T11:15:16.551Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aeef0a5bf705bfdb","login":"ameyabp","name":"Ameya Patil","avatar_url":"https://avatars-next.observableusercontent.com/29a3d196e70adef9387be2b989575ce7be3de4c516965ed39fc86e0deb5cc722","tier":"starter_2024"},"version":320,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c9d80d9dc12c834b","login":"ameyabp","name":"Ameya Patil","avatar_url":"https://avatars-next.observableusercontent.com/29a3d196e70adef9387be2b989575ce7be3de4c516965ed39fc86e0deb5cc722","tier":null}],"members":[{"type":"individual","id":"c9d80d9dc12c834b","login":"ameyabp","name":"Ameya Patil","avatar_url":"https://avatars-next.observableusercontent.com/29a3d196e70adef9387be2b989575ce7be3de4c516965ed39fc86e0deb5cc722","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Ameya Patil Family Tree","cells":[{"id":313,"value":"# Ameya Patil Family Tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"viewof which = Inputs.radio([\"Paternal\", \"Maternal\"], {value: \"Maternal\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"## **${which}** Family Tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"{ \n // Do the first update to the initial configuration of the tree — where a number of nodes\n // are open (arbitrarily selected as the root, plus nodes with 7 letters).\n root.x0 = dy / 2;\n root.y0 = 0;\n root.descendants().forEach((d, i) => {\n d.id = i;\n d._children = d.children;\n if (d.depth != 0) d.children = null;\n });\n \n update(null, root);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"margins = ({\n width: width,\n marginLeft: 100,\n marginRight: 10,\n marginTop: 100,\n marginBottom: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"root = d3.hierarchy(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"// Rows are separated by dx pixels, columns by dy pixels. These names can be counter-intuitive\n// (dx is a height, and dy a width). This because the tree must be viewed with the root at the\n// “bottom”, in the data domain. The width of a column is based on the tree’s height.\ndx = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"dy = (margins.width - margins.marginRight - margins.marginLeft) / (1 + root.height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"svg = {\n d3.select(\"tree-svg\").select(\"#gLink\").remove();\n d3.select(\"tree-svg\").select(\"#gNode\").remove();\n\n return d3.select(\"#tree-svg\")\n .attr(\"width\", width)\n .attr(\"height\", dx)\n .attr(\"viewBox\", [-margins.marginLeft, -margins.marginTop, margins.width, dx])\n .attr(\"style\", \"max-width: 100%; height: auto; font: 10px sans-serif; user-select: none;\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"gLink = svg.select(\"#glink\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#555\")\n .attr(\"stroke-opacity\", 0.4)\n .attr(\"stroke-width\", 1.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"gNode = svg.select(\"#gnode\")\n .attr(\"cursor\", \"pointer\")\n .attr(\"pointer-events\", \"all\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"// Define the tree layout and the shape for links.\ntree = d3.tree().nodeSize([dx, dy]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"tooltip = {\n const div_tooltip = d3.select(\"div.main\")\n .select(\"#tooltip\")\n .classed(\"tooltip\", true);\n \n // create a new tooltip,\n // passing it a selection for the tooltip's DOM element.\n const tooltip = new Tooltip(div_tooltip, setTooltipContent);\n\n return tooltip\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"function setTooltipContent(d, spouse) {\n var str = \"\"\n const deets = spouse ? details[details[d.data.id].marriedTo[0]] : details[d.data.id]\n if (deets.aka) {\n str += \"aka \" + deets.aka + \"
\"\n }\n if (deets.born != -1) {\n str += \"born \" + deets.born + \"
\"\n if (deets.death == -1) {\n str += \"expired
\"\n }\n else if (deets.death != 0) {\n str += \"expired \" + deets.death + \"
\"\n }\n else {\n str += \"age \" + (new Date().getFullYear() - deets.born).toString() + \"
\"\n }\n }\n\n return str\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = {\n gNode.selectAll(\"g\").remove();\n gLink.selectAll(\"path\").remove();\n return which == \"Paternal\" ? FileAttachment(\"ameya_paternal@6.json\").json() : FileAttachment(\"ameya_maternal-2.json\").json()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"family = DuckDBClient.of({\n details: FileAttachment(\"family_tree-7@2.csv\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"details = {\n var dict = ({})\n const rows = await family.query(`SELECT * FROM details`)\n for (var i=0; i