D3 Course 8: Tree Visualization

100%

D3 Course 8: Tree Visualization

✓ Published0🌍 Public

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>

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree Diagram

This interactive tree diagram displays a hierarchical dataset of world geography, starting from the root "World" and branching into continents, regions, and countries. It is rendered using D3 v5 with an SVG output, employing the `tree` layout and `hierarchy` functions. The visualization uses `linkHorizontal` to draw curved links between nodes and supports zooming and panning via the `zoom` behavior. Text labels are positioned based on node coordinates, with font sizes scaling by depth, and the data is loaded from a JSON file.

WWarren-Fitzhenry

87% match

Loading thumbnail…

D3 Course Code Along - Art Tree

This example displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and nodes. The visualization uses D3 v5’s `tree` layout and `hierarchy` to structure the data, with `linkHorizontal` generating the curved connecting paths. The `data.json` file provides the geographic nesting, while the full viewport is sized dynamically using `document.body` dimensions. Paths are styled with a teal fill and white strokes, though the code does not explicitly render node labels or interactive behaviors.

Rrenenadorp

87% match

Loading thumbnail…

D3 Course Code Along - World Countries Tree

This interactive visualization renders the hierarchical structure of world countries as a horizontal tree diagram. It displays continents, subregions, and individual countries in a collapsible layout using SVG elements. The code employs d3.tree and d3.hierarchy to compute the layout, with d3.linkHorizontal generating curved paths for parent-child connections. The visualization uses d3.zoom for panning and scaling, with node labels sized according to depth level. Data comes from the included data.json file, which organizes countries by their geographical regions. The styling applies custom fonts and text shadows for readability.

Rrenenadorp

86% match

Loading thumbnail…

World Countries Tree

This example shows the hierarchical relationships among world countries as a horizontal tree layout. It uses d3.hierarchy and d3.tree to compute node positions, with d3.linkHorizontal generating curved paths for the links. The visualization renders in SVG and supports pan and zoom through d3.zoom. Node labels display country identifiers with font sizes scaled by depth, styled with a Playfair Display font. The data comes from a JSON file loaded via d3.json, and text shadows improve label readability over the teal-colored links.

AAbhinav jha

86% match

Loading thumbnail…

MY TREE

This example presents a hierarchical tree of world regions and countries, using a horizontal dendrogram layout where the root node, “World,” expands through continents like Asia into sub-regions and individual nations. It uses D3 v5’s `tree` and `hierarchy` functions to compute the layout, with links drawn via `linkHorizontal` paths. The visualization supports zooming and panning through the `d3.zoom` API. Node labels are rendered as SVG text elements with font sizes that shrink based on depth, and the data comes from a JSON file loaded via `json`.

Ssrini-rg

86% match

Loading thumbnail…

Tree!

This visualization shows a hierarchical tree of world geography, starting from continents and drilling down to countries and subregions. The data is structured as nested JSON objects representing the world, with nodes labeled for regions like Asia and individual nations. Built with D3 v5, it uses the `tree` and `hierarchy` layout functions to compute node positions and `linkHorizontal` to draw the connecting paths. Text labels scale in font size based on depth, and the entire SVG canvas supports pan and zoom via the `zoom` event.

AAbhijeet Panda

85% match

Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries organized by continent and subregion. The layout uses D3’s `tree()` and `hierarchy()` functions to compute node positions, with curved `linkHorizontal()` paths connecting parent and child nodes. Labels display each country’s full name, with font size decreasing by tree depth. The visualization supports pan and zoom through D3’s `zoom()` behavior, applied to a group element. Data comes from a static `data.json` file, and all rendering is done with SVG elements styled via external CSS.

Bbakstorage00001

85% match

Loading thumbnail…

Building a tree

A hierarchical tree visualization displays world geography from the global root down to individual countries through intermediate regional groupings. The layout uses d3.tree and d3.hierarchy to compute node positions from JSON data, while d3.linkHorizontal generates curved paths between parent and child nodes. Node labels are rendered as SVG text with font sizes scaled inverse to node depth. The visualization incorporates d3.zoom for pan-and-zoom interactions within an SVG container.

ZZhengyan Yu

85% match