Data visualisation

We use visualisations to transform complex information, like tables of numbers, into memorable images that help members spot patterns and take action.

Here we outline some of the do's and don'ts we follow when designing any type of data visualisation, from line charts to pie charts.

To keep things simple, we've split it into 4 sections:

Guiding principles

Data visualisations at Bulb are:

Answer first

Ask yourself, "what do I really want the viewer to learn or understand from this visualisation" and lead with that.

Focussed

Aim to answer a single question well, not many questions poorly. Multiple visualisations might be better than one.

Honest

Don't distort the data. Whatever the data shows, present it in an unbiased, accurate and truthful way.

Anatomy

An introduction to the structure and language of data visualisations.

A diagram explainign different parts of a data visualisation

  • Surrounding context - Carefully chosen surrounding context can help clarify what the chart shows, without the need for a title.
  • Date range - In this example the date is important, but it won't always be.
  • Sum total - A total of the information shown in the visualisation.
  • Data point - The data that's in the spotlight.
  • Axis line - Lines that help the viewer connect data points to labels.
  • Tick line - A small line that connects the label to the data point.
  • Baseline - The bottom of a graphic, it always represents zero.
  • Label - Content that gives viewers context about the data point.

Data decisions

Guidance on what data to show and how to show it.

🛑 Don't
Start the baseline at values other than zero

Reason
The majority of charts a person will have come across before will have started at zero. Tweaking this logic, which people have come to expect, can make differences look more dramatic but could reduce overall trust in Bulb.


✅ Do
Keep it simple, and show one or two data types at most

Reason
Combining more than two data types forces the viewer to spend more time trying to understand what they're looking at. At Bulb, we want anyone using our products to find what they're looking for as quickly and easily as possible, so we recommend against it.


🛑 Don't
Show a 'sum total' for a chart that has missing data points without being clear about why they're missing

Reason
Sometimes a chart might show missing data points. But if we don't explain what's going on to the viewer, and why that might be happening, it could be confusing and potentially misleading.


🛑 Don't
Overload charts with too many data points

Reason
Squeezing lots of data points into a chart can make it hard to read and overwhelming. This can be a particular problem with bar charts. We want our charts to simplify things, not make them more complex, so we recommend against it. Instead, use white space to make sure there's a clear boundary between data points.


🛑 Don't
Use pie charts

Reason
Humans aren't great at reading angles. You can read more about the issue with pie charts over at from Data to Viz. If you're tempted to use a pie chart, a better alternative would be a stacked bar chart.


Appearance

Design choices in type, colour, and shape.

✅ Do
Use brush stroke textures carefully

Reason
Brush strokes blur the edges of data, so could be misconstrued as us trying to hide something. For that reason, we only use these textures on data sources that demand less scrutiny.


✅ Do
Be creative with these guidelines when designing charts for marketing material

Reason
At Bulb, we like to use charts in our marketing materials - just take a look at our homepage, for example. Because as well as our words, the visuals we use say a lot about Bulb, and help us communicate honestly and openly. We want to build trust, and inspire more people to become members. So for that reason, don't be afraid to play with our foundational brand elements; type, colour, shape, space and scale, to create unique and novel visuals.


✅ Do
Avoid using a legend, unless unless you really have to

Reason
If you need to include a legend on a graphic, it could be a sign you're trying to include too much information. If the design forces the viewer to jump back and forth between the legend and the graphic to make sense of what it's showing, you probably need to rethink it.


✅ Do
Use icons in surrounding context to summarise chart trends

Reason
An icon can communicate complex ideas quickly and neatly, encouraging the viewer to investigate in closer detail.


Typography

✅ Do
Use Graphik for all data visualisations

Reason
Graphik is the Bulb brand typeface and should be used everywhere, data visualisations included.


✅ Do
Use monospace numerals

Reason
Using monospace numerals (numerical characters which have uniform width), makes scanning information vertically easier, like reading vertical axes on a chart.


🛑 Don't
Capitalise label titles

Reason
Always use sentence case for titles, headings, form labels, buttons, etc. It's easier to read. This means only capitalising the first letter of the first word, not the first letter of every word. The exception is for proper nouns, such as Bulb, Ofgem or Warm Home Discount.


✅ Do
Follow Bulb's formatting style guide

Reason
It's important to be consistent when putting content together. The formatting should be the same across all of our materials, from blog posts, to emails, to data visualisations.


Colour

✅ Do
Use Bulb pink or Bulb green when showing any data related to renewables, to highlight Bulb alongside our competitors. For competitors, use Bulb Blue.

Reason
Bulb pink and green are our primary brand colours. We use it on charts to help Bulb stand out so it's easier to compare us against our competitors.


🛑 Don't
Use Bulb pink or green to highlight negative data or trends

Reason
Our primary brand colours should be reserved for positive moments. Using them to highlight a negative trend could subconsciously send the wrong message.


✅ Do
Use Bulb blue 'tintiest' for gridlines and axis lines

Reason
Things like gridlines and axes should sit in the background of a visualisation and allow the data to take center stage. We use light blue rather than grey because it sits more comfortably alongside our blue text.


✅ Do
Include at least 2px white space to communicate a boundary between colours

Reason
This leaves enough space to indicate clear boundaries between data points.


✅ Do
Review designs with a colour blind simulator

Reason
Making our charts readable for colour blind viewers means they're even clearer for all viewers.


🛑 Don't
Use pattern when colour will do

Reason
Pattern can add noise and emphasis to parts of a visualisation, making it harder to scan. If a chart or graphic feels like it needs some pattern adding to it because the colours you're using are too similar, consider working with the brand team to expand the Bulb colour palette instead. However, as a rule, if you need to use more than 3 colours, it might be a sign it's too complex.


Shape

✅ Do Carefully soften corners and connections when possible

Reason
We use rounded corners across the product and marketing site. These align with the soft, energetic swooshes of our Bulb logo. To keep visual design consistent, we use rounded corners in our data visualisations too. However, be careful not to round corners so heavily that the integrity of any data could be questioned.


🛑 Don't
Use gridlines by default, only as a thoughtful addition

Reason
Gridlines add to the visual noise of a graphic, making it harder to read. Only use them if they really add something, and your graphic doesn't work without them. when entirely necessary.


🛑 Don't
Use a 3D perspective

Reason
Using a 3D perspective can make data visualisations feel more dynamic and interesting. However, it's also a widely recognised trick to warp viewers' understanding of the data they're looking at. We don't do that at Bulb. We keep things simple, and honest.


🛑 Don't
Let design decisions corrupt the reliability of the data

Reason
In the world of data visualisation, making sure your designs are reliable is known as "graphical integrity". In other words, while it's good to get creative, design choices shouldn't misrepresent the data, and leave visualisations open to misinterpretation. Distorting data risks eroding trust in Bulb, so we don't do it. To avoid this, It's a good idea to test your data visualisation with people who haven't seen it before, to make sure they can understand it.

Further reading

If you're interested in reading more about data visualisations, and their use in digital products, check out the resources listed below:

The work of Edward Tufte

Shopify, Polaris: Data visualizations

Google, Material Design: Data visualizations

Above All Else Show the Data

Designing for "live data": Let's Talk About Dials