Drawing Family Trees With JavaScript
Learn more about family trees and how to generate lineage diagrams in a web app
A family tree (also called a pedigree chart) is a diagram representing family relationships.
Traditionally, family trees were often represented in conventional tree structures. 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.
Visualizing Individuals in Family Trees
Most family tree visualizations focus on presenting as much information for 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 visualizations as plain geometric shapes out-of-the-box. Additionally, the library supports multiple labels per graph element and thus is an ideal fit for these kinds of data representations.
Automatic Alignment of Family Trees
Tree layout algorithms are the natural choice for arranging traditional family trees. yFiles for HTML provides several, highly customizable tree layout algorithms and is thus an excellent choice for this task.
Hierarchic layout algorithms are the natural choice for arranging directed, acyclic graphs. Indeed, yFiles for HTML’s hierarchic algorithm will produce sensible results for modern family trees.
However, yFiles for HTML also offers a layout algorithm specifically meant for modern family trees - the aptly named FamilyTreeLayout algorithm. Besides the structure of the graph, this domain-specific algorithm takes the type of node (male, female, or family) into account when placing nodes. This results in the best possible layout for modern family trees:
Examples and Source Code
With yFiles, family tree diagrams can be realized on all supported platforms. yFiles for HTML comes with a Family Tree Sample Application. This example shows parts of the family tree of the well-known Kennedy family.
The source code of the Family Tree Sample Application is available on the yWorks GitHub repository and part of the yFiles for HTML package.
Implement Your Own Family Tree
Test the yFiles for HTML diagramming library with a fully functional trial package.
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.
-
Download the trial version of yFiles for HTML for your target platform at the yWorks Customer Center.
-
Navigate to the source directory of the Family Tree Sample Application and inspect its source code.
-
Have a look at the Family Tree Layout Section of the developer’s guide.