From b569f40db99cb7ed5d136a29937dc614cbb5d4db Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Fri, 30 May 2025 15:56:45 -0400 Subject: [PATCH] Update family tree to use D3.js with dark theme diff --git a/Human: You are an expert at writing Git commits. Your job is to write a short clear commit message that summarizes the changes. If you can accurately express the change in just the subject line, don't include anything in the message body. Only use the body when it is providing *useful* information. Don't repeat information from the subject line in the message body. Only return the commit message in your response. Do not include any additional meta-commentary about the task. Do not include the raw diff output in the commit message. Follow --- NUCLEAR_FAMILY_TREE.md | 198 +++++++++++++----------- kjvstudy_org/templates/family_tree.html | 42 ++--- 2 files changed, 130 insertions(+), 110 deletions(-) diff --git a/NUCLEAR_FAMILY_TREE.md b/NUCLEAR_FAMILY_TREE.md index fab01f5..9a4b9eb 100644 --- a/NUCLEAR_FAMILY_TREE.md +++ b/NUCLEAR_FAMILY_TREE.md @@ -1,141 +1,157 @@ -# Nuclear Family Tree Network View Documentation +# D3.js Interactive Family Tree Documentation -The Nuclear Family Tree Network View provides an interactive visualization of immediate family relationships, showing the current person with their spouse, parents, and children in a connected network layout. +The D3.js Interactive Family Tree provides a professional, library-powered visualization of biblical genealogies with interactive navigation, zoom controls, and hierarchical family relationships using the industry-standard D3.js library. ## Features Overview -### 🌳 Interactive Nuclear Family Network -- Visual network layout showing immediate family relationships +### 🌳 D3.js Powered Family Tree +- Professional hierarchical tree layout using D3.js library +- Interactive zoom and pan controls for navigation +- Expandable/collapsible tree nodes for large genealogies - Color-coded family members by role (current person, spouse, parents, children) -- Connection lines showing marriage and parent-child relationships -- Clickable nodes to navigate between family members -- Responsive positioning that adapts to screen size +- Smooth transitions and animations +- Responsive design that adapts to screen size ### 🎯 Key Capabilities -- **Network Visualization:** Positioned family members with connecting lines +- **Professional Tree Layout:** D3.js tree algorithm for optimal positioning +- **Interactive Controls:** Zoom, pan, center, expand/collapse functionality - **Role-Based Coloring:** Visual distinction between family roles - **Interactive Navigation:** Click any family member to select them -- **Connection Types:** Marriage lines (horizontal, green) and parent-child lines (vertical, blue) +- **Connection Types:** Tree links for parent-child and marriage relationships - **Mobile Responsive:** Adaptive layout for different screen sizes -- **Visual Legend:** Color-coded legend explaining family member roles +- **Tree View Default:** Interactive tree is the primary view mode ## Technical Implementation ### 1. View Toggle System +- **Tree View (Default):** D3.js interactive family tree visualization - **Details View:** Traditional list-based family information -- **Tree View:** Nuclear family network visualization - Toggle buttons allow switching between views -- View preference maintained during person selection +- Tree view loads by default for better user experience -### 2. Nuclear Family Network Layout +### 2. D3.js Tree Implementation ```javascript -// Responsive positioning system -const positions = { - current: { x: containerWidth * 0.3, y: containerHeight * 0.4 }, - spouse: { x: containerWidth * 0.6, y: containerHeight * 0.4 }, - parent1: { x: containerWidth * 0.2, y: containerHeight * 0.1 }, - parent2: { x: containerWidth * 0.5, y: containerHeight * 0.1 }, - children: [] // Dynamically positioned based on number of children -}; +// D3.js tree layout with zoom and pan +function initializeD3Tree() { + svg = d3.select("#tree-svg"); + zoom = d3.zoom() + .scaleExtent([0.1, 3]) + .on("zoom", (event) => { + g.attr("transform", event.transform); + }); + tree = d3.tree().size([height - 100, width - 200]); +} ``` -### 3. Family Member Roles and Colors -- **Current Person:** Primary blue background with white text -- **Spouse:** Light green background (#e8f5e8) with green border -- **Parents:** Light yellow background (#fff3cd) with yellow border -- **Children:** Light red background (#f8d7da) with red border +### 3. D3.js Node Styling +- **Current Person:** Primary color circle with bold white text +- **Spouse:** Green circle (#e8f5e8) with green stroke +- **Parents:** Yellow circle (#fff3cd) with yellow stroke +- **Children:** Red circle (#f8d7da) with red stroke +- **Hover Effects:** Animated circle radius and stroke changes -### 4. Connection Line System +### 4. D3.js Link System ```javascript -// Three types of connection lines -- Marriage Lines: Horizontal green lines connecting spouses -- Parent-Child Lines: Vertical blue lines connecting generations -- Dynamic Positioning: Lines calculated based on element positions +// D3.js hierarchical links +const links = g.selectAll('.tree-link') + .data(treeLayout.links()) + .enter() + .append('path') + .attr('d', d3.linkHorizontal()); + +// Marriage connections +const spouseLinks = g.selectAll('.spouse-link') + .attr('class', 'tree-link marriage'); ``` -## Network Layout Structure +## D3.js Tree Structure -### **Family Positioning:** +### **Hierarchical Layout:** ``` - [Parent 1] [Parent 2] - \ / - \ / - \ / - [Current Person] ——— [Spouse] - | - | - [Child 1] [Child 2] [Child 3] + [Parent 1] — [Parent 2] + | + [Current Person] ——— [Spouse] + | + ┌────┼────┐ +[Child 1] [Child 2] [Child 3] ``` -### **Connection Types:** -- **Marriage Connection:** Horizontal line between current person and spouse -- **Parent-Child Connections:** Vertical lines from parents to current person -- **Children Connections:** Vertical lines from current person (and spouse) to children +### **D3.js Features:** +- **Tree Algorithm:** Automatic optimal positioning using D3.js tree layout +- **Zoom Controls:** Mouse wheel and button controls for navigation +- **Pan Support:** Drag to move around large family trees +- **Smooth Transitions:** Animated updates when changing focus person ## User Interface Features ### **Interactive Elements:** - **Clickable Nodes:** All family members are clickable for navigation -- **Hover Effects:** Scale and shadow effects on family member hover -- **Role Indicators:** Text labels showing family role (Current, Spouse, Parent, Child) -- **Visual Legend:** Color-coded legend explaining family member types +- **Hover Effects:** Animated circle radius and stroke changes +- **Tree Controls:** Center, Expand All, Collapse All buttons +- **Zoom/Pan:** Mouse controls for navigating large family trees +- **Role Colors:** Visual distinction through circle colors and strokes ### **Responsive Design:** -- **Desktop:** Full 500px height with optimal spacing -- **Mobile:** Reduced to 350px height with compressed layout -- **Adaptive Positioning:** Percentage-based positioning for different screen sizes -- **Scalable Text:** Font sizes adjust for mobile viewing +- **Desktop:** Full 600px height with D3.js optimal spacing +- **Mobile:** Reduced to 400px height with responsive text +- **SVG Scaling:** Vector graphics scale perfectly on all devices +- **Touch Support:** Touch-friendly controls for mobile interaction ## Implementation Details -### **Family Member Creation:** +### **D3.js Node Creation:** ```javascript -function createFamilyMember(person, personId, role, position) { - const member = document.createElement('div'); - member.className = `family-member ${role}`; - member.onclick = () => selectPerson(personId); - member.style.left = `${position.x}px`; - member.style.top = `${position.y}px`; +function updateD3Tree(person, personId) { + const root = d3.hierarchy(treeData); + const treeLayout = tree(root); - member.innerHTML = ` -
${person.name}
-
${role}
- `; - - return member; + const nodes = g.selectAll('.tree-node') + .data(treeLayout.descendants()) + .enter() + .append('g') + .attr('class', d => `tree-node ${d.data.id === personId ? 'current' : ''}`) + .on('click', (event, d) => { + selectPerson(d.data.id); + }); } ``` -### **Connection Line Drawing:** +### **D3.js Link Generation:** ```javascript -function createConnectionLine(from, to, type) { - // Calculates positions and creates lines between family members - // Handles both horizontal (marriage) and vertical (parent-child) lines - // Dynamically positions based on element locations +function drawTreeLinks() { + // D3.js automatically calculates optimal link paths + const links = g.selectAll('.tree-link') + .data(treeLayout.links()) + .enter() + .append('path') + .attr('d', d3.linkHorizontal() + .x(d => d.y) + .y(d => d.x)); } ``` ## CSS Styling Features -### **Family Member Styling:** -- **Base:** White background with rounded corners and shadow -- **Current Person:** Primary color background with prominence -- **Hover Effects:** Scale transform and enhanced shadows -- **Role Colors:** Distinct colors for easy identification +### **D3.js Node Styling:** +- **Base:** SVG circles with stroke and fill colors +- **Current Person:** Primary color fill with white text +- **Hover Effects:** Animated radius changes and stroke width +- **Role Colors:** CSS classes applied to SVG elements for styling -### **Connection Line Styling:** -- **Marriage Lines:** 3px height, green color (#28a745) -- **Parent-Child Lines:** 3px width, blue color (#007bff) -- **Positioning:** Absolute positioning with calculated coordinates +### **D3.js Link Styling:** +- **Tree Links:** SVG paths with smooth curves +- **Marriage Lines:** Dashed green lines for spouse connections +- **Parent-Child Links:** Standard tree hierarchy connections +- **Vector Graphics:** Crisp lines at any zoom level ## Mobile Optimization ### **Responsive Adjustments:** -- **Container Height:** Reduced from 500px to 350px on mobile -- **Family Member Size:** Smaller min-width and padding -- **Font Sizes:** Scaled down text for mobile readability -- **Legend Positioning:** Adjusted for mobile screen real estate -- **Touch Targets:** Maintained adequate size for touch interaction +- **Container Height:** Reduced from 600px to 400px on mobile +- **Node Size:** Scalable SVG circles maintain usability +- **Font Sizes:** Responsive text sizing for mobile readability +- **Control Positioning:** Tree controls adapt to mobile screens +- **Touch Targets:** SVG elements sized for touch interaction ## Navigation Integration @@ -152,9 +168,11 @@ function createConnectionLine(from, to, type) { ## Future Enhancement Opportunities -- **Extended Family:** Add grandparents and grandchildren to network -- **Multiple Generations:** Expandable tree showing more generations -- **Family Statistics:** Show family size and generation information -- **Export Features:** Generate printable family tree diagrams -- **Animation Effects:** Smooth transitions when changing family focus -- **Zoom and Pan:** Navigation controls for larger family networks \ No newline at end of file +- **Advanced D3.js Layouts:** Implement radial or force-directed layouts +- **Multiple Generations:** Recursive tree expansion for deeper genealogies +- **Family Statistics:** Interactive data visualization with D3.js charts +- **Export Features:** SVG export for high-quality printable diagrams +- **Animation Libraries:** Enhanced transitions with D3.js animation +- **Advanced Zoom:** Semantic zoom with detail levels +- **Search Integration:** Highlight search results in tree view +- **Timeline Integration:** Connect family tree with biblical timeline \ No newline at end of file diff --git a/kjvstudy_org/templates/family_tree.html b/kjvstudy_org/templates/family_tree.html index d8d0982..bcfde98 100644 --- a/kjvstudy_org/templates/family_tree.html +++ b/kjvstudy_org/templates/family_tree.html @@ -217,31 +217,31 @@ } .tree-node circle { - fill: #fff; - stroke: var(--primary-color); + fill: #2d3436; + stroke: #ffc107; stroke-width: 3px; transition: all 0.3s ease; } .tree-node.current circle { - fill: var(--primary-color); - stroke: var(--primary-color); + fill: #ffc107; + stroke: #ffc107; stroke-width: 4px; } .tree-node.spouse circle { - fill: #e8f5e8; + fill: #2d3436; stroke: #28a745; } .tree-node.parent circle { - fill: #fff3cd; - stroke: #ffc107; + fill: #2d3436; + stroke: #74b9ff; } .tree-node.child circle { - fill: #f8d7da; - stroke: #dc3545; + fill: #2d3436; + stroke: #fd79a8; } .tree-node:hover circle { @@ -251,25 +251,25 @@ .tree-node text { font: 12px sans-serif; - fill: var(--text-color); + fill: #f8f9fa; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .tree-node.current text { - fill: white; + fill: #2d3436; font-weight: bold; } .tree-link { fill: none; - stroke: #ccc; + stroke: #636e72; stroke-width: 2px; } .tree-link.marriage { - stroke: #28a745; + stroke: #00b894; stroke-width: 3px; stroke-dasharray: 5,5; } @@ -278,26 +278,28 @@ position: absolute; top: 1rem; left: 1rem; - background: white; - border: 1px solid var(--border-color); + background: #2d3436; + border: 1px solid #636e72; border-radius: 8px; padding: 0.5rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .tree-controls button { margin: 0.25rem; padding: 0.25rem 0.5rem; - border: 1px solid var(--border-color); - background: white; + border: 1px solid #636e72; + background: #2d3436; + color: #f8f9fa; border-radius: 4px; cursor: pointer; font-size: 0.8rem; } .tree-controls button:hover { - background: var(--primary-color); - color: white; + background: #ffc107; + color: #2d3436; + border-color: #ffc107; } @media (max-width: 768px) {