D3.js Angular Tutorial

What is D3.js?

D3.js is a powerful JavaScript library for creating custom data visualizations in the web browser using SVG, HTML, and CSS.It is highly customizable, has strong community support with tutorials, plugins, extensions, and more. It excells in its ability to dynamically integrate data and is ideal for a real-time use case. Generally, D3.js has a steep learning curve, with minimal built-in templates. It is most widely used by individuals who have a strong technical background and who need a high-level of customizability

What is Angular?

Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.

D3.js Angular Code Example

In this example, we'll demonstrate how to integrate D3.js, a JavaScript library for producing dynamic, interactive data visualizations in web browsers, with Angular, a platform and framework for building single-page client applications using HTML and TypeScript. We will create a basic bar chart.

Step 1: Setting up the Angular Project

First, ensure you have Angular CLI installed. If not, you can install it globally on your system through the terminal with:

npm install -g @angular/cli


Then, create a new Angular project:

ng new angular-d3-example


Move to your project directory:

cd angular-d3-example


Step 2: Installing D3.js

Install D3.js via npm:

npm install d3 --save


Step 3: Creating a D3 Component

Create a new component where the D3 chart will be rendered:

ng generate component bar-chart


Step 4: Implementing the Bar Chart

Edit the generated bar-chart.component.ts file to include D3 and write the logic to render a bar chart:

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
 selector: 'app-bar-chart',
 templateUrl: './bar-chart.component.html',
 styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {

 constructor() { }

 ngOnInit(): void {
   this.createBarChart();
 }

 private createBarChart(): void {
   const data = [30, 200, 100, 400, 150, 250];
   const svg = d3.select("app-bar-chart").append("svg")
                 .attr("width", 700)
                 .attr("height", 300);
   
   svg.selectAll("rect")
     .data(data)
     .enter()
     .append("rect")
     .attr("x", (d, i) => i * 70)
     .attr("y", d => 300 - d)
     .attr("width", 65)
     .attr("height", d => d)
     .attr("fill", "blue");
 }
}


In your bar-chart.component.html, make sure it's clean or has appropriate container elements for your chart. You can leave it empty or customize it as needed.

Step 5: Displaying the Component

Finally, to display the bar chart, you need to include the <app-bar-chart> tag in your application's main component, typically inside the app.component.html file:

<app-bar-chart></app-bar-chart>


That's it! You have successfully created a basic bar chart using D3.js in an Angular application. You can now serve your project:

ng serve


Navigate to http://localhost:4200 in your browser to see the bar chart rendered with D3.js and Angular.