Stories from a Bar (Chart). Data Visualisation from Scratch P.2

Summary: Intro | A Simple Bar Chart | A Multi-Series Bar Chart

If this post was a painting, it would probably be one of Mark Ryden’s works: it seems I have just gone and done a one detailed blog post. The funny thing is that it’s about bar charts, and everything has already been said about bar charts. In fact a bar chart is a graph so simple, this post should never have been written: yet, the simpleness of a bar chart is actually it’s most dangerous trap. It’s very easy to overdo, and with so few elements it’s tempting to tweak or enhance at least some of them. So this blog post is, above all, about resistance. I will look at what – and why – constitutes as a good bar chart, what are the best practices, and how to fight the horror vacui of a simple plot. We will use D3.js and the blank canvas we have built with zero coding skills in the last post to create a reusable template of a simple bar graph, and then of a multi-series bar graph. This is part of a data visualisation with D3 series, throughout which we will create a set of graphics that can be easily re-purposed for data visualisation projects.

For those willing to learn D3 from scratch, I recommend Scott Murray’s D3 tutorial. Also, the web examples: plenty of people have made their awesome works (tutorials, visualisation examples, code snippets) available. To use words of the President of the United States, these are great, really great. For the impatient ones who prefer to learn only what’s essential, learn it when it’s required, and fix problems ad hoc, this is a post for you.

Two graphs I will be working with are variations of Mike Bostock’s D3 blocks. The procedure is the same as outlined in my previous post: find a piece of code you like, and paste it onto your blank HTML canvas. If something doesn’t work, check the console output (shift + ctrl + i), it will tell you what piece of code fails, in most cases it will also point to the line that failed.

Before moving to the next section, start your local server. If using Python, from the command line, navigate to your project directory and run:

python -m SimpleHTTPServer 8000

If localhost:8000 displays a list of files, we’re ready to go.

A simple graph chart

My number one visualisation is a simple bar chart taken from Mike’s library. Mike has also written an excellent tutorial on how to arrive at this graph starting with no graph at all. It’s very technical but leaves no questions unanswered. I took that graph as a start and firstly, I upgraded it to version 4 of D3 library (the versions slightly differ in syntax and in reading csv files procedure). Then I made modifications to the graph that I feel reflect the best principles of user experience and data visualisation. To accentuate a particular data bar, I’ve included a hover in a darker hue. My graph ended up looking like this:

You can play with this template by downloading this package.

There were two main principles I followed in creating the visualisation:

1. Accessibility

The number one principle is making a visualisation accessible to people with vision impairment. That includes people with colour blindness, but also any other issues with vision such as myopia, old age, or the tired eyes syndrom. One in 20 people are reported to be affected by colour blindness of some kind – 5% of entire population! – and that doesn’t even include the other aforementioned problems. This is very easily forgotten if you’re a young healthy developer, who is passionate about colour and design.

The best designed visualisations are made to include, not to alienate. This principle translates to using a legible font type, a generous font size, and never relying solely on colour in communicating data. Interestingly, it’s not only the vision impaired that struggle with colour. Edward Tufte talks about the misleading quality of colour in his famous Envisioning Information : “any color coding of quantity (whether based on variations in hue, value, or saturation) is potentially sensitive to interactive contextual effects. These perceived color shifts, while an infrequent threat to accuracy of reading in day-to-day information design, are surprising and vivid – suggesting that color differences should not be relied upon as the sole method for sending a message amidst a mosaic of complex and variable data.”[1] Colour is always part of a bigger picture: the application, the article, the rest of the graph. Colours interact with each other, and what we perceive as colour is dependant on the lightning, our current surroundings, the quantity of colour used, and its neighbouring colours. [2]

A good practice to follow: avoid colour combinations that are the hardest for colour blind people to decode, e.g. green & red, green & yellow, blue & purple. Instead, consider using high contrast; most of us can distinguish differences in contrast, saturation, and brightness. Using monochrome colours could be a good idea – not only is monochrome super stylish, it also makes a designer perceive the world just as a person with disability would. If using colour, combinations of yellow and blue, and red and blue are safe-ish options. Also, colour works great as a secondary indicator in distinguishing data points or accentuating them. To find accessible colour combinations look for such palettes on the web. To create my graph’s palette I’ve used a web app coloursafe.

In my example, I’ve done some very subtle modifications of colour also on both axis: they are of a slightly lighter shade of gray than the rest of text. This has been done as once that context information has been learnt, it becomes less important to the user, hence can be “faded away”.

2. Communication

Data should be presented to the reader in the most effortless way possible. When a person looks at the graph, it should be immediately obvious what the graph is about.

Based on this principle, my base graph contains x-axis and y-axis. Bars are labeled too: my take on this is that the less eye movement is required the bigger the win. Edward Tufte puts this more elegantly: “clear, detailed, and thorough labeling should be used to defeat graphical distortion and ambiguity. Write out explanations of the data on the graphic itself. Label important events in the data.” [3]

Tooltips and clicks look cool (and certainly feel great once we’ve designed them), but are useful only in very specific cases. Tooltips work well in communicating a piece of information secondary importance, that shown on the graph obstructs the main piece of information. Introducing mouse clicks is justified in even fewer cases, as they require a conscious action from the users. Depending on how web-savvy a user is, it can be more or less obvious that an object can be interacted with. This principle is the basis of User Experience-driven software development: the less clicks, the better the user engagement.[4]

The scale used in plotting data matters too. A good scale allows the user to see relative differences between the data points. This D3 example uses a scale that is automatically computed for any data points you’ll use. That’s super handy as you don’t need to worry about computing it for every single visualisation.

Multi-series bar chart (grouped)

My second example is a template for multi-series graph chart. A graph chart like this allows to compare multiple series of data: super powerful to spot differences between study groups, or of the same metric over time. What is really cool about this template is that it can scale to more data series with no change in the code (besides adding a new colour value for the series).  I’ve used the same principles described above: accessibility (see the colour contrast) and communication (added a legend under the graph). The graph files are packed in this zip file.

And a bonus visualisation: yes, it scales!

The files mentioned in the post above are available to download with this zip package. Files with suffix _v4 are a spin off of Mike Bostock's simple graph bar, and ones with the suffix _multi are my version of a multi-series bar chart from the same library.


 Post Scriptum

An interesting read on the subject of graph types is Stephen Few's Show Me the Numbers quasi-encyclopedia, in which he categorises types of quantitative messages and matches them with appropriate visualisation types. On the side, he throws in some bad and good examples of data visualisation. There are also plenty of excellent examples on the web. I've used the following sources to compile this post - a highly recommendable read for anyone working with visualisation and interaction design:

[1] Tufte E., Envisioning Information. 1990, Graphics Press.

[2] Ware C., Information Visualization. Perception for Design. 2012, Morgan Kaufmann.

[3] Tufte E., The Visual Display of Quantitative Information. 2001, Graphics Press USA.
by Edward R. Tufte (Author)

[4] Cooper A., About Face 3: The Essentials of Interaction Design. 2007, John Wiley & Sons.


Leave a Reply