Skip to content
Uses d3.js to draw a descendant family tree
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 3dfa4cd Aug 11, 2018

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:

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 using npx and live-server

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
  - name: Tran Van X
    gender: male
    spouse: Pham Thi N
  - name: Tran Thi Y
    gender: female



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


  • 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
You can’t perform that action at this time.