Nowadays we’re able to (and we do) collect and analyze more data than ever before. Big data has suddenly become a hot topic and a major to study. We are in a stats frenzy. But to be able to digest all these numbers, we need visualization and a framework that makes visualization possible, no matter how much data there is to process. That’s where D3.js steps in.

Let’s say you’re watching a basketball game on TV. The game broadcast will overwhelm you with live statistics and historical data. It helps you get a context of what’s going on, a perspective. Lets you compare the performance of individual players and the teams they’re playing on. Sports is a competition, so it feels natural that you want to compare the contestants.

Read also: Wireframes and Mockups: The Most Important Phase of Building a Website

Relying solely on your sight can be misleading. Your favorite player may seem to be scoring a lot, he may even score 30 points, but when you look at the box score and see he only made 30% of his shots and committed 8 turnovers, you can’t really call it a good performance.

And what if you missed your favorite player’s game? Looking at the box score won’t tell you the whole story either. A shot chart? Now, that’s a different thing.

What you’re looking at is LeBron James’s shot chart from the entire 2017-18 NBA season. It shows you the exact locations of all his shot attempts, their frequency and effectiveness compared to the league average. That’s A LOT of data in one simple image. Yet it’s very easy to digest once you understand, that the bigger the hexagon the higher the shot frequency, and that red is good, and blue is bad. That’s data visualization at its finest.

The key challenge of data visualization is presenting the data in a way that’s far more understandable and easier to grasp than a massive spreadsheet. So coming up with a good visualization is the cornerstone of success in getting your message across with the data at your disposal.

Why is Data Visualization Important?

People rely on their sight far more than on anything else. That’s why data presented visually is more convincing than plain numbers. Excellent visualization can grab people’s attention, while endless columns and rows of numbers can only give them a headache.

Apart from that, a visual representation of data makes it more likely for the information to stick with its recipient, as people retain as much as 80% of what they see and only 20% of what they read. This is also a reason why the visuals are just as crucial as the data itself.

Another benefit of visualizing your data is the speed of getting your message across. For example, try to compare two data points in columns of a large spreadsheet against juxtaposing the two on a chart. Once you get familiar with the legend, all it takes is a glance at the chart. In the case of columns, it takes much more time to compare data values.

Good data visualization also helps improve the user experience. Can you imagine a fitness app without graphs and charts?

These kinds of graphs make it possible for app users to quickly find the information they are looking for without lengthy tutorials, descriptions and a possibility of getting lost in the process.

Examples of Data Visualization

Data visualization possibilities are practically endless. The most popular types are:

• charts,
• infographics,
• presentations and slideshows,
• video tutorials,
• interactive websites,
• maps.

Each of these can be further divided into hundreds of subtypes. Let’s take a look at some interesting data visualization examples.

Let’s begin with the heart rate of a man proposing to his girl.

She said yes, so… how about baby names. Here’s a way of quickly finding out their popularity in a given time range.

Here’s a good-looking infographic utilizing pictures.

And here’s Kylian Mbappe’s heat map in the FIFA World Cup Semi-Final game against Belgium, showing the player’s activity on the field.

It doesn’t matter what kind of data visualization you choose, as long as it makes it easy for the recipients to digest otherwise raw data. Even the prettiest graph can be useless if it doesn’t serve its role. That’s why choosing the relevant kind of visual representation is key in successful data visualization.

If you find it hard to come up with the best way to visualize your data, try browsing the Data Viz Catalogue.

What is D3.js and What is its Role in Data Visualization?

Data visualization is a piece of cake if you have just a few data points. But the more data you want to visualize, the more automated you need the process to be. As you probably imagine, there’s a way of generating visualizations based on data, rather than drawing them manually. It’s called D3.js.

D3.js (or just D3 for short) is a front-end javascript library for manipulating documents based on data. In practice, it brings life to data with the use of HTML, CSS or SVG. In other words – it gives you the possibility to interact with data, and is fully compatible with all the popular web browsers, like Chrome or Firefox.

Why is D3 so great? Because it allows you to do pretty much anything you want with the data at hand. D3 makes visualization not only possible but also limitless. There are no restraints in kinds of visualizations this framework allows for.

Before Mike Bostock developed D3.js, there were, of course, some predecessors to it. But all of them required some plug-in to be installed in a browser before they could work properly. They had other limitations too.

D3.js is a game-changer because it’s not limited by the number of data it’s able to process, neither by the types of visualizations it’s capable of generating, nor by the customization capabilities. Bostock’s library, contrary to other frameworks, lets you manage even the smallest element and customize it to your needs. Above all, it seamlessly connects data with their graphical representation.

When to go with D3?

Truth-be-told, D3.js can get a bit complicated at times, but that’s the price you have to pay for unlimited customization.

Programming in D3 is always done from scratch. So, to start, you need to set up a workspace inside a container, create the X and Y axes, process the data and draw the desired graph using a preferred function. You can also add different styles and attributes for each data point or line. D3 additionally provides you with a few tools (functions) that you may find helpful for data management.

While creating a basic graph with D3 shouldn’t be a hassle, customizing it requires significantly more code to be written. More complicated visualizations demand plenty of work on the logic, data formatting, and the layout. But these are the keys if you want your visualization to speak for itself.

Despite the inevitable workload, D3 remains the go-to framework for data visualization. There are a few alternatives based on D3, however, like VEGA or NVD3 that can help out a lot with charting. One of the most notable D3 alternatives is called Sigma.js.

Sigma’s advantage lies in its ability to scale. It just copes better with graphs (and only graphs) based on enormous amounts of data. So if you have plenty of data to visualize in the form of a graph, then Sigma may be the way to go. It handles large graphs better and is more interactive, so you are free from the hairball issue that can be the case with some graphs.

But D3 is still considerably flexible. It can be paired with WebGL, which expands its standard capabilities regarding interactiveness. You can even animate each element, based on transitions similar to those in CSS.

The more complicated the visualization, the more computing power you will need. The aforementioned transitions could easily drain your CPU, but the issue can be fixed by adding parameters that will make browsers leverage GPU as well.

All in all, D3 is an outstanding library, with a tremendous community (plenty of resources to be found online), that allows for limitless data visualization and customization. Depending on the complexity of your project, programming with D3 can be either very simple or quite demanding. Regardless of the complexity level, however, D3.js lets you show data in a way that resonates.