Trans Family Tree

• Draws a family tree in a descendant chart format (all descendants of an individual).
• NOW with separated spouse position
• Click on a node to expand/collapse all descendants.
• Drag around to navigate the tree
• Mouse wheel Or Touch pad scroll to zoom

Live site: https://int3ractive.com/family-tree/

Getting Started

You have to run this from a server (can't just open the HTML file). The easiest way to do this, if you have python installed, is to run

# npm
$ npm start
# yarn
$ yarn start

this will start a live Node server at 0.0.0.0:8080 using npx and live-server

• http://localhost:8080

The Tree is stored in author-friendly YAML format. Here's a template:

---
name: Tran Van A
gender: male
bio: Some biography description
image: url to image
spouse: Nguyen Thi B
children:
  - name: Tran Van X
    gender: male
    spouse: Pham Thi N
  - name: Tran Thi Y
    gender: female

Colophon:

• Although this repo is fork from Yakubovich/descendant_tree, I have completely rewritten the source based on this D3 v4 version
• D3 Version 4
• jQuery

Limitations:

• Since this chart is based on D3 Tree layout, we can only display chart with single Root ancestor

TODO:

• Revise "spouse" display
• Search box which will highlight results instantaneously
• Bio overlay
• Auto-generated bio info from statistics (number of sons, daughters, grandchildren, in-laws...)
• Image attachment (in tree and bio)
• Highlight connection path of 2 chosen persons
• Calculate address (danh xưng) between 2 chosen person (cô - cháu, anh em họ, bà - cháu nội...)
• Enhance the theme and style
• Some quick highlight checkboxes:
  • Oldest sons
• Use 'book.html' algorithm to render semantic HTML beneath