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 https://learnforeverlearn.com/ancestors/). 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
https://learnforeverlearn.com/ancestors/

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.