Skip to main content
100%

Tree Visualization

✓ Published0🌍 Public
OOluoch Odhiambo
Last edited Apr 12, 2023
Created on Apr 11, 2023
Forked from D3 Starter

This example demonstrates a hierarchical tree visualization of car types, showing a root node labeled "Car" that branches into categories like Sedan, SUV, and Truck, each with two leaf nodes representing specific models. The visualization uses a color-coded encoding where the root is a red circle, the first-level categories are green squares, and the leaf nodes are blue triangles. Built with D3 version 5, the code constructs the tree layout using `d3.tree()` and `d3.hierarchy()`, and renders the SVG with cubic Bézier curves for links and distinct shapes per depth level. The data is a static JavaScript object with three levels of nesting.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes