Something different from your usual line chart

Author
Olaf Muller
Categories
Publish date

Koningsdag is a Dutch holiday where we celebrate the King’s birthday with a drink or two. This national holiday was a day prior the data visualisation workshop and I was therefore divided about giving up the evening part of Koningsdag for a workshop. I was, however, pleasantly surprised and inspired by Nadieh Bremer’s expertise, advice and overall enthusiasm on the subject.

Fronteers, the Dutch society of frontend developers, organised the workshop Creative Data Visualisation Techniques and I attended together with my colleagues: Bart-Jan, Pim, Ruud, Sebastiaan and Tim.

Take some time to sit and think about what works best before you act.

Nadieh Bremer

Brief

I believe this workshop to be a step towards a more creative mindset at VI Company concerning data visualisation and simultaneously towards creating better solutions for the problems we face. Especially considering the financial markets we work for where data is commonly visualised in order to make heaps of information easier to understand.

Introduction to data visualisation

The overall goal was to learn ways to visualise data in a more effective, attractive and fascinating way. Simply put, to make us think different about visualising data and, in doing so, creating something other than your usual line chart.

History

The first recorded data visualisations date back over 200 years ago. One of the first is William Playfair’s visualisation displaying England's exports and imports to and from Denmark & Norway. [credit: Wikipedia]:

Another famous one, by Charles Joseph Minard, about Napoleon's disastrous attempt to conquer Russia [credit: Wikipedia]:

Process before starting a data visualisation

  1. Always start your visualisation with a question.
    • How many deaths are there in Game of Thrones?
    • How many daily credit card transactions are done in America?
    • What grocery item is sold the most in the Ukraine?
  2. When you have a question, you can formulate a goal.
    • My data vis should tell a story.
    • My data vis should reveal hidden patterns or insights.
    • My data vis should encourage people to exercise more.
  3. Figure out what data is must-have and nice-to-have.
    • What variables are there?
    • What period should the data include?
    • What other constraints are there (e.g. data only from a specific city)?

Sketching

The best thing to do is start sketching on paper, using simple plots such as bar charts, line charts, histograms, scatter plots and/or box plots. This should give you a feeling for distribution, spread, mean etc. In order to create a data vis, using effective but unusual shapes, you can project the data on different visuals gathered from inspirational sources and remix it to fit the goal.

The more often you truly think about your visual form, the better you get at it.

Nadieh Bremer

Coding

If the final visual form fits the goal and returns expected and effective results, it’s time to extensively experiment with it in code. If it’s not ready yet, always go back to sketching! The development methods discussed during the workshop included: D3.js, R, Excel and Tableau. The lesson was that function follows form and if you’re motivated enough, limited tool options are merely a challenge.

Exercises

Between lectures, we were assigned various exercises that slowly freed our minds from thinking in existing patterns.

Starting with a group exercise, we had to name every non-essential element in a cluttered bar chart in order to get its most basic form. Another exercise was to name all visual variables we could think of, resulting in a rather impressive list containing items such as length, height, position, colour, motion, text, opacity etc.

Inspiration

A more extensive exercise was all about using non-standard inspiration in order to create a goal driven data vis. We were allowed to choose between four renowned artists: M.C. Escher, Vincent van Gogh, Joan Miró and Piet Mondriaan.

Final exercise

The final exercise was a chance to put all our newfound knowledge to the test and sketch our own data visualisation. No boundaries here, we had to think of a concept and sketch a design within an hour. We don’t know how we thought of it, but as a subject, we used Ben & Jerry’s ice cream and all the flavours they offer.

The process for this concept:

  1. Question: what flavours have B&J released since their inception in 1978?
  2. Goal: Tell people the flavourful story of B&Js rich history.
  3. Data: We were allowed to mock the data but we used Wikipedia as a guide.

The variables we needed were:

  • B&J inception date;
  • all ice cream flavours;
  • individual flavour release dates and;
  • individual sales per flavour over time.

The initial sketch of a flow chart fitted our answer and goal. It was able to show the introduction of flavours over time in combination with their respective sales volumes in percentage. We combined the flow chart with a nostalgic B&J ice cream cup, proving and completing our concept and sketch.

Conclusion

When designing and coding data at VI Company, we should look further than the solution that first comes to mind. The standards, such as line- and bar charts, might often be best considering their benefits (easy to read, interpret and implement), but there are also times when the experience of the user should be considered a higher priority.

Resources

Sites

Books

Back to top