Family Tree

What it does

Parents, siblings, both wives, six children, their spouses, and all seventeen grandchildren — with two lines carried down to present-day Library Trustees. Every person is a button; every button opens a biography drawn from published works in the Library's collection.

The layout is computed at runtime, so adding a person re-flows the tree instead of forcing anyone to bookkeep coordinates. Dates were checked independently against the Theodore Roosevelt Center, the National Park Service, and contemporary obituaries. That pass corrected two errors in the published books and surfaced a grandchild the sources never named.

What it can do

• 46 people across six generations, laid out automatically
• Biography dialog for every person, closing on Escape
• Two published URLs — a branded standalone page and a bare embed.html for iframing
• JavaScript API: mount(), open(id), fit(), home()
• Shadow DOM isolation with graceful font fallbacks
• CI renders the whole tree headlessly and refuses to deploy if nodes overlap

Make it your own

Start by forking the repository into your own organization. Everything below assumes you are working in your fork, not this one.

1. Fork the repo. Everything published lives in site/.
2. Replace the PEOPLE and FAMILIES objects at the top of site/tr-family-tree.js with your own records. The layout re-flows when you add someone.
3. Rewrite the biography text in the same file, and document your sourcing in docs/SOURCES.md.
4. Swap the masthead and wordmark in site/index.html, committing your own SVG into site/ rather than hotlinking it.
5. Update site/CNAME and point DNS at GitHub Pages. The workflow verifies, then publishes on push to main.
6. Embed by iframing embed.html at an explicit height (700–820px), or drop the script into a page with <div id="tr-family-tree" data-height="780">.

Stuck on a step? Open an issue on the repository. Questions from people adapting these for their own institution are the most useful feedback we get.