Family Tree

What It Is

An interactive family tree built as a single standalone web page. It renders family relationships as a navigable node graph using D3.js — expandable by branch, zoomable, and clickable to view individual profiles — driven entirely by a JSON data file with no backend, no database, and no external dependencies.

The goal was simple: a clear visual that anyone in my family can open in a browser and immediately navigate, without needing an account, an app, or a subscription to a genealogy service.

Why I Built It

This was purely my own idea — I wanted a clean, visual way to navigate my wider family and make it easily accessible to any family member who was curious. Commercial genealogy tools tend to require subscriptions or lock data into proprietary formats, neither of which appealed. Building it myself meant I controlled the data, the design, and how it was shared.

It's a small project, and an unfinished one. I'm currently gathering data and photographs from family members and still refining the UX — the tree only spans a few generations at the moment, but the intention is to expand it as far back as the collective family knowledge allows.

Features

• Node Graph

  Collapsible D3.js tree layout — expand and collapse branches to navigate across generations without visual clutter.

• Profiles

  Click any node to view biographical details: name, dates, relationships, and notes stored in the underlying JSON data.

• Zoom & Pan

  Full zoom and pan support for navigating larger trees without losing sight of the broader structure.

• Data-Driven

  The entire tree is driven by a single JSON file — adding new members or branches requires only a data update, no code changes.