“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.
Read more posts
Newcastle College is looking to help North East start-ups and SMEs grow their network and take the next step in their business journey. The College’s Enterprise Hub, based at its…Read more
First launched in 2011, the University of Sunderland received European Regional Development Funding (ERDF) to run its Graduate Internship Scheme, connecting graduate talent with regional, Small to Medium Enterprises. It has…Read more
The North East has the most innovative businesses in the UK, the latest HMRC data shows. More businesses are claiming R&D tax relief in the North East than anywhere else…Read more