Skip to content

Understanding Data Visualisation with D3.js

D3.js is a javascript library commonly used for creating data visualisation and animation among developers. Data visualisation is one of the best ways to tie big data into meaningful representations that can allow users to understand and interact with.

In this post, we will not be discussing too heavily on D3, but specifically it’s applications and techniques.

Understanding D3’s concepts

There are 3 important concepts in understanding how D3 is used. How wide your data set is called the Domain – example: 1 – 100 would set the array size from the lowest, 1 to highest 100. Range allows the data to be transformed into the corresponding pixels on screen. To convert data into corresponding values, Scales are used such as Quantitative (Numerical) and Ordinal Scales (alphabetical).

Example of D3 Charts & Graphs

From bar graphs to interactive charts, D3 allows big data to be presented in it’s most concise and creative form. Here are some commonly used examples of D3.

a) Bubble Charts

b) Stacked Bars

stackedbars with d3.js

c) Node-linked Tree

nodelinkedtree with d3.js

d) Symbol Map

symbol map with d3.js

e) Sequences Sunburst

sequences sunburst with d3.js

f) Heat Maps

mapping with d3.js

g) Galaxy Chart

galaxy chart with d3.js

h) Radial Progress

radial progress

How & When Should You Apply D3?

A good way to judge is to understand the background of your client’s needs. For example if you are working with an Energy company, data visualisation can be helpful to show stats on how energy is being consumed, or for a Non-profit Organisation, maps can be helpful in representing the population.

Many websites with D3 often place data visualisation at the main header section – which creates a beautiful and sophisticated-style backdrop, here is an example from BrandLoveScore:



Guardian’s Bussed Out is an example on how maps are used and interactively animated when the user scrolls down the page:

guardian bussedout


When embarking on a data visualisation project, give careful thought to meaningful interactions that engages the user. Data should also be represented clearly and not appear too overbearing.

Bringing data to life is one of the best ways to communicate information to users and enhances user experience. Always consider using data visualisation as it is one of the best ways to increase user engagement for a brand, company or cause.

Share this post:

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: