Family Graph (Svelte)

A compact, repurposable family-graph viewer for complex family histories. Unlike traditional “trees”, this graph is built with intra‑family marriages/relations in mind - connections where relatives may appear in multiple roles - like cousins getting married, or families with second‑cousins and similar patterns. These forms of endogamy and close-kin marriages are not rare outliers: they are common in regions including South Asia, the Middle East, North Africa, and parts of Europe, for cultural, social, or historical reasons. The app renders such structures cleanly using linked duplicate nodes where required and provides fast search and path highlighting.

Why this family-graph?

• Handles intra‑family marriages/loops: people can appear in multiple places via linked duplicate nodes, keeping edges readable.
• Search and relation insights: select one or two people to highlight their lineages and common paths/ancestors.
• Flexible focus: highlight paths related to a single selected node; expand/minimize as needed or minimize everything excluding current selection.
• Smooth interaction: pan/zoom (mouse, trackpad, touch/pinch) with anchored zoom; works well for very large graphs.

Live example

Note: The provided live example uses the Lannister family from Game of Thrones as an exaggerated, complex showcase. This illustrates the viewer's ability to handle loops, intra-family relations, and tangled relationships that often appear in notable fictional or historical dynasties.

• https://code.eternalthinker.co/family-graph/

Duplicate nodes for different roles

Highlight lineage

Relation search

Minimise subtrees

Multiple partners

External partner marries multiple family members

Quick start

• Install: npm install
• Run: npm run dev
• Data lives at: src/routes/data/family.json

Editing your data (family.json)

• Root shape:
  • name: string (project/family label)
  • root: string (the id of the root person to render from)
  • persons: Person[]
• Person:
  • id: string (unique)
  • name: string
  • gender: "male" | "female"
  • alive: boolean
  • Optional: birthDate (string), deathDate (string), nickname (string)
  • Optional: partners: PartnerLink[]
• PartnerLink:
  • id: string (partner’s person id)
  • relation: "married" | "divorced" | "together" | "engaged"
  • Optional: children: string[] (array of child person ids)

Minimal example

{
  "name": "Lannister",
  "root": "tywin_lannister",
  "persons": [
    {
      "id": "tywin_lannister",
      "name": "Tywin Lannister",
      "gender": "male",
      "alive": false,
      "partners": [
        {
          "id": "joanna_lannister",
          "relation": "married",
          "children": [
            "jaime_l",
          ]
        }
      ]
    },
    {
      "id": "joanna_lannister",
      "name": "Joanna Lannister",
      "gender": "female",
      "alive": false
    },
    {
      "id": "jaime_l",
      "name": "Jaime Lannister",
      "gender": "male",
      "alive": true
    }
  ]
}

Tips for complex graphs

• Intra‑family marriages: simply reference the same person id in multiple partner links; the viewer will render linked duplicates where necessary.
• Ordering: parents should list children ids; ensure every referenced id exists as a person.
• Root: pick a sensible anchor (e.g., an ancestor) in the top-level root field. You can switch roots to see different subgraphs.

Key interactions

• Click to select a person; select two to highlight common ancestry and relation paths.
• Use the header actions to expand only selected paths or expand all.
• Pan by drag; zoom with ctrl/⌘ + wheel, trackpad pinch, or the header slider.

Deploying

• The app is preconfigured for static builds (adapter‑static). You can deploy to any static host (GitHub Pages, Netlify, etc.).
• Build: npm run build (outputs to build/ by default).

Notes

• Dates are strings and can be free‑form year text; they’re shown when “Show dates” is enabled in the Help → Settings panel.
• The viewer is data‑agnostic; you can swap in any dataset shaped like family.json.

Contributions & reuse

• Fork and adapt for your family or community histories. PRs for improvements are welcome.