D3.js Angular Tutorial

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.