D3 Stack Chart with React Hooks: What I have learnt so far!

Tom Hands, Javascript Developer, Corterum

 

“Recently we decided to add an Analytics section to our App, after toying with existing analytics software offered by Amazon such as AWS Quicksight, we opted to investigate using D3 and building our own data visualisations. This was a library I had heard a lot about, spoke about in the past, but something I had not attempted to implement since my initial training as a graduate developer starting out. This is a summary of what I have learnt so far, the approaches I took and maybe a few tips from the mistakes I made.

One of the most glaring differences with the D3 library in comparison to other external libraries we have used on project to this point, is in the way D3 draws elements to the DOM. It attempts to manipulate the DOM in a different way to how React does which can sometimes cause problems with rendering. The main difference here being that React rendering flows unidirectional, or as you may have heard mentioned ‘down the tree’, in which a reference is being made to parent and child components within React. You can read more about this here!

D3 was a brand new library for the majority of the team and nobody was claiming to be an expert. It is a vast and extremely interesting library with a wealth of different ways to build, shape and transition data with different visual representations. Up to this point the majority of the analytics visualisations we have created have been stacked bar charts, pie charts and line graphs. It starts by creating an SVG which ‘hosts’ the visualisation data chart and we are then able to append additional elements to this SVG with the help of D3 who expose a multitude of methods to manipulate data into the various shapes and styles that we want to use. If you want to see what some of the potential varieties offered by D3 you can see some here!

Our most basic implementation and the scaffold around which we have grown our charts

Key things to note here:

  • We give the SVG a ref using React useRef() — this is so we can reference that particular element in our D3 manipulation, to do things such as appending other elements.
  • We run a useEffect which is where we append everything to the SVG and effectively produce our charts and graphs. In this we must also remove anything that we append in the return section of the useEffect which is the equivalent of a componentDidUnmount and means that when we unmount this component we don’t want these additional elements to remain in the DOM.
  • We give our ChartWrapper a set height and width which we use to surround the SVG element and not allow other elements to interfere with the area that the chart is taking. These will generally be passed through as props but can be defined within the chart itself.
  • We give the SVG a styling of overflow: visible; this is so anything which renders outside of the original SVG size, such as axis, labels or a legend can still be seen and are not hidden which is the default behaviour.
  • data – Very important to note that the most important part of rendering a chart correctly with D3 is to understand the shape of the data that a chart expects, or to understand the shape of the data you have and how to explain that to D3. An example data structure will be detailed below.
  • Additional libraries we use can be seen in the snippet, currently we are using styled-components for styling and mobx-react for state management. Styling and state management can be handled differently and are not essential to being able to follow this guide.

Beyond this basic structure the things I have found with D3 are already very lengthy and forever growing as we find new and interesting methods exposed in the library that we attempt to implement. The next stage will show our first fully fledged and now re-usable Stack Chart and the different methods we used to create our first analytics chart.

Full blog post

Read more posts

New Survey Dives Deeper into…

04.08.2021

THE region’s tech network has launched a deeper dive into equality and diversity after an initial survey concluded with four key recommendations for the sector. Dynamo launched its first equality,…

Read more

Skills Bootcamps to be delivered…

04.08.2021

TechUP – Improving diversity within Tech TechUP is delighted to have been selected to take part in national Skills Bootcamps, free adult courses, designed to boost career prospects in the…

Read more

Digital bootcamps launch in North…

04.08.2021

A new series of digital bootcamps have today been announced to improve job prospects across the North East. The Skills Bootcamps in Digital, backed by the government’s Lifetime Skills Guarantee…

Read more

Healthcare innovators now have TEN chances to win at this year’s @BIHA2021 as a new research category has been added! Check out the details on all the categories and enter your bright idea 👇 brightideasinhealth.org.uk @AHSN_NENC #BIHA2021

Join our
mailing list