Tidy Tree Visualization with D3.js in Angular

Introduction

In the previous article, we learned the introduction to D3 and how to append nodes, append edges, handle events on SVG with D3.

Tidy tree is the tree layout produces tidy node-link diagrams of trees using the Reingold–Tilford “tidy” algorithm. When arranging nodes for a specific data structure like a tidy tree, using the existing layout is a way to save time.

In this article, we will go through how to create an Angular application to visualize a tidy tree with D3 (v7).

Agenda

There are a few topics in this article.

• Prepare Environments
• Build the Tidy Tree
• Show Additional Information of Nodes
• Highlight the Edge on Hovered
• Demo

About this series

This series aims to learn technologies for visualization.

• Article 1. Chart Visualization with HighCharts and ECharts in React
• Article 2. Hierarchical Graph Visualization with Cytoscape.js in Angular
• Article 3. Path Visualization with D3.js in Angular
• Article 4. Tidy Tree Visualization with D3.js in Angular (this…