mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
Create NUCLEAR_FAMILY_TREE.md
This commit is contained in:
@@ -0,0 +1,160 @@
|
||||
# Nuclear Family Tree Network View 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.
|
||||
|
||||
## Features Overview
|
||||
|
||||
### 🌳 Interactive Nuclear Family Network
|
||||
- Visual network layout showing immediate family relationships
|
||||
- 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
|
||||
|
||||
### 🎯 Key Capabilities
|
||||
- **Network Visualization:** Positioned family members with connecting lines
|
||||
- **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)
|
||||
- **Mobile Responsive:** Adaptive layout for different screen sizes
|
||||
- **Visual Legend:** Color-coded legend explaining family member roles
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### 1. View Toggle System
|
||||
- **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
|
||||
|
||||
### 2. Nuclear Family Network Layout
|
||||
```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
|
||||
};
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
### 4. Connection Line 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
|
||||
```
|
||||
|
||||
## Network Layout Structure
|
||||
|
||||
### **Family Positioning:**
|
||||
```
|
||||
[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
|
||||
|
||||
## 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
|
||||
|
||||
### **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
|
||||
|
||||
## Implementation Details
|
||||
|
||||
### **Family Member 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`;
|
||||
|
||||
member.innerHTML = `
|
||||
<div class="name">${person.name}</div>
|
||||
<div class="role">${role}</div>
|
||||
`;
|
||||
|
||||
return member;
|
||||
}
|
||||
```
|
||||
|
||||
### **Connection Line Drawing:**
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
### **Connection Line Styling:**
|
||||
- **Marriage Lines:** 3px height, green color (#28a745)
|
||||
- **Parent-Child Lines:** 3px width, blue color (#007bff)
|
||||
- **Positioning:** Absolute positioning with calculated coordinates
|
||||
|
||||
## 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
|
||||
|
||||
## Navigation Integration
|
||||
|
||||
### **Person Selection:**
|
||||
- Clicking any family member navigates to that person
|
||||
- Network updates to show new person's family relationships
|
||||
- Maintains view preference (tree vs details)
|
||||
- Updates both views simultaneously
|
||||
|
||||
### **View Synchronization:**
|
||||
- Tree view updates when person changes in details view
|
||||
- Family member selection works from both views
|
||||
- Consistent navigation experience across view types
|
||||
|
||||
## 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
|
||||
Reference in New Issue
Block a user