Skip to main content
SimilarExport ZIP
100%

another Tree

✓ Published1🌍 Public
AAdam Sisk
Last edited Jan 18, 2019
Created on Jan 18, 2019
Forked from a Tree

A family genealogy rendered as a horizontal dendrogram uses d3.tree layout and d3.hierarchy to position nodes by depth. Links are drawn with d3.linkHorizontal paths, while text labels display each person's name from the JSON data. The SVG view is interactive, supporting pan and zoom through d3.zoom, and node text shadows improve readability over the teal stroke connections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

a Tree

A hierarchical family tree rendered as a horizontal node-link diagram. The visualization displays ancestor and descendant relationships using curved paths and text labels, with zoom and pan interaction enabled. The code uses D3 v5's `hierarchy`, `tree`, and `linkHorizontal` to compute the layout, `json` to load data from `family.json`, and `zoom` with event transforms for navigation. Nodes are drawn as SVG text elements positioned by the tree layout, while links are rendered as horizontal paths.

AAdam Sisk
88% match
Loading thumbnail…

Trees

This visualization presents a family tree as a horizontal dendrogram, using node labels to display names and colors to encode different individuals. The hierarchical data is rendered using D3.js, with a tree layout and horizontal link generator to create the branching structure. The visualization supports zooming via D3's zoom and event APIs. Text elements are dynamically positioned and scaled by depth, with font sizes decreasing for deeper nodes. The data is loaded from a local JSON file, and the SVG rendering includes custom styling and text shadows.

RRakshithaRao27
86% match
Loading thumbnail…

d3.tree - A Family Tree

This example visualizes a family tree as a static hierarchical diagram, showing genealogical relationships with names, birth and death years, and locations. The graph uses the d3.tree layout to position nodes, while d3.hierarchy structures the JSON data and provides descendant and link methods. Links are drawn as elbow paths with a custom function, and each node displays three text elements for the relative information. The visualization is rendered in SVG with a clean, readable design, demonstrating how d3.v4 handles tree layouts and nested data.

663anp3ca
85% match
Loading thumbnail…

Tree chart

This interactive SVG tree chart displays a family lineage, using a hierarchical node-and-link diagram to show generational relationships from a single ancestor. The chart is generated with the D3.js library version 3.5.17, employing its layout tree and diagonal projection APIs to position nodes. Clicking on a node triggers an animated expansion or collapse of its children, with a 750-millisecond transition. Node circles are cyan with dark borders, and connecting links are coral, all set against a teal background. The data is hardcoded as a JavaScript array of family member names and parent-child links.

CChathurya
84% match
Loading thumbnail…

Family Tree

A D3.js v5 family tree visualizes hierarchical relationships with colored nodes and horizontal links, using SVG rendering and animated transitions. The tree layout (`d3.tree`) positions nodes, while `d3.hierarchy` converts the JSON data from `data.js` into a traversable structure. Users can click nodes to collapse or expand branches, triggering smooth animations via `transition()`. Zoom and pan functionality is implemented with `d3.zoom`, and drag gestures are detected on node groups. Node colors derive from the data object, and labels display names with dynamic sizing based on text length.

MMar-99
84% match
Loading thumbnail…

Family tree - trial

This family tree visualization displays a hierarchical genealogy with names and birth years, using a horizontal tree layout where each node represents a family member and links show parent-child relationships. The example builds an interactive SVG graphic using D3 v5 APIs including `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and `d3.zoom`. It loads family data from an external JSON file, with text labels whose font size decreases at deeper levels. The visualization supports panning and zooming through the zoom behavior, while ancestor nodes are centered and descendants are left-aligned.

AAce
84% match
Loading thumbnail…

Tree

This example shows a family tree with a root node, two main branches, and multiple levels of descendants. Each node is labeled with a name, and the text color matches the color property stored in the data.json file. The tree layout uses d3.tree() and d3.hierarchy() to compute positions, while d3.linkHorizontal() draws the curved connecting paths. The visualization is rendered as SVG, supports zooming via d3.zoom(), and uses font size based on node depth.

Kkollirohit2000
83% match
Loading thumbnail…

Family Tree

This interactive family tree displays hierarchical relationships across multiple generations, with each node labeled by name and colored according to its position in the lineage. The visualization uses D3 v5’s `tree` layout to compute node positions and `linkHorizontal` to draw curved connecting paths, while the `zoom` function enables panning and scaling of the SVG canvas. The included JSON data file provides the family structure, and the code explicitly assigns font sizes based on tree depth and text colors from the data attributes.

Ppavankalyan1507
83% match