We've all been bombarded with big data, data science, data, data, and more data. We're going to talk about data visualization here and how you can use D3.js to handle that for you. If you're trying to integrate data visualizations into your web application and you want to write everything in JavaScript, this is for you.
Learning how to use D3.js isn't something you just have to do, but if you like working with data then it is helpful. The learning curve for this library isn't very steep as long as you're familiar with HTML, CSS, and JavaScript. Let's talk about what D3.js is before we jump right into installing the library and using it.
Intro to D3.js
As you have probably put together so far, D3.js is a library you can use for data visualization. Part of the reason it has such a large appeal is because it handles parsing the data for you. If you've ever had to write custom code to do you're data parsing, you know how tedious that can be. So D3 saves you all of that time and you can focus mainly on how you want that data to appear on a user's screen.
You can use D3 to make regular HTML and CSS styles components or you can create SVGs. It's a relatively easy library to pick up if you understand JavaScript because it just chains together methods to give you the visualization you want. It also uses a syntax similar to CSS selectors to select elements like you would do in jQuery.
One of the best things is that you don't have to use some weird language to style your visualizations. Regular old CSS will do it for you and that makes creating animations and transitions more simple because if you know CSS, you already know how to do these things.
Using D3.js
First thing first, go ahead and open a project you have that could use some data visualization. Then install the D3.js package with the following command.
npm install d3
This will install D3 and any dependencies in your project. From there, you need to go to the file where you will be using D3 and import it. This could be inside of a React or Angular project. Regardless, you want to make sure that you have an entire D3.js namespace available to you because that's how you will access those methods. Here's how you import D3 into your JS file.
import * as d3 from "d3";
When you're using D3.js, the very first thing you'll do in your JavaScript file is select the HTML element you want to work with. This is the same selector syntax you would use to select an element in CSS or jQuery. Here's an example of selecting elements with the D3 methods.
d3.select('div.container .balance');
d3.selectAll('div.container .balance');
The select method only returns the first instance of the selected element in the DOM an the selectAll method returns all instances of the selected element in the DOM. In many cases, you'll be making an SVG to display inside of a parent element on the screen. We're going to make a simple bar chart graphic using D3 just to show how it works.
index.html
<html>
<head>
<title>D3.js Demo</title>
</head>
<body>
<h1>D3 Bar Graph Demo</h1>
<div id="bar-graph"></div>
<script src="d3js.org/d3.v5.min.js"></script>
<script src="bar-graph.js"></script>
</body>
</html>
bar-graph.js
import * as d3 from "d3";
let data = [31, 42, 56, 92, 84, 72, 53, 43, 29, 24, 64, 49];
const barWidth = 75;
const barOffset = 10;
const height = 600;
const width = 800;
let yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, height]);
d3.select('#bar-graph')
.append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#3A742C')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.style('fill', '#30A08B')
.attr('width', barWidth)
.attr('height', (d) => {
return yScale(d);
})
.attr('x', (d, i) => {
return i * (barWidth + barOffset);
})
.attr('y', (d) => {
return height - yScale(d);
})
;
If you look through this code, you'll see things that look familiar, like CSS styles. You'll also see that the D3 syntax isn't so bad. You target an element and then you start chaining D3 methods together to build the graphic you want. To learn more about the methods in D3, you can check out their documentation here: https://github.com/d3/d3/blob/master/API.md
Scenarios you might use this library
Almost any application where you need to show users data summaries can use D3. You can use it in apps to show their location relative to another city. You can use it to give managers reports on how a system is doing. You can even use it make short animations. The D3 library is versatile in the ways you can use it and the documentation is great.
Compared to a lot of libraries, D3 is easy to pick up and get running with. This is more like putting a puzzle together than anything. You can import your data from a database somewhere or you could stream real-time data from the user to make your graphics. D3 can handle all of that. Plus it makes it easy to create graphics that scale, so your application can stay responsive.
It's a little intimidating at first because you see these long method chains. Although once you start reading the code, you'll notice we use the same few methods over and over. There aren't a lot of tricks until you start making complex shapes or you need to work with complex data. As an added extra, D3 is kind of fun to work with! It makes it easier to build shapes instead of using CSS to style everything.
I'm really starting to play with D3 and I like it a lot! What about those of you who use this at work? How do you like it when you have to build it professionally? There's usually a difference in how things work for fun and at work. I'd like to here if you think it's worthwhile to learn how to use this library for production apps.
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding