25:["$","title",null,{"children":"Family Tree | Jean Pierre Ortiz Murcia | Observable"}] 49:T122d,chart = { const width = 1200; // uncomment for responsive width const height = 800; // Get the data (use sample data if real data not loaded yet) const hierarchyData = data; const root = d3.hierarchy(hierarchyData); // More spacious tree layout const treeLayout = d3 .tree() .size([width - 200, height - 300]) .nodeSize([220, 220]) // Increased node spacing .separation((a, b) => (a.parent === b.parent ? 1.5 : 2.5)); treeLayout(root); // Create an SVG const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("font", "14px Arial, sans-serif"); // Zoom group const g = svg.append("g").attr("transform", `translate(${width / 2}, 50)`); // Zoom functionality svg.call( d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([0.3, 3]) .on("zoom", (event) => { g.attr("transform", event.transform); }) ); // Curved links between nodes g.append("g") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-opacity", 0.5) .attr("stroke-width", 2) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkVertical() .x((d) => d.x) .y((d) => d.y) ); // Node creation function const createPersonNode = (group, d) => { // Container for each person/couple const container = group.append("g").attr("class", "person-node"); // Background rectangle with rounded corners container .append("rect") .attr("x", -110) .attr("y", -60) .attr("width", 220) .attr("height", 120) .attr("rx", 10) .attr("ry", 10) .attr("fill", d.data.spouse ? "#f0f0f0" : "#e6f2ff") .attr("stroke", "#666") .attr("stroke-width", 1.5); // Name styling function const formatName = (name) => { // Split name into parts and capitalize first letters return name .split(" ") .map( (part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase() ) .join(" "); }; // Truncate long names const truncateName = (name, maxLength = 20) => { return name.length > maxLength ? name.substring(0, maxLength) + "..." : name; }; // Handling couples if (d.data.spouse) { // Left side (primary person) container .append("text") .attr("x", -100) .attr("y", -30) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "0.9em") .text(truncateName(formatName(d.data.name))) .clone(true) .attr("y", -10) .attr("font-size", "0.8em") .attr("fill", "#666") .text(`Age: ${d.data.age}`); // Right side (spouse) container .append("text") .attr("x", 100) .attr("y", -30) .attr("text-anchor", "end") .attr("font-weight", "bold") .attr("font-size", "0.9em") .text(truncateName(formatName(d.data.spouse.name))) .clone(true) .attr("y", -10) .attr("font-size", "0.8em") .attr("fill", "#666") .text(`Age: ${d.data.spouse.age}`); // Dividing line container .append("line") .attr("x1", -110) .attr("y1", 0) .attr("x2", 110) .attr("y2", 0) .attr("stroke", "#666") .attr("stroke-dasharray", "4,4"); } else { // Single person container .append("text") .attr("x", 0) .attr("y", -30) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", "0.9em") .text(truncateName(formatName(d.data.name))) .clone(true) .attr("y", -10) .attr("font-size", "0.8em") .attr("fill", "#666") .text(`Age: ${d.data.age}`); } // Generation indicator container .append("text") .attr("x", -100) .attr("y", -45) .attr("font-size", "0.8em") .attr("fill", "#666") .text(`Gen: ${d.data.generation || 0}`); }; // Create nodes const node = g .append("g") .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", (d) => `translate(${d.x},${d.y})`) .each(function (d) { createPersonNode(d3.select(this), d); }); // Add tooltips node .append("title") .text( (d) => `Name: ${d.data.name}\nAge: ${d.data.age}\nGeneration: ${ d.data.generation || 0 }` ); return svg.node(); }4a:T44e,// Function to process CSV and generate a family tree function generateFamilyTree(data) { const people = data.map((person) => ({ id: person.id || `person_${data.indexOf(person)}`, name: person.name, age: parseInt(person.age), lastName: extractLastName(person.name), parents: [], children: [], spouse: null, generation: 0 })); // Extract last name from a full name function extractLastName(fullName) { const parts = fullName.split(" "); return parts.length > 1 ? parts[parts.length - 1] : fullName; } // Sort by age (descending) to help identify generations people.sort((a, b) => b.age - a.age); // Infer parent-child relationships based on age and last names inferFamilyRelationships(people); // Find the root nodes (oldest generation with no detected parents) const rootPeople = people.filter((person) => person.parents.length === 0); // Create the root node for the visualization const familyTree = { name: "Family Tree", children: rootPeople.map((person) => createPersonNode(person, people)) }; return familyTree; }4b:T9b5,function inferFamilyRelationships(people) { // First, try to identify possible spouses (similar ages, different last names) for (let i = 0; i < people.length; i++) { for (let j = i + 1; j < people.length; j++) { const person1 = people[i]; const person2 = people[j]; // Potential spouses: similar age (within 10 years) and not already matched if ( Math.abs(person1.age - person2.age) <= 10 && !person1.spouse && !person2.spouse ) { // For a more accurate algorithm, we would check other criteria here // such as marriage records, same addresses, etc. person1.spouse = person2.id; person2.spouse = person1.id; } } } // Now identify parent-child relationships for (let i = 0; i < people.length; i++) { for (let j = 0; j < people.length; j++) { if (i !== j) { const potentialParent = people[i]; const potentialChild = people[j]; // Age difference should be at least 15 years for parent-child const ageDifference = potentialParent.age - potentialChild.age; if (ageDifference >= 15 && ageDifference <= 50) { // Check last name matches or if the spouse's last name matches let lastNameMatch = potentialChild.lastName === potentialParent.lastName; // Check potential mother with different last name if (!lastNameMatch && potentialParent.spouse) { const spouse = people.find((p) => p.id === potentialParent.spouse); if (spouse && potentialChild.lastName === spouse.lastName) { lastNameMatch = true; } } if (lastNameMatch) { // Add parent-child relationship if (!potentialChild.parents.includes(potentialParent.id)) { potentialChild.parents.push(potentialParent.id); potentialParent.children.push(potentialChild.id); } // Add spouse as parent too if exists if (potentialParent.spouse) { const spouse = people.find( (p) => p.id === potentialParent.spouse ); if (spouse && !potentialChild.parents.includes(spouse.id)) { potentialChild.parents.push(spouse.id); spouse.children.push(potentialChild.id); } } } } } } } // Set generation numbers assignGenerations(people); }4c:T4ea,function assignGenerations(people) { // Start with people who have no parents const rootPeople = people.filter((person) => person.parents.length === 0); // Queue for breadth-first traversal const queue = [...rootPeople]; // Process each person while (queue.length > 0) { const current = queue.shift(); // Get children const children = people.filter((p) => current.children.includes(p.id)); for (const child of children) { // Make sure all parents are processed before assigning generation const allParentsProcessed = child.parents.every((parentId) => { const parent = people.find((p) => p.id === parentId); return parent.generation !== undefined; }); if (allParentsProcessed) { // Find max generation of parents const maxParentGen = Math.max( ...child.parents.map((parentId) => { const parent = people.find((p) => p.id === parentId); return parent.generation; }) ); // Set child's generation to parent's + 1 child.generation = maxParentGen + 1; // Add child to queue for processing its children if (!queue.includes(child)) { queue.push(child); } } } } }4d:T639,class Person { constructor(fullName, age) { this.fullName = fullName; this.age = age; let names = fullName.split(" "); if (names.length < 3) { throw new Error("El nombre debe incluir al menos un nombre y dos apellidos."); } // Se asume el formato: [primer nombre] [posibles nombres intermedios] [apellido paterno] [apellido materno] this.firstName = names[0]; this.secondName = names.length > 3 ? names.slice(1, names.length - 2).join(" ") : null; this.firstSurname = names[names.length - 2]; // Apellido paterno this.secondSurname = names[names.length - 1]; // Apellido materno this.parents = []; this.children = []; this.siblings = []; // Propiedades para la visualización this.generation = undefined; this.family = undefined; } // El candidato es padre si su primer apellido coincide con el primer apellido del hijo isFatherOf(child) { let ageDiff = this.age - child.age; return (ageDiff >= 15 && ageDiff <= 70 && this.firstSurname === child.firstSurname); } // El candidato es madre si su primer apellido coincide con el segundo apellido del hijo isMotherOf(child) { let ageDiff = this.age - child.age; return (ageDiff >= 15 && ageDiff <= 70 && this.firstSurname === child.secondSurname); } // Dos personas son hermanos si comparten ambos apellidos y la diferencia de edad es ≤ 20 años isSibling(other) { return ( this.firstSurname === other.firstSurname && this.secondSurname === other.secondSurname && Math.abs(this.age - other.age) <= 20 ); } }4e:[{"id":"7728274ee65c16caed25dca0087f027446dc4a2a35f646d4fd6e687ebb54941c5d12f4dd32998a1bc1ffc4388cf2f44dd84d50f04f986a686119fad82cc36b22","href":"https://static.observableusercontent.com/files/7728274ee65c16caed25dca0087f027446dc4a2a35f646d4fd6e687ebb54941c5d12f4dd32998a1bc1ffc4388cf2f44dd84d50f04f986a686119fad82cc36b22","name":"family.csv","type":"text/csv","lastModified":1741026730432.205,"size":609}] 29:{"id":"4ba3e669d92a54e1","slug":null,"title":"Family Tree","thumbnail":"4038287a8adf33f744a6c8fb57f717ab748a47cdab199d57ff40ab1a5713ba78","access_level":"public","create_time":"$D2025-03-03T18:28:15.000Z","update_time":"$D2025-03-05T15:29:36.469Z","view_time":null,"first_public_time":"$D2025-03-03T18:29:08.717Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cff12fc158b2daec","login":"coffejeancode","name":"Jean Pierre Ortiz Murcia","avatar_url":"https://avatars-next.observableusercontent.com/f21b19693698e89fb0538ac74b39e1202dee9773bd21216a3b4f87508593f335","tier":"starter_2024","bio":"I am a self-taught Frontend developer specialized in the JavaScript ecosystem, fascinated by learning","followed_by_you":false,"follows_you":false},"version":191,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7ceb6bf80c27f2d","login":"coffejeancode","name":"Jean Pierre Ortiz Murcia","avatar_url":"https://avatars-next.observableusercontent.com/f21b19693698e89fb0538ac74b39e1202dee9773bd21216a3b4f87508593f335","tier":null,"bio":"I am a self-taught Frontend developer specialized in the JavaScript ecosystem, fascinated by learning","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b7ceb6bf80c27f2d","login":"coffejeancode","name":"Jean Pierre Ortiz Murcia","avatar_url":"https://avatars-next.observableusercontent.com/f21b19693698e89fb0538ac74b39e1202dee9773bd21216a3b4f87508593f335","tier":null,"role":"editor"},{"type":"team","id":"cff12fc158b2daec","login":"coffejeancode","name":"Jean Pierre Ortiz Murcia","avatar_url":"https://avatars-next.observableusercontent.com/f21b19693698e89fb0538ac74b39e1202dee9773bd21216a3b4f87508593f335","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Family Tree","cells":[{"id":0,"value":"# Family Tree\n\nThe simplest starting point for working with D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"family","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"## Data Processsing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"family = FileAttachment(\"family.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"data = rawFamilyTree","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"rawFamilyTree = generateFamilyTree(\n family.map((person) => ({ name: person.Name, age: person.Age }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"// Recursive function to build D3 node\nfunction buildD3Node(person, allPeople) {\n const node = {\n name: person.name,\n age: person.age,\n id: person.id\n };\n\n if (person.children && person.children.length > 0) {\n node.children = person.children\n .map((childId) => allPeople[childId])\n .filter(Boolean)\n .map((child) => buildD3Node(child, allPeople));\n }\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"function createPersonNode(person, allPeople) {\n const node = {\n name: person.name,\n age: person.age,\n id: person.id,\n generation: person.generation\n };\n\n // Add spouse if exists\n if (person.spouse) {\n const spouse = allPeople.find((p) => p.id === person.spouse);\n if (spouse) {\n node.spouse = {\n name: spouse.name,\n age: spouse.age,\n id: spouse.id\n };\n }\n }\n\n // Add children\n const children = allPeople\n .filter((p) => person.children.includes(p.id))\n // Avoid duplicate children (both parents would list the same child)\n .filter(\n (child, index, self) => index === self.findIndex((c) => c.id === child.id)\n );\n\n if (children.length > 0) {\n node.children = children.map((child) => createPersonNode(child, allPeople));\n }\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null