Using D3 in React

There are several libraries that can be used to make graphs in javascript. For this course we used the library D3.js. D3.js is described on the website as:

A library for manipulating documents based on data. (Source)

During the course frontend data we already worked with D3 with vanilla javascript. Now the intention was to use this in combination with the chosen framework. So in my case React.

Install D3 within react

To load D3 via React I started by searching online for the best way to do this. I already knew that I didn't want to load D3 as a script tag and started looking for another solution. So I ended up on a site where D3 is downloaded via npm (Source). I installed D3 by typing the following into my console:

$ npm install d3 --save

Then I was able to import certain methods of D3 within my components at the top by typing:

import { ... } from 'd3';

Note: In place of the three dots there is usually the name of a specific method you want to import.

Luckily the download of d3 went without errors so I could start making the graphs.

Creating a bar chart

My first goal was to make a bar chart. But with this, I really wanted to challenge myself by doing this using components. But, first I started by creating a bar chart literally only within my App component. I only made the rectangles for the bars (so without the axes). I did this with the help of Curran Kelleher's React with D3 tutorial.

At the top of my App component I called up the parts I needed to create the bar chart. I did this by importing the scaleBand, scaleLinear and max from d3:

import { scaleBand, scaleLinear, max } from 'd3';

Then I copied and pasted the xScale and yScale variables that I had already created during the frontend-data course. Of course I changed the keys since my dataset was different now:

  const yScale = scaleBand()
    .domain(electric.map(d => d.brand))
    .range([0, height]);

  const xScale = scaleLinear()
    .domain([0, max(electric, d => d.value)])
    .range([0, width]);

This went well, but then came the hardest part. Instead of creating a group element and using method chaining, I now planned to create the elements within jsx right away. By mapping over the data, I could then create a rectangle per element that I placed in a svg.

    <svg width={width} height={height}>
      {electric.map(d => 
        (<rect 
          x={0}
          y={yScale(d.brand)} 
          width={xScale(d.value)} 
          height={yScale.bandwidth()}
          />
        ))}
    </svg>

That's how I made my first bar chart! But I did have a warning in my console:

Warning: Each child in a list should have a unique "key" prop.

At the beginning I ignored this because the bar chart worked. But what I did wrong is that React asks for a key within the children of a map or foreach to keep track of which item the loop is on. I eventually solved this by simply passing a key attribute to the rect tag with a specific value in it.

After this I decided to add the axis to the chart. Despite the help of Curran Kelleher's tutorials, this didn't quite work out the way I wanted. In Curran's tutorial he makes a bar chart from left to right while I wanted a bar chart from bottom to top. When I tried to adjust this, I got no errors but I didn't see my rectangles appear on the screen. In hindsight, this had to do with the scaleBand and scaleLinear that I forgot to swap.

To be continued...