Some Notes after Adding New Features to a D3 Visualization

Recently, I added a few new features to a d3-based family tree visualization I have been playing with (available at This note summarizes a few notes from the road.

The Family Tree Visualization I Have been Playing With -
green bars on right axis indicate family/historical events,
which can be viewed by mousing over the axis
Web Workers are Awesome

I'm already doing a lot of stuff when the page is first loaded, and so when I wanted to incorporate family events parsed from the current GEDCOM file, I figured that I should offload this work to web worker. I had used web workers before on the "When Will I Win" lottery apps, and the responsiveness of the web page was amazing while the web worker was cranking along.

While there is a little putzing with getting objects passed to and from the worker, and you've got to import any auxiliary javascript files used by the worker, overall it is a simple process that seems to really pay off.

Keeping the Little Green Bars on the Axis During Pan/Zooms

I am now adding little green svg rect's on the time-axis to alert the user that there family events that might be of interest at those years.

I had to get in and muck with the relevant transforms being applied during pan and zoom to keep these little bars affixed in the same place along the axis. In the end, this seems to work pretty well.

Of course, I need still need to maintain the pixel-size of nodes during zoom, but that is another matter to deal with.

d3 Tree Layout Will Deletes Your Zero-Length Child Arrays

This one really had me scratching my head.

Suddenly, something wasn't working, and when I delved into it I noticed that the array of children for a node in the tree did not exist. This made no sense because I had initialized all of these to zero-length arrays.

Now, I could have gone ahead and just check for the array not existing, but I had no idea how it could have disappeared, and wondered if I was inadvertently deleting it somewhere, or a confused use of this was overwriting it to something else - and I was concerned that if I were causing this to happen there could be other problems later.

After a good bit of debugging later, I realized that d3's tree.nodes method will - for whatever reason - delete any children arrays that are zero-length. Once I saw that (and after I had confirmed that I wasn't messing with this array anywhere), I added a check that guards against the child array not existing.

This was a pretty big whew - experienced while driving through Chattanooga on our way back to Knoxville from Destin.

Surfacing Concurrent Family and Historical Events in a Family Tree Visualization

In playing around with a family tree visualization I have been working on (at, one thing I wanted to do was to display family events, as well as to incorporate accompanying historical information for context.

I was curious to see if the simultaneous viewing of family events and historical information would add an extra level of interest (a la "Hmmm, I never considered that they lived when x was happening."). We have a large bank of mental images of "moments in history", and I am thinking that this imagery can be preattentively tapped to enhance the exploration of a family tree.

I have added the first draft of this to the visualization - screenshot snippet below.

Viewing family events and historical events on a family tree

Family Tree Viz Update: Descendant Trees, Cousin Calculations, Beta testers/hosters welcome

This is a short update of a few things I've added to a family tree visualization tool I've been playing with. The main things discussed here are:

  • the ability to switch to a "descendant tree" for any person in current GEDCOM file or tree
  • for descendant trees, the ability to see how any person is related to another person in the current tree (using the "twice removed", etc. nomenclature)
  • an open offer to any interested beta testers to put this visualization on your own site using your own tree as the default (this consists of just static files and some simple changes to a config file)

Popular Posts