Data Visualisation With D3.js In Your Application

When creating a product you deal with tons of data on a daily basis – think about important information, about your users or details on how they are using your app.

It should be reviewed and interpreted regularly – but how to do it efficiently? Regardless of what we are used to, tables are not the most user-friendly way to display data. Most of the time it’s not about reviewing specific numbers, but looking for trends – and this is when data visualisation comes to play.

D3.js is a great javascript based library, that gives you the possibility to create dynamic, interactive data visualisations, but it’s not the easiest library to work with. We’ve worked with it in a couple of projects and we want to share some tips on how to get as much as you can from it. Why use D3 and how to implement data visualisation to help your users? We will get you through some specifics and a few key advantages. Without further due, let’s dive in!

What Data Should We Visualize and How?

Data visualisation is the presentation of a specific set of data in a graphical or pictorial format. The primary goal of that is allowing decision makers to see beyond the data itself and observe trends, grasp demanding concepts or identify new patterns. The key is to make the information visible, but also to choose wisely what to visualize. It can be one simple measurement or three different factors which don’t have a clear link between them, but rely on one another deeply. Depending on the product you’re building, you may have different kinds of data created by users’ activity, collected not only by browsers, but also by the mobile device and other sensors in the environment – if you’re in the world of the Internet of things, the possibilities are endless.

Sample data visualisation – pie charts and bar chart showing details about netguru developers team (data from May 2017)

The most common place to display these kind of sum-ups is a dashboard – we want to provide a user with multiple perspectives into the data as well as the ability to see individual datapoints. If your user visits almost everyday it’s good to visualize something changing dynamically. When creating a concept of the future charts you can either start with just rough sketches or with detailed sets of requirements. There are multiple interaction possibilities that you may want to take advantage of – for instance, giving more detail on a particular element when it is clicked on or – if you have two corresponding charts – highlighting which elements in each chart correspond to elements in the other one. Data visualisation doesn’t need to look boring or complicated to be functional, nor does it have to be sophisticated to look beautiful. You can start with simple bar charts and pie charts or create a complicated (but well thought through!) diagrams.

D3.js’ Key Advantages

D3 (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data-visualisations. It’s fairly low level, the developer has a lot of control over the end result. D3 has basically four main responsibilities:

1. loading or importing data from different types of documents,

2. binding the data to the specific DOM,

3. transforming or controlling visual side of said elements thanks to working with SVG,

4. transitioning the layout in response to user input or activity.

The library brings data to life using just HTML, SVG, CSS and JS, but it can also work with canvas when we need more performance.

1. Flexibility and Customizability

D3 doesn't come with any prebuilt visualisations – for instance there's no ready barchart method which works out of the box, because it aims to be low-level and flexible. It can look like anything you want, it will not limit your creativity! However, there is a vast system of built in utilities for creating and managing scales, color generation, arcs and so on. Therefore creating a pie chart takes only a few lines of code. It is not a graphics library, nor is it a data processing library – it’s a tool to make the connection between data and graphics easier and more powerful. This freedom comes with some drawbacks, as always – D3 is known for its deep level of abstraction and steep learning curve. However, it’s a very popular and respected tool and there are many great developers working with D3 on a daily basis.

2. Great Community, Great Inspirations

Mike Bostock - creator of D3.js is a former graphics editor for The New York Times, who specializes in data visualisation, design and open source. The community behind D3 is huge and welcoming – and vibrant open-source community means that whenever there is a problem with development, the answer will be found somewhere on StackOverflow!

Also, thanks to that energetic crowd there are literally thousands of great examples of diagrams across the web – and for most of them you can find the source code shared openly. That gives an endless inspiration to designers and good possibilities to developers to learn and improve the technical solutions.

How does it look in practice?

These few specific examples from our experience will help you imagine the possibilities and the added value that comes with data visualisation.

1. Detailed Line Charts Tracking Workout and Diet Effects

Built for personal trainers within the UpFitness chain, FitnessApp provides possibility for recording and tracking such parameters as detailed body measurements, body fat and lean body mass. The best way to show progress is a line chart – in this case we used detailed charts with axis and grid, so you can see every datapoint and correlate it with a date. The longer a client is working with the trainer and the app, the more data we have – and since we wanted to show a detailed version of the chart, that’s where interactive behavior helps – the whole chart can be zoomed in or out and the rules are changing accordingly. In a project like this all these elements – grid, axis, lines – can be built as separate components, so they’ll only work on a specific set of data and will be responsible for a small part of the whole diagram – that kind of structure can be then reused to implement more similar charts with some small differences.

2. Measuring Social Activity via Relations and Associations

Whenever we’re working with specific numbers, visualizing it is easy to figure out. It’s much harder if all you have is percentages or rounded numbers and the goal is to show relations between them. That’s when a scatter plot can be helpful – it’s a type of mathematical diagram that uses Cartesian coordinates to display values for typically two variables for a set of data. We can, for example, evaluate an activity between specific a user and their friends and display on a scatter graph diagram how quickly he or she responds to specific people, and how quickly and actively they write back. Big part of data visualisation is putting the weight on the links between data, and not on numbers.

3. Complex Dashboard Showing Varied User Analytics

Dealing with tons of data is a challenge. In GlobalWebIndex – a product designed to give users an insight they need to execute powerful marketing campaigns – the main feature is providing data from a study on the digital consumer. To display these statistics we used: horizontal bar chart, vertical bar chart, pie chart, donut chart, pie radar chart, radar chart, radial bar chart, line chart and diverging bar chart. Why so many different types of graphs? Data visualisation is all about choosing the most intuitive and understandable way of displaying the data, but also about preventing from visual boredom. Instead of creating 5 horizontal bar charts next to each other, try to build a whole dashboard of different types of charts presenting different approaches on data, even if they all share similar type of units.

Compatibility with JS Based Frameworks

Since D3 is a javascript based and framework agnostic library it can be relatively easily implemented across all sorts of different frontend stacks, no matter what framework your app is written in - React, Ember, Angular or Vue. When working with React or Vue you can create great reusable components. For Ember based apps there are lots of addons and tools to implement D3 easily. If you’re working with Angular you will see tons of advantages when working with D3 and typescript. And, good news: you can use D3 with React Native too! All you need to make it happen is implementing a react-native-svg to render SVG or react-native implementation of ART library.

If You Don’t Really Need All the Magic

As mentioned above, D3 is a pretty demanding tool. If you're looking for a more prepackaged solution, check out these tools: Chart.js, Highcharts, Recharts. They are great for creating simple and beautiful pie or bar charts, that can be used on a simple data and can be successfully implemented very quickly. Pre-designed charts are a handy way to get a nice visualisation with little effort (great for MVP). What happens when your requirements change or your product develops? If you ever find yourself in a desire to use two different chart libraries in one project it’s probably the right time to give D3 a shot.

To Sum-up

D3 is an awesome way to create custom, beautiful, visualisations. In our experience it’s the best data visualisation tool there is – creative, vastly supported and easily implemented in any frontend stack. Data visualisation adds value to almost every product – no matter what’s the main feature of it. We hope that tips shared above will help you get as much as you can from it.