An Introduction to React D3
So, you’re eager to learn and create amazing data visualisation for your website? Then hop in w
Without any further ado!
What is React D3?
While it might appear to us that D3.Js is an all surrounding framework, it actually is a collection of numerous small modules. The various modules present in D3.Js are shown below in the following diagram. Keep in mind the size of the circles is analogous to the size of the modules in the diagram:
Getting the Data:
We all know that the very first thing that we need to do while visualising the data is to grab the data, of course! One of the easiest ways to do so is to store the data in a static file and fetch it.
- DSV (delimiter-separated values) along with CSV (Comma Separated Values) and TSV (Tab Separated Values)
- Also supports other formats where you can store data like: svg, image, html and xml
Manipulation of Data:
So, till now we have got our data and after this we need to manipulate it into a format that we can work with. D3 consists of modules that can be very helpful in querying and transforming the data:
- D3 array:
- Can perform Basic statistics.
- Can question about the order
- Expensive data manipulation
- D3 random: This module lets you create random numbers with specific distributions.
- Others: Some methods in d3.hierarchy (d3.hierarchy()). This method converts data into a particular nested structure that it can visualise.
Manipulation of the DOM:
- D3-selection module: If you want to add an item in a DOM for every item present in a data set we’ll most probably use a for loop. It might be a lot of work but at the same time it is easy. However, if you want to keep the elements of the DOM synced with the data every time the data changes, that would become a lot of work without the help of the d3-selection module. This method creates a d3 selection object which contains numerous helper methods.
- D3-selection multi: This module has got methods to update styles and attributes of elements in the DOM where we can update only one value per call.
Drawing SVG Shapes:
In order to visualize data we find the need of representing our dataset as shapes. To draw these shapes we have the following:
- Basic DOM elements
- D3 shapes: This module contains complex shapes which help us to visualize our data even better. We can create the following shapes on SVG or Canvas:
- D3 path: This is an underlying method which surfaced as well. Using d3 path we can create our own custom paths between the shapes created using d3 shapes.
- D3 polygons: It is a small module that has got a few utility functions to deal with polygons (A shape that can be denoted as a series of [x,y].
Dealing With Colours:
In data visualization, dealing with colour is an important concept even more when someone uses a colour scale to represent a matrix in the data set. Although colour manipulation is very important, there exists no native method of manipulating the colours.
- Colour keywords: Currently there exists 148 colour keywords in CSS with two extra values that are transparent which has no specific colour and currentColor which inherits the property of CSS color.
- RGB colours: RGB means red, green and blue and can be declared in various different ways.
- HSL colours: HSL means hue, saturation and lightness and they also have different ways of declaring.
- System colours: They are valid colours of CSS but they are not supported by all operating systems. They are not going to work as inputs for d3.color()
Dealing With Datetimes
- .floor(), .round() and .ceil() is used to create a Date at the start, closest boundary or at the end.
- .offset() used to offset the Date by some specified interval.
- .range() for creating an array of dates for each interval between specific start and stop date.
- .count() is used to return the number of intervals that can be fitted between tow Dates that are specified.
For creating a simple React web application, we can use Create React App. Create React App provides a nice beginner experience so if you are a beginner and just starting to learn React then Create React App will be perfect for you.
- First, a new app is created, it can be called my-d3-app. For creating that we would use npx create-react-app my-d3-app. Then we change directory into the created folder by using cd my-d3-app.
- Then we install D3 and for doing that we run npm install d3 –save.
- Next, we import D3 to App.js by running import * as d3 from d3. Because of the fact that D3 has no default exported module, we need to import * (“import everything”).
The manipulation of the DOM is made easy by D3. Not only D3 but the React library also manipulates the DOM. Thus we need to work a bit extra to get both React library and D3 work together. But we are lucky that React already has a solution available because it allows the targeting and updating of DOM elements. For doing this, references are used by React.
Appending Elements to DOM:
Once we have decided what elements we want to manipulate, we can always start adding more elements to it. For example, if we have a list, we can always use D3 to add a new list item to the existing list.
Creating using Data:
We can make D3 to be aware of our data by selecting DOM elements and by attaching to them the data by the use of .data(). A method called .enter() in D3 that is very often used to work with data. What this signifies is that these data elements are needed to be added to the DOM. There is a counterpart of .enter(), which is called .exit() and is used for signifying the elements that have no existence in the data anymore but do exist in the DOM. We can use .exit() together with .remove for removing those elements from the DOM.
Properties as Functions:
Element properties like styles, attributes and so on can be set using a function in D3. We can also make use of an arrow function to take the data point values as input and return the values added in “degrees”. If we want to get creative with the elements, function property enables us to do so. We can take a look at an example from the official D3 documentation where a selected paragraph is set to be of a random colour by making use of a function to set the property of element styles.
We can use these conditionals just as we use any function. However, the tedious job is adding inline styles. For this we can use classes and id’s instead so that we can set the styles in our CSS. For setting attributes like classes and ids, we can use .attr().
Animating with Transitions
D3 makes the animation of transitions easy. We can set the duration of the animation using .duration(). Functions can also be used with transitions. The below example from the official documentation can make circles appear one at a time using the delay() function which takes dataPoint and it takes eartion as its set parameters. It returns the iteration multiplied with 10.
The iteration is referred to the place of the datapoint in the data list.
D3 might seem very difficult and overwhelming when we are just starting out but once we get to know the basics, down the road it becomes a very powerful tool for us to express and visualise data. It is very recommendable to use the D3 and not any other readymade chart libraries because the D3 allows us to have a more personal and modifiable experience with our data. Also, learning D3 is a very good way for becoming fluent in manipulating the DOM. The understanding of DOM is very crucial and it’s often a quality looked for by everyone in front end developers.