Skip to content
banner

Introduction to React and D3.js

React, D3.js, Data Visualization4 min read

"Introduction to React and D3.js"

Welcome to our first post! First of all, I appreciate your interest so far 🖖

I guess nothing more exciting to launch this blog than starting with the D3.js library to create elegant and professional data visualizations. The JavaScript library is widely used in the world and there are plenty of very interesting examples on the web.

The D3.js uses HTML, CSS, and SVG to create its visualization components. It's a powerful library that enables the developer to go far beyond the common charts when presenting data. For being a Javascript library, the development and management of the visuals are done through the manipulation of the Document Object Model (DOM).

As the first impression, D3.js might look a little overwhelming when we look at the amount of code required to build the visuals and configure its interactions and events. However, it's always important to remember that it all starts with the first step (I mean...the first line of code).

Our goal here is not only to introduce D3.js to you, or to refresh for those who have read about it before, but also to demonstrate how we can integrate it with React, one of the most popular JavaScript framework out there. As this integration is not out-of-the-box on these libraries, we can find several distinct approaches on how to perform it, such as Lifecycle Methods Wrapping, D3 Within React, React Faux DOM, and others.

For this particular post, we'll be using the Lifecycle Methods Wrapping. It gives us the ability to explore the most of the visualization library without any limitation or poor performance.

It's also important to mention, there are quite a few great wrappers which can save you some valuable time depending on your client requirements (or project dealine). Among them, it's worth to highlight Recharts and Billboard.js. But hold on, this subject definitely deserves its own post (stay tuned 🔥).

Don't worry if you are not an experienced React developer, only a basic knowledge is necessary to follow the examples 👌 I also encourage you to get creative with some awesome D3.js examples on Observable.

Now enough talking, let's get our hands dirty!

Environment Setup

First step, let's create a new React application:

1npx create-react-app d3-react-welcome-dev
2cd d3-react-welcome-dev
3npm start
To use npx, make sure you have followed the requirements described in the official documentation.

Feel free to remove any useless object to this example, such as logo.svg, App.css, App.test.js, and index.css (don't forget to remove its reference as well).

Secondly, we must install the D3.js library in our application:

1npm install --save d3

Last but not least, let's add some style to it:

1npm install --save styled-components

That's only it! Our environment is now ready to go!

Customizing our App component

Replace your App.js component code with the one below:

src/App.js
1import React from "react";
2import styled from "styled-components";
3
4const AppContent = styled.div`
5 background: #efefe9;
6`;
7
8const Header = styled.div`
9 background: transparent;
10 border-radius: 3px;
11 border: 20px solid palevioletred;
12 color: black;
13 font-weight: bold;
14 margin: 0 1em;
15 padding: 0.25em 1em;
16`;
17
18function App() {
19 return (
20 <AppContent>
21 <Header>Welcome, Developer! Here's a D3.js example!</Header>
22 </AppContent>
23 );
24}
25
26export default App;

Good, at this point we have only added some custom style to our app. Styled-components is a pretty cool library to customize components through CSS-in-JS. If you start your development server, your home page should look like this:

Home

Creating React Wrapper

Now, we're going to create a React wrapper and get a little closer to building our first D3 component. Here, the wrapper has the purpose of creating an instance of our future D3 visual component and attached it to an HTML object.

As the next step, create a new file called ChartWrapper.js in the same location as your App.js file and copy the following code into it:

src/ChartWrapper.js
1import React, { Component } from 'react';
2import D3BarChart from './D3BarChart';
3
4export default class ChartWrapper extends Component {
5 componentDidMount() {
6 new D3BarChart(this.refs.chart)
7 }
8
9 render() {
10 return <div ref="chart"></div>
11 }
12}

By instantiating the D3 visual component in the componentDidMount() method, we ensure it only happens when the ChartWrapper has been instantiated and inserted into the DOM.

As you will notice, our code is currently broken as there is no D3BarChart component yet.

Go back to your App.js file and add the import reference to the ChartWrapper we just created:

src/App.js
1import ChartWrapper from "./ChartWrapper";
2
3...
4
5function App() {
6 return (
7 <AppContent>
8 <Header>Welcome, Developer! Here's a D3.js example!</Header>
9 <ChartWrapper />
10 </AppContent>
11 );
12}

Create D3 Visual

Finally, the most exciting part of our introductory application. Let's create our first D3 component!

To illustrate our example, we'll read data from the Coinranking API. It's an online service where we can freely consume cryptocurrency data.

Go to your src folder, create a new file called D3BarChart.js and paste the code below into it:

src/D3BarChart.js
1import * as d3 from "d3";
2
3const url = "https://api.coinranking.com/v1/public/coins";
4
5export default class D3BarChart {
6 constructor(element) {
7 const svg = d3
8 .select(element)
9 .append("svg")
10 .attr("width", 800)
11 .attr("height", 800);
12
13 d3.json(url).then(coinData => {
14 const rects = svg.selectAll("rect").data(coinData.data.coins);
15
16 rects
17 .enter()
18 .append("rect")
19 .attr("x", (d, i) => i * 100)
20 .attr("y", 50)
21 .attr("width", 50)
22 .attr("height", d => d.numberOfExchanges)
23 .attr("fill", "orange");
24 });
25 }
26}

What we have done above is basically to import a reference of the D3 library to our class, create a SVG object named svg, and send to it the crypto data we read from the API.

Fantastic, we took another step toward our goal.

Now restart your development server, your page should look like this:

Home

Oh...it isn't exactly what we were expecting, is it? No panic, nothing that some scaling and a bit of JavaScript code cannot fix 👍

Keep going with me because we're only a few code blocks away. The result is going to be rewarded, I guarantee you!

Chart Scale

What we need now is to apply linear scale to the y axis, and band scale to the x axis on our D3 component.

Let's go back then to the D3BarChart.js:

src/D3BarChart.js
1import * as d3 from "d3";
2
3const url = "https://api.coinranking.com/v1/public/coins?limit=10";
4
5const WIDTH = 800;
6const HEIGHT = 500;
7
8export default class D3BarChart {
9 constructor(element) {
10 const svg = d3
11 .select(element)
12 .append("svg")
13 .attr("width", WIDTH)
14 .attr("height", HEIGHT);
15
16 d3.json(url).then(coinData => {
17 const ds = coinData.data.coins;
18
19 const y = d3
20 .scaleLinear()
21 .domain([0, 300])
22 .range([0, HEIGHT]);
23
24 const x = d3
25 .scaleBand()
26 .domain(ds.map(d => d.name))
27 .range([0, WIDTH])
28 .padding(0.5);
29
30 const rects = svg.selectAll("rect").data(ds);
31
32 rects
33 .enter()
34 .append("rect")
35 .attr("x", d => x(d.name))
36 .attr("y", d => HEIGHT - y(d.numberOfExchanges))
37 .attr("width", x.bandwidth)
38 .attr("height", d => y(d.numberOfExchanges))
39 .attr("fill", "orange");
40 });
41 }
42}

The code highlighted above shows what we've changed on the component when applying chart scale. Basically, we created a linear scale for the y axis and a band scale for the x axis. Note the rows 35 and 38 how we translate the x and y values into its respective scale value.

At this stage, your bar chart is probably looking a little better but we still need to put some axis information to it.

But first, we must set the y axis with a dynamic domain instead of a hard-coded value. We can do it using the functions max and min:

src/D3BarChart.js
1...
2 const y = d3
3 .scaleLinear()
4 .domain([d3.min(ds, d => d.numberOfExchanges), d3.max(ds, d => d.numberOfExchanges)])
5 .range([0, HEIGHT]);
6...

Brilliant, now our next move is to set up the chart axis. D3.js has some cool functions we can use to easily auto-generate it for us.

src/D3BarChart.js
1import * as d3 from "d3";
2
3const url = "https://api.coinranking.com/v1/public/coins?limit=10";
4
5const MARGIN = { TOP: 10, BOTTOM: 50, LEFT: 50, RIGHT: 10 };
6const WIDTH = 800 - MARGIN.LEFT - MARGIN.RIGHT;
7const HEIGHT = 500 - MARGIN.TOP - MARGIN.BOTTOM;
8
9export default class D3BarChart {
10 constructor(element) {
11 const svg = d3
12 .select(element)
13 .append("svg")
14 .attr("width", WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
15 .attr("height", HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)
16 .append("g")
17 .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`);
18
19 d3.json(url).then(coinData => {
20 const ds = coinData.data.coins;
21
22 ds.sort(function (a, b) { return b.numberOfExchanges - a.numberOfExchanges})
23
24 const y = d3
25 .scaleLinear()
26 .domain([
27 d3.min(ds, d => d.numberOfExchanges),
28 d3.max(ds, d => d.numberOfExchanges)
29 ])
30 .range([HEIGHT, 0]);
31
32 const x = d3
33 .scaleBand()
34 .domain(ds.map(d => d.name))
35 .range([0, WIDTH])
36 .padding(0.5);
37
38 const xAxisCall = d3.axisBottom(x);
39 svg
40 .append("g")
41 .attr("transform", `translate(0, ${HEIGHT})`)
42 .call(xAxisCall);
43
44 const yAxisCall = d3.axisLeft(y);
45 svg.append("g").call(yAxisCall);
46
47 const rects = svg.selectAll("rect").data(ds);
48
49 rects
50 .enter()
51 .append("rect")
52 .attr("x", d => x(d.name))
53 .attr("y", d => y(d.numberOfExchanges))
54 .attr("width", x.bandwidth)
55 .attr("height", d => HEIGHT - y(d.numberOfExchanges))
56 .attr("fill", "orange")
57 });
58 }
59}

I know, I know... there are quite a few changes to our component at this point. But mostly, it just a couple of margin tweaks regarding the chart's screen position (rows 5-7, 14-17). What I really want to highlight are the xAxixCall and yAxisCall objects (rows 38 and 44). By adding it to our SVG component, we are able to add data information to the chart axis.

Home

And that's it. You've completed your first React application with D3.js visuals.

That's really something. Well done 💪

D3.js offers a world of possibilities to customize your visuals and make it awesome. Don't be afraid, go forward and explore!

Feel free to download the code of this post from the GitHub repository.

Useful Resources

Conclusion

Thank you very much for everyone who's got to the end of our first post. It means a lot ♡

Stay tuned, a new post comes every week. Hope you enjoy the subjects we cover, the quality of our posts, and most important, I hope it can aggregate value to you.

You're welcome to follow me on LinkedIn where I'll be informing you of new posts.

Keep up with the hard-working, developer. It always pays off. See you in the next post!

Follow Us

The Welcome, Developer has a brand new LinkedIn page! If you enjoy our content, we would be very happy to have you as a follower! In there, we will update you about new posts, new projects, and all the cool stuff!

© 2021 Welcome, Developer. All rights reserved.
Proudly made in New Zealand ♡