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 descriptionThis 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