I have been playing with building a d3.js family tree visualization (available at https://learnforeverlearn.com/ancestors), where you can load your own GEDCOM family tree file, or explore prepackaged sample trees for some famous folks. The other day I realized that I was not really handling pedigree collapse properly under the hood. Visually, things worked, but the calculations related to "duplicate" people in the tree were not right. I needed to more properly keep track of the individual paths between nodes in order to tabulate duplicate folks. In doing this, it also made it easy to dynamically highlight the paths between a person in the tree and the "root" person when the user hovers on a person in the tree. A screenshot of the updated visualization is below (for the poor pedigree collapse "champion" Charles II of Spain).
highlighting the different ways Charles V was related to him.
Charles V was his great-great-great-great grandfather,
his great-great-great grandfather (twice),
and his great-great grandfather
(direct link to this tree in the visualization)
CSS transitions are used for the widths of the curves when they are highlighted, which adds a nice effect. I've also cleaned up the mouseover popup a bit.
Even though it's doing more work now, it still seems fairly snappy when loading and processing the GEDCOM files. This may require more care if I need to get fancier working with the underlying data structures.
No comments:
Post a Comment