Drawing Family Trees With JavaScript

A family tree (also called a Ancestral chart) is a diagram representing family relationships.

Traditionally, a family tree was often represented in a conventional tree structure. Since a (child) node in a tree may have only one parent node, this approach necessitates certain restrictions with regards to how a family tree may represent the mother and father of an individual. I.e., either both parents of an individual share a single node, or the displayed relationships are restricted to matrilineal or patrilineal descent only.

Modern representations for family relationships bypass the restrictions mentioned above by introducing auxiliary nodes for families. I.e., the individual nodes for mother and father are predecessor nodes of a family node while the nodes representing the couple’s children are successor nodes of the said family node. Since parents must be born before their children, the resulting structures are directed, acyclic graphs.

Usually a family tree visualization is focused on presenting as much information about individuals as possible. Consequently, nodes in the tree often use simple shapes with several labels for the name, date of birth, date of death, etc. Additionally, the nodes are often color-coded for the individuals’ gender.

The yFiles for HTML diagramming library provides out-of-the-box visualizations as plain geometric shapes. Furthermore, the library supports multiple labels per graph element and is therefore an ideal fit for these kinds of data representations.

A Tree layout algorithm is the obvious choice for making a traditional family tree. yFiles for HTML contains highly advanced and customizable tree layout algorithms, thus perfect for family tree drawings.

What other reasons compel us to use yFiles’ layout algorithms for creating professional, stunning and clear ancestry trees?

Hierarchic layout algorithms are the natural choice for arranging directed, acyclic graphs. Indeed, yFiles for HTML’s hierarchical algorithm will produce unparalleled results for creating cutting-edge family trees.

Furthermore, yFiles for HTML also has a layout algorithm specifically designed to create innovative family trees - the aptly named FamilyTreeLayout algorithm.

In addition to the structure of the graph, this domain-specific algorithm also takes the type of node (male, female, or family) into account when creating the graph.

Choosing this layout obviously ensures optimal results when creating a family tree.

With yFiles, you can create a family tree diagram that works on all supported platforms. yFiles for HTML comes with a Family Tree Sample Application.

This example features the family tree of the Kennedys.

The source code of the Family Tree Sample Application is available on the yWorks GitHub repository and part of the yFiles for HTML package.

Go ahead and explore the yFiles for HTML diagramming library with a fully functional trial package and create professional and beautiful family trees!

Enabling you to create even the most complex family diagrams with tons of interactive options and features. Truly the most advanced SDK to create family lineage graphs with minimal coding and endless possibilities!

The family tree layout algorithm works on the standard yFiles graph model and can be used in any yFiles-based project.

Configuring and running a family tree layout algorithm requires only a few lines of code.

Step by step guide to create highly professional and stunning family diagrams: