Skip to main content
100%

Simple horizontal tree diagram using v7

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

This horizontal tree diagram shows a three-level hierarchy with a root node, two second-level nodes, and two leaf nodes, rendered as white circles with steel-blue outlines connected by curved gray links. Using d3.v7’s `d3.tree` layout and `d3.hierarchy` functions, the code positions nodes along the x-axis and assigns coordinates via the `treemap` call, then draws SVG paths for the links and SVG groups for the nodes, with labels placed to the left or right of each circle depending on whether the node has children. The data is hardcoded inline as a JSON object, and the diagram is built entirely with SVG elements appended to the page body using d3.select and `.append`.

AI-generated description

This is a simple horizontal tree diagram written with d3.js v7.

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