Tech Tuesday: Taming React and D3.js to Render Massive Family Trees

Welcome back to Tech Tuesday!

Last week, we dove into the invisible engine of Genealogix: how we use IndexedDB and .gnlx bundles to build a local-first application without a centralized cloud database. But once you have thousands of encrypted, local historical records sitting in the browser, you hit the next massive hurdle.

How do you actually visualize them?

A family history isn't a flat list of rows and columns. It is a massive, complex, endlessly branching graph. To build Genealogix, we needed a visualization library that could handle massive datasets, complex math, and smooth zooming. That led us straight to the heavyweight champion of data visualization: D3.js.

Here is a look at how we combined React and D3 to build the interactive tree views in Genealogix.

The Great React vs. D3 Dilemma If you have ever tried to use D3 inside a React application, you know the fundamental conflict.

React wants total control of the DOM. It expects you to declare state, and it will figure out how to update the HTML efficiently.

D3 also wants total control of the DOM. It expects to grab an element, manually append SVG nodes, and calculate transitions on the fly.

If you let them fight, your app will crash. For Genealogix, we had to define strict boundaries. We use React to handle the application state, the UI panels, and the container wrapper. Then, we use a React ref to hand a specific, empty SVG canvas over to D3.

Once D3 has the canvas, we use its powerful d3-hierarchy modules to run the heavy algorithmic math: calculating the X and Y coordinates for every ancestor, drawing the bezier curves that connect generations, and handling the complex panning and zooming.

Beyond the Standard Pedigree: The Fan and Bowtie Charts

The standard left-to-right pedigree chart is great, but it gets unwieldy when you go back five or six generations. To give users a better way to explore their local data, we expanded our D3 implementation to include more advanced layouts:

1. The Fan Chart

Using D3's arc generators, we built a Fan Chart view. Instead of branching outward infinitely, the home person sits in the center, and ancestors radiate outward in concentric semi-circles. It is a stunning way to visually identify "dead ends" (brick walls) in your research at a single glance.

2. The Bowtie Chart

Sometimes you don't just want to look backward; you want to look at the immediate family unit. We engineered a Bowtie view that places a primary couple in the center, with the paternal ancestors branching to the left, maternal ancestors to the right, and their children hanging below.

Local-First Performance

The biggest benefit of our local-first architecture (which we discussed last week) is speed. Because Genealogix doesn't have to query a remote cloud server every time you pan, zoom, or expand a branch, the D3 visualizations are buttery smooth. The data is already sitting in your browser's IndexedDB, allowing D3 to recalculate the hierarchy and re-render the SVG graph in milliseconds.

Building custom D3 visualizations takes significantly more time than using a drag-and-drop component library, but for a tool designed to map the complexities of human history, the flexibility is worth every line of code.

If you want to see these D3 trees in action, load up your family data at Genealogix.ai and switch between the different views!

Have you wrestled with React and D3 in your own projects? Let me know your favorite approach in the comments!