Family Tree Visualization

This visualization displays a family tree across multiple generations using D3.js.

The data represents a fictional family spanning 6 generations, from a pirate and Spanish princess down to a young boy.

Features

• Displays individuals organized by generation
• Shows spousal relationships with dashed lines
• Shows parent-child relationships
• Includes tooltips with additional information
• Fully responsive design

Implementation Details

The visualization uses:

• D3.js v7 for creating the SVG elements and handling data
• A CSV file for storing the family relationship data
• Custom CSS for styling the tree elements

Data Structure

The data structure follows a simple format:

• Generation: The generational level (1-6)
• Individual: Name of the person
• Spouse: Name of their partner
• Children: Comma-separated list of their children's names