#BarsBeRight

#BarsBeRight

Data walks into a bar graph, straightens itself up, and orders a waffle, a donut and some macaronsā€¦

This project came out of a desire to see bar graphs in the wild be a closer representation of the data they depict.

Because that would be nice.


This interactive page allows anyone to create (or recreate) a bar graph based on the information they enter. It also asks the question of whether a bar graph is the right choice of visualisation, and explores how that choice might be shaping our perception of the data story, by offering three alternatives.

Hit ā€œRun codeā€ to create a first set of graphs. Then edit the labels, numbers, colours and unit in the box below, and hit ā€œRun codeā€ again to generate a new set of graphs. If you edit the code and it breaks so that you get a red error message instead of a set of graphs, donā€™t worry, just hit the circular ā€œstart overā€ icon and try again!

Welcome to coding! And donā€™t forget to share what you find - #barsBeRight?


Extra tips in editing the code

  • You can increase or decrease the number of bars, just make sure you have the same number of labels, numbers and colours.
  • For the colours, you can use either hex codes (e.g. "#28A569"), or standard colour names (e.g. "orange").
  • The larger the number of dots you ask it to plot, the longer it will take. (If youā€™re approaching 1 million, I suggest dividing everything by 1,000 and adding ā€œkā€ to your unit!)




P.S. Iā€™ve deliberately left a space for you to add in the bar graph you spotted in the wild for comparison if you like! Cut it out, hold it up to the screen and take a photo. You can zoom in and out to get everything to the right size! If you prefer a higher tech option, take a screenshot, or save the graph image (just the way you would grab anything from google images), and edit it with whatever software you like (MS Paint will do the job!) to add in your own image of the original bar graph. If you create something fun by doing this comparison, please share it online using #barsBeRight.

Hereā€™s one I made earlierā€¦



Background photo by bharath g s on Unsplash