Skip to main content
100%

Tree diagram using flat data with v7

✓ Published0🌍 Public
Dd3noob
Last edited Jun 19, 2021
Created on Jun 19, 2021

This example shows a tree diagram with five nodes arranged in a parent-child hierarchy, rendered as circles and labeled text connected by curved links in an SVG. The diagram is built from flat data—an array of objects with `name` and `parent` properties—which is converted into a nested hierarchy using `d3.stratify()`. The layout is computed with `d3.tree()` and `d3.hierarchy()`, while SVG paths and groups are appended manually. It uses D3.js version 7 and is adapted from the D3 Tips and Tricks book.

AI-generated description

This is a tree diagram that used data from a 'flat' format.

This is designed to be used as part of documenting an update to the book D3 Tips and Tricks to version 7 of d3.js.

mit Licensed

Similar vizzes