Introduction to D3 with Angular

Table of contents

Reading Time: 3 minutes

Introduction

Hello readers. This blog will teach us about d3js and how to integrate it with our angular applications. We will also be working on some important events in d3js. Let’s get started.

What is D3?

D3 stands for Data-Driven Documents. It is a Javascript library for manipulating documents based on data. With the increasing amount of data being produced daily, visualization of data is the best option to convey the information to the users. D3 allows you to have control over your data representation and lets you add some interactivity to it.

You can create different types of charts with the help of d3 like bar charts, bubble charts, scatter plots, etc. In this blog, we will be just going through some basic concepts to use in d3.

Advantages of D3

Since it is a Javascript library, it can be easily integrated with any JS framework like angular, or react.

It is open source so you can add your own features.

It is lightweight and fast and works well with large datasets.

D3 internally uses the web standards like HTML, CSS, and SVG so no new learning is required.

Setting up Angular and D3

Firstly, create a fresh angular application with the help of the below command.

ng new d3Integration

This will create a new angular application. Now we will install d3 in our application. Use the below two commands to install it.

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

Now after installing it successfully, we are ready to start working with d3 concepts.

We will start by adding an SVG to our HTML file then add some simple shapes and then some events.

In your app.component.html, add these lines where we provide SVG the width and the height only.

<h2>D3 in Angular</h2>
<svg width="500" height="500"></svg>

Right now you will not see anything except the heading on your localhost.

Now let us append a rectangle to it.

Create a new function and add these lines. You can call this function in ngOnInit.

createRectangle() {
   d3.select('svg')
   .append("rect")
   .attr("width","250")
   .attr("height","100")
   .attr("x","200")
   .attr("y","100")
   .attr('fill','violet')
 }

Here you can see we are using d3.select(). The d3.select() method returns the first element in your DOM based on the selector. We selected the SVG element and then appended the rectangle with properties like width, height, and color.

Similarly, we can add a circle to our SVG. Create another function for it and add this code.

createCircle() {
  d3.select('svg')
  .append("circle")
   .attr("cx","100")
   .attr("cy","150")
   .attr("r","50")
   .attr("fill","green")
 }

Here cx and cy are the x and y coordinates of the center of the circle and r is the radius.

Adding Events

Now we have created two shapes, let us try adding some events to them.

Let us change the color of the shapes by hovering over them. We will use the mouseover and mouseout event of d3 for it. You can modify the same function and add these two events to it.

createRectangle() {
   d3.select('svg')
   .append("rect")
   .attr("width","250")
   .attr("height","100")
   .attr("x","200")
   .attr("y","100")
   .attr('fill','violet')
   .on('mouseover',function(d){
     d3.select(this)
     .attr('fill','red')
     .attr('cursor','pointer')
   })
   .on('mouseout',function(d){
     d3.select(this)
     .attr('fill','violet')
   })
 }

After adding this, you can see the color changing when you hover over the rectangle.

Similarly, we can add to the circle as well.

Conclusion

We learned what is d3 and some of its advantages. Although there are other advantages as well. We then created an Angular application and looked into the basic concepts of d3 adding an SVG element and appending some shapes to it. We also added some events to them. This is just the beginning. D3 has much more to explore and is probably the best charting library you can use for your large amount of data. You can go through more details and the charts available in d3js in the official documentation here.

For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.