D3 -Bubble Chart With Angular

This article shows you how to build Bubble charts inside an Angular 8 application using the D3 JavaScript framework.

What is D3 ?

• The JavaScript library D3.js is arguably the most influential tool for creating interactive data visualizations.
• D3 stands for Data-Driven Documents and is widely used to create interactive data visualizations on the web.

Why should I prefer D3 on top of other libraries?

• D3.js is a JavaScript library. So, it can be used with any JS framework of your choice like Angular.js, React.js or Ember.js.
• D3 focuses on data, so it is the most appropriate and specialized tool for data visualizations.
• D3 is open-source. So you can work with the source code and add your own features. It works with web standards so you don’t need any other technology or plugin other than a browser to make use of D3.
• D3 works with web standards like HTML, CSS and SVG, there is no new learning or debugging tool required to work on D3.
• D3 does not provide any specific feature, so it gives you complete control over your visualization to customize it the way you want.
• D3 is lightweight, and works directly with web standards, it is extremely fast and works well with large datasets.

Installation

• Angular : 8.0.2
• D3 : 7.1.1

Assuming you have already created an Angular 8 application, do the following in the project home directory.

npm install d3 — save
npm install @types/d3 — save-dev

Code

• Create the chart component

ng g c bubble-chart — spec=false — style scss

• Import D3 into this component.

import * as d3 from ‘d3’;

• Define variables required
• Define data
• Define method for create chart
• Update chart whenever data change by ngOnChanges method.

For more information refer code from below git repo
Git Repo

Conclusion

D3 provides a powerful API for DOM manipulation. Using it for data visualization within an Angular applications can greatly enhance the user experience.