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

GOVERNMENT AND BUSINESS PAIN POINTS…

13.05.2024

Independent tech consultancy Opencast has unveiled its events programme for next month’s TechNExt festival – with a focus on the pain points facing government and private sector organisations alike, as…

Read more

OPENCAST NAMED FASTEST-GROWING LARGE TECH…

28.04.2024

Independent tech consultancy Opencast was last night named ‘Fastest Growing Large Tech Business’ at the prestigious 2024 Northern Tech Awards. Chief Financial Officer James Hodgson and Chief Executive Tom Lawson (pictured above) picked up…

Read more

CGI Young Dreamers Programme 2024…

02.04.2024

CGI Young Dreamers Programme 2024 kicks off in Newcastle to encourage STEM careers for students   CGI, one of the largest IT and business consulting services firms in the world,…

Read more

New post: Northumbria students launch green awareness campaign for Metro operator dynamonortheast.co.uk/northum…

Join our
mailing list