Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Course 8: Tree Visualization

Public visualization

Viewing a saved revision (read-only)

48281bfe3d944a1b8fbb159fd8a40fe8

D3 Course 8: Tree Visualization

0 stars0🌍 Public
GGabrz
Last edited Apr 6, 2020
Created on Apr 6, 2020
Forked from My Art!

This example shows a node-link tree visualization of world geography, using a hierarchical dataset that groups countries by region and subregion. It displays the tree horizontally, with the root "World" on the left and its descendants branching to the right, each node labeled with its name. The visualization is built with d3.select, d3.json, d3.tree, d3.hierarchy, and d3.linkHorizontal to generate the layout and curved paths. Text labels are positioned and sized based on depth, and the entire SVG is wrapped in a zoomable group via d3.zoom. The styling uses a custom "Do Hyeon" font and an SVG path renderer.

AI-generated description

Data Visualization with D3 course; Tree Visualization

<h3>Creating a Tree Visualization</h3> <table> <th align="left">Topics</th> <tr> <td> <ul> <li><b>Constructing a node-link tree vizualization</b></li> <li><b>Adding text labels to the nodes</b></li> <li><b>Using margin convention</b></li> <li><b>Tweaking label alignment and size</b></li> <li><b>Panning and Zooming</b> <li><b>Using a custom font</b></li> </ul> </td> </tr> </table>