We all have heard the sound bite ‘Data Is The New Oil’, but without the right visualisation any data is as good as useless. Data Visualisation is the modern equivalent of visual communication. The primary goal of data visualisation is to communicate information clearly and efficiently via graphs and plots.

In this 3 part series we will explore visualising multi-dimensional data using React and D3. Before we talk more about the tech stack, let me set a bit of problem context.

We are building an internal Single-Page Application to help our HR with their hiring requirements. The sample data would look something like this.

Grid Representation

We initially represented data in simple grid format with Customers along the rows and the Skill set along the column, each skills column is further divided into different job levels.

See the Pen Grid View by Phanindra M (@phanimaddi) on CodePen.dark

The main drawbacks of this view are –

  • hard to get a snapshot of the data as it grows
  • the view itself is not visually appealing.

Interactive Visualisation

Sunburst diagrams shows hierarchy through a series of rings, that are sliced for each category node. We will be using a modified form of Sunburst (Sequence Sunburst). In our case Customers and Skills will be parent and intermediate nodes and the Job Levels will be leaf nodes. The current sequence on hover will be shown in a breadcrumb at the top.

See the Pen Sequence Sunburst by Phanindra M (@phanimaddi) on CodePen.dark

As you can see from the visualisation it gives snapshot of the data. A simple hover on any block will convey the information. This chart holds advantage over simple grid view in terms of visual appeal, interaction and it takes less space on the screen.

Now that we have chosen the right visualisation tool, we will cover React & D3 in the next part of this three part series.