Join the DZone community and get the full member experience.Join For Free
A family tree is a type of diagram used for showcasing a person’s ancestry and generational bonds in a compelling tree-like structure. This data visualization tool is widely utilized in historical, genealogical, social, or medical web projects.
Numerous styling options allow modifying the look and feel of the diagram according to your needs via the API or CSS. The DHTMLX control can be seamlessly integrated into web apps based on popular JS frameworks (Angular, React, Vue.js).
Learn how to build such family trees and other tree diagrams with DHTMLX in this step-by-step guide.
But more interestingly, DHTMLX Diagram comes with live editors enabling you to easily build family trees and other diagrams and edit them on-the-go without manipulating code. The left panel of the editor allows selecting necessary shapes with drag-and-drop. The right panel offers various editing settings for the selected shape: dimensions/positioning, coloring, stroke, and content modification options. The editor can be adjusted to the needs of your project. For example, it is possible to add custom shapes in the editor and set any parameters for their editing.
If you are working with a sizable diagram, you won’t even need to think about how to arrange it in a better way, as the auto-layout algorithm will do the job for you. Moreover, some handy functionalities include expanding and collapsing family tree branches, zooming in and out, and searching for a particular shape using the search field that will make your interactions with large diagrams more productive and less time-consuming. The completed family tree diagram can be exported to PDF, PNG, or JSON format.
Benefiting from all-encompassing documentation, including detailed guides and interactive samples, you will be able to quickly learn the main concepts of the DHTMLX Diagram and get the best out of its rich feature set.
Trial version: DHTMLX Diagram
Price: from 599$ to 2,899$
yFiles for HTML
When it comes to visualizing individuals in family tree diagrams, yFiles for HTML offers ready-made geometric shapes with the support for color-coding specifying the individual’s gender and multiple text labels to make your diagram more info-packed. Editing features such as zooming, panning, undo/redo help to apply any changes in your diagram with no trouble.
Moreover, you can also take advantage of a special-purpose FamilyTreeLayout algorithm that provides nontrivial approaches to arranging the members of families. For instance, the algorithm factors in types of family tree nodes (based on gender) when configuring the diagram structure.
Trial version: yFiles for HTML
Price: from $11,900.00
GoJS is a TypeScript-based solution intended for producing diagrams and graphs of varying complexity – from basic tree-type diagrams to comprehensive industrial diagrams. For example, you can create a traditional family tree with collapsible levels and all related attributes or come up with a genogram - an extended version of a family tree showing relationships within a given family in more detail.
Part of the Japanese Imperial Family tree. Check the full demo.
Сustomizable templates and layouts ensure time savings when constructing a diagram of your choice. Besides, GoJS provides a range of features such as in-place text editing, tooltips, context menus, palettes, overviews, etc., which will improve user experience. There are also special tools that can be employed to perform customizations and animate different elements of your diagram.
Technical descriptions, full API documentation, and multiple interactive samples will give you an insight into the technical peculiarities of GoJS and give you the idea of how to start with it in your apps.
Trial version: GoJS
Price: from 3,495$ to 9,950$
Basic Primitives Diagram
Basic Primitives is a diagramming JS library focused on depicting family trees and org charts as well as hierarchies, PERT charts, technology trees, and business ownership diagrams of any size. This web-based tool is especially convenient for reporting and analytics.
All diagrams created with Basic Primitives are rendered in major web browsers using popular design technologies (SVG, Canvas).
If you commonly utilize React, Angular JS, and jQuery, you won’t have to make up any workarounds for adding Basic Primitives diagrams to your app. To simplify the whole integration process, you can resort to the demos, use cases, and API references provided by the development team.
Trial version: Basic Primitives
Price: from 427$ to 2,308$
When creating your first family tree with OrgChart JS, you can take advantage of predefined templates. It is also possible to create custom templates or apply multiple templates simultaneously in one diagram. Moreover, OrgChart JS allows implementing an unlimited number of subtrees in one chart object. If you have certain requirements regarding the appearance of your diagram, custom CSS will help to make the necessary adjustments.
The built-in edit form is another useful feature of this plugin that enables you to quickly update the diagram or its elements. Navigation features and expand/collapse options will aid you in working with data-intensive diagrams. If you want to share your family tree with others, OrgChart JS provides the following exporting formats: PDF, PNG, SVG, CSV.
Trial version: OrgChart JS
Price: from 399$ to 4,999$
Diagrams produced with dTree can be examined via the Treehouse online viewer that allows hosting your family tree diagram without the need to create a website or interact directly with dTree. It takes data from GitHub and shows it in a good-looking format. Please pay attention that before utilizing this JS library in your app, it is necessary to load D3 v4.x and lodash v4.x. Learn more about the installation and usage of this simple library on its GitHub page.
Price: Free (MIT license)
Opinions expressed by DZone contributors are their own.