Path Visualization with D3.js in Angular

Introduction

D3.js is a JavaScript open-source library for the data visualization. There are a few characteristics.

• Low-level toolbox: manipulate DOM and event model
• SVG based library
• Styled by CSS selectors

For experienced developers, D3 is friendly and lower learning curve because the familiarity of the DOM tree and CSS selectors.

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

Agenda

There are a few topics in this article.

• Prepare Environments
• Draw Legends with Fixed Positions
• Draw Nodes with Data Binding
• Draw Edges with Bézier Curves
• Attach Event Listeners

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 (this article)