Skip to main content
SimilarExport ZIP
100%

D3 Stratify tree diagram

✓ Published1🌍 Public
NNita
Last edited May 2, 2021
Created on May 2, 2021

This example shows a hierarchical family tree rendered as a dendrogram, with nodes labeled by name and curved links connecting parents to children. The data is embedded as a CSV string and parsed with `d3.csvParse`, then converted into a hierarchy using `d3.stratify`. The layout is computed with the `d3.cluster` tree layout, and links are drawn as SVG paths using a custom `project` function that maps tree coordinates to screen positions. Text labels use varying font sizes based on node depth.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 Stratify tree diagram

This example shows a hierarchical tree diagram built from CSV data using the D3 `tree()` layout and `linkHorizontal` for curved edges. The visualization renders as an SVG within a React component, with nodes and paths styled in a green color scheme. The code loads data from an inline CSV string with parent-child relationships, then applies the D3 `stratify` method to structure the data before passing it to the tree layout. The diagram spans the full width and height of the viewport, with margins applied to position the hierarchical structure.

GGavinDiaper
87% match
Loading thumbnail…

Fork of D3 Stratify tree diagram

This visualization uses the d3.stratify layout to render a small genealogical tree from hardcoded CSV data, displaying the names Eve, Cain, Seth, and their descendants. The tree diagram uses SVG paths generated by d3.linkHorizontal for the connecting links, while text labels are positioned based on the computed x and y coordinates. The code demonstrates a React-compatible approach by importing select and tree from d3, applying a custom stratify function to parse parent-child relationships, and styling the paths with a teal stroke color defined in CSS.

NNita
87% match
Loading thumbnail…

Family Tree

This example visualizes a family tree as a hierarchical node-link diagram. It uses D3 v5’s `d3.stratify()` to convert flat parent-child data into a tree structure, then `d3.tree()` to compute layout positions. Nodes are rendered as SVG circles colored by depth (violet, yellow, red, green), connected by curved cubic Bézier paths, with each person’s name labeled via SVG text. The code runs in a React environment but renders entirely with SVG elements, with the dataset hardcoded in the script.

RRupeshGandham
84% match
Loading thumbnail…

Family tree

This example shows a family tree as a hierarchical node-link diagram, with colored circles representing individuals and curved paths showing parent-child connections. The visualization uses d3.stratify to convert flat data into a hierarchy and d3.tree to compute the layout, rendering nodes as SVG circles colored by their depth in the tree (pink, orange, or red) and labeling each with the person’s name. The code runs in a React environment with D3 v5, drawing all elements as SVG shapes.

Vvegurusaiprathyusha
82% match
Loading thumbnail…

Tree layout

This example uses D3.js version 4 to render a hierarchical tree layout from CSV data. The visualization shows nodes connected by curved paths, where node labels display different data fields depending on their depth level. The tree uses `d3.tree()` to compute positions and `d3.hierarchy()` to structure the nested data. A React version is included, and an alternative HTML file demonstrates dynamic resizing with the `clientWidth` and `clientHeight` properties.

JJoe M
82% match
Loading thumbnail…

Family Tree

This visualization displays a family tree using D3.js v5 within a React framework, rendering nodes and links as SVG elements. The tree structure is built from a flat data list via `d3.stratify()` and laid out with `d3.tree()`, with each family member represented as a colored circle and labeled with their name. Node colors vary by hierarchical depth, using a `marker()` function that assigns a distinct color to each level. Curved connecting paths are drawn using cubic Bezier commands in the `d` attribute, while `text` elements label each descendant.

Ssudhamshu24
81% match
Loading thumbnail…

Family tree using d3.js

This example displays a family tree as a node-link diagram rendered in SVG, with color-coded nodes indicating generational depth and curved paths connecting parents to children. The visualization uses d3.stratify() to structure flat parent-child data and d3.tree() to compute node positions within an 850x300 layout. Circles represent individuals labeled with names, while the code manually constructs cubic Bézier path strings for links and applies level-based fill colors via a custom getColor function.

Ss-pranathi
81% match
Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228
81% match