As I advertised a few months ago, I would provide a talk at the design conference Designers Fiesta on the subject of expanding ones data visualisation vocabulary. The talk took place on a cinema screen and there was a decent turn-out with most of the attendees being completely new to dataviz.
As most of my readers probably couldn’t attend this event, I’ve recorded the audio and the presentation slides, which I’ve uploaded onto YouTube:
So have watch through if you’re interested and please give the video a thumbs-up/like.
It would be great if I could get into do more talks on dataviz and get some more experience there. So far this has been my second presentation I’ve done on the subject.
Transcript:
0:00:06
OK, so welcome to my talk today on expanding your data visualisation vocabulary.
0:00:18
And the field of data visualisation is far more rich and diverse than you would expect, while many people know of simple visualisations such as Bar Charts or Pie Charts there are in fact many more ways to visualise information that are out there…
0:00:37
And is everyone hearing me OK? Is everything fine?
It’s all good?
Excellent, OK.
I see we’re just getting a few more people coming in now.
I’ll carry on.
0:01:05
So, for those who’ve come to this talk out of curiosity and have no idea what data visualisation is here’s a simple definition:
So it’s the: representation and presentation of data to facilitate understanding.
And that comes from Andy Kirk, who’s an expert and writer on data visualisation here in the UK.
0:01:35
And I’ll give you a bit of background on myself: my name is Severino Ribecca and I’ve worked a number of years as a freelance graphic designer. I specialise in information design and on data visualisation and just over three years ago I started a Research Project: the Data Visualisation Catalogue.
And in this project… involved… what it involved was me researching into the many different types of data visualisation that are out there.
0:02:09
And I did it as a way to improve my own knowledge base so I could more effectively work on data focused projects.
After I gathered enough research, I published my findings on a website and I managed to build 60 different reference pages dedicated to each visualisation type after study in each visualisation type intimately and then writing about them I learnt a large knowledge base of different visualisation types how each chart is constructed and to select charts based on what you want them to communicate.
0:02:53
So in this talk I want to use my knowledge to expand your own data visualisation toolkit.
From listening to this talk you should be able to move away from using the same old charts and be more versatile in your approach to data visualisation, develop also some understanding of how visualisations are constructed, look at visualisations based on what functions you need them to perform and to see how rich and diverse the design of charts can be.
0:03:33
So in this talk, first we’ll be looking at the foundational building blocks of what charts are constructed out of, which are the visual encoding methods. Learning this can be useful in your designing of your own visualisations from scratch.
0:03:56
Next, we’ll look at the various functions you need to consider before selecting a chart, what is it that you want to communicate to people, and then finally we’ll go through a list of different chart types, to extend your… to extend your visualisation vocabulary and give you a better selection of tools to visualise your data with.
As well as that, I will also try to provide some examples.
0:04:36
So let’s go through visual encoding, through the some examples of visual encoding methods.
Charts are constructed based on these visual encoding methods and they are the building blocks that determine how data manipulates graphical shapes and forms in order to represent the data.
0:04:59
The way this works is that values such as numbers etc are encoded into graphical language as a way to communicate their data visually.
0:05:12
And first up, is positioned on a scale, so this is using shapes plotted on a one dimensional scale or an a Cartesian coordinate system with the same scale, so for example the higher the value the higher up on the scale the shape is going to appear.
For example, in these dots here, and the lower values are going to go further down and scale towards zero.
So this is one example of a visual encoding method.
0:05:42
Next up is length: so using length of lines or shapes to display differences.
Displaying non-aligned lengths can also affect the interpretation here but it doesn’t necessarily compromise it.
0:05:59
Next we have direction: so using directional lines with arrow heads or ends markers. These are well suited at displaying movement or change.
0:06:13
Angle: using the space between two intersecting lines or shapes that are diverging from a common origin.
0:06:25
Area: using the amount of space contained within 2D shapes to visualise proportions.
0:06:34
Volume: using the amount of space contained within 3D shapes to visualise proportions.
0:06:43
Shading: varying the shades of colours to show differentiation or to show a scale of values.
0:06:54
Now if we were to put these on a scale of their usefulness, we on the uhh… on one side we have the visual encoding methods that are more useful for making accurate analysis and to accurately, more accurately see compare values while on the other side we have visual encoding methods which are better for more general analysis, we’ll see in a big more big picture of the data.
0:07:22
So that’s… a basic view of ratio encoding methods and I want to look on now what is that we’re going to try to show with the data.
0:07:36
Different charts are better at communicating different types of data and messages than others.
Here’s a run-through of some of the things that charts can be useful for showing.
0:07:53
Comparisons: that’s showing the differences or similarities across the data.
0:08:01
Time: showing the data changing over time, usually to find trends.
0:08:12
Correlations: show a relationship between two or more variables if one variable is impacting another.
0:08:24
Patterns: reveal forms or patterns in the data to give it meaning.
0:08:32
Hierarchy: showing how things are ranked and ordered together in an organisation or system.
0:08:42
Connections: show how things are connected.
0:08:48
Distribution: show frequency, how data is spread out or how it is grouped.
0:08:58
Percentage-to-a-whole: show how data is divided to a total amount
0:09:06
Range: show the variation between upper and lower limits on a scale.
0:09:14
Movement or Flow: show the change or transfer of values or objects from one position to another.
And…
0:09:24
Geographical: show data over geographical regions.
0:09:32
So let’s look more at charts themselves, how many how many charts can people name here?
Put some show hands, anyone can give me any names charts that they know… no?
Off the top of your head?
Line Chart? Pie? Bar Chart? OK.
So not a huge amount at the moment which is good so this is ideal for this talk.
0:09:56
So let’s look at some charts that most people are familiar with.
Just somebody mentioned Bar Charts.
0:10:05
So these use the length of horizontal horizontal or vertical bars to show discrete numerical comparisons across categories.
0:10:18
And you may have seen a last talk Deborah covered: Pie Charts and Donut Charts. And these these help to show the proportion percentages between categories by di… by dividing a circle into proportional slices.
This is used to show a part of the whole relationship,
0:10:41
A Donut Chart is exactly the same as a Pie Chart but with the centre cut out, which can be used to add text or graphics into so it can be very useful to save space, you can always add some of the labels there.
0:10:58
Next, we have a Line Graph and that’s used to show trends over time, through the lines journey going up and down across the graph.
0:11:11
An Area Graph is pretty much the same as a Line Graph just with the area underneath the line coloured in.
0:11:21
We have here a Pictogram Chart and in this chart icons represent a unit for example 1 icon could represent 1, it could represent 10 or 100 etc, which readers can then count and it’s to give a more visually engaging alternative to displaying small sets of discrete data.
0:11:49
And then of course is a Timeline, which uses points along a line to display a list of events in a chronological order and here we’ve got a time line of WW1.
0:12:10
And now, it’s time to introduce you to a whole new visualisation of visualise (sorry)
…a new universe of visualisations and expand your mind to many other possibilities.
0:12:29
So first up is a Proportional Area Chart and this chart uses any uses the area of any shape for comparing the values and showing proportions and it’s great to give a quick overall view of the data without the use of scales.
So in this example here I’ve used squares but this could be you could use this for circles triangles etc and if in here is just to show you size to compare the differences in values.
0:13:08
And I have an example here which is used to compare the value of having a large dog and the ecological footprint that has in comparison to a Land-cruiser, which surprisingly is actually a lot more so each of these squares is using the ecological footprint and that comes from GOOD magazine and New Scientist.
0:13:46
Next up is a Histogram, which while it looks very similar to a Bar Chart is different in its function.
Histograms visualise the distribution of data over a continuous interval or certain time period and they help give an estimate to as to where values are concentrated, where the
extremes are in the data and whether there are any gaps or unusual values.
If I was to categorise it under one of the functions I covered before, it’s more suited, it’s well, it’s ideally suited for visualising the distribution of data.
0:14:27
And if you combine two histograms and put them back to back you can produce a Population Pyramid and this chart displays the distribution of population in all age groups and in both sexes.
Population Pyramids are ideal for detecting changes or differences in population patterns and multiple Population Pyramids can be used to compare patterns across nations or selected groups.
0:15:01
And we can see that in this example here of the ‘Urban Age Cities Compared’ so we have each of these various cities across the world and you can see that each of these Population Pyramids have different shapes and this gives us some insight into the populations that are in these cities so Population Pyramids that have a wider top tend to be older populations while Population Pyramids that have a much wider base and a narrower top with a a more triangular shape like… let’s see… maybe one here towards in the bottom and the bottom right now tend to have younger populations and that’s that’s one of the main things that this chart is useful for.
0:16:01
Next chart is a Span Chart and it is used to visualise ranges.
So it’s ideal for displaying data set ranges between a maximum and a minimum value and it uses the length of these bars to visualise that so the beginning of the bar is the start of the range and in the end is the maximum value.
0:16:29
Here’s a variation of another variation of a Bar Chart which is a Stacked Bar Chart and Stacked Bar Charts or Bar Graphs segment their bars of multiple data sets in conjunction of each other and they’re used to show how a category is divided into small to smaller categories and what relationship of each part has to the total amount and the total value of the bar of each bar is all the segment values added together so this is ideal in this example here for…
0:17:11
…comparing total amounts across each groups of some of segmented bars and here we have a very old example and it’s the statistical diagram of international shipping from J.G. Bartholomew ‘Atlas of World Commerce’ and you can see here for each country the changing between sailing ships and as steam ships and how they’ve increased over time.
So here we’ve got blue, blue is used for one category and in the pink is used for another category in this stack together and also shown over time.
0:17:58
Next up we have a 100% Stacked Bar Graph and this is used to show the percentage to the whole of each group and this is plotted by the percentage of each value to the total amount of each group.
This makes it easy to see the relative differences between quantities in each group and in the previous Stacked Bar Graph you had varying widths but in this…
0:18:24
…chart in a 100% Stack Bar Graphs the widths are consistent and they had the same widths and this is used to compare… compare percentages.
0:18:38
And here’s an example here showing the marital status between different generations here and we can see each category, so you’ve got green we’ve got married, a lighter green we’ve got separated and divorced and then the lighter, very light, kind of creamy green is never married.
And you can see over various generations how the marriage percentage of people married has actually gone down over time and this is one good example of how this chart can be utilised. And this comes from the data from the Pew Research Center.
0:19:26
Next chart is a Marimekko Chart, designed, named after the Finnish design company fashion design company and Marimekko Charts are used to visualise categorical data over a pair of variables, they work as a sort of two-way 100% Stacked Bar Graph.
Both axes are a variable with a scale that determine both the width and the height of each segment and this makes it possible to detect relationships between categories and their subcategories via the two variables.
0:20:14
Next up is a Chord Diagram and this type of chart visualises the interrelationship between entities the connections between entities is used to display that they share something in common and this makes Chord Diagrams ideal for comparing the similarities within a dataset or between different groups of data.
0:20:43
And here we’ve got a nice example of that and it’s the ‘Close-Ups of the Genome, Species by Species’ and it shows the large degree of similarity between the first chromosomes of four animals: mouse, monkey, chimp, chicken, to that of a human being and all these lines at the bottom you’ve got, see here at the bottom right you have the kind of human beings and then for each animal the lines are given a different colour.
So for one animal we’ve got red, blue, grey, yellow, etc and you can see how the connections between the chromosomes connect to that of a human being’s DNA.
0:21:35
Next up is a Spiral Plot and this type of visualisation plots time-based data along an Archimedean spiral. The growth begins from the centre of the spiral and progresses outwards.
Spiral plots are versatile and can use bars, lines, or points to be displayed along a spiral path and here’s an example here showing the space weather data and this shows how Spiral Plots are ideal for showing large data sets usually to show trends over large time periods and this makes Spiral Plots great for displaying periodic patterns as seen in this example which visualises space weather data across the year and colour can be assigned to each period to break them up and to allow some comparison between each periods like in this example where each month is coloured.
0:22:51
Next chart is a Scatterplot. Scatterplots are ideal when you have paired a numerical data and you want to see if one variable impacts the other and this is done by displaying a variable in each axis, so to detect if there’s a relationship or a correlation exists between the two.
0:23:21
So here’s, here’s a diagram of the various shapes that, patterns that can occur in a Scatterplot and this can help you read and understand how they work.
And these include positive, so that there’s a positive correlation and this is displayed when values increase together or you can have negative correlation when one value decreases and
the other increase as the other increases so this helps to communicate how two variables impact each other and if there is no correlation here you’ll get ‘null’, which is just a line going across, but then we also have the shape can be described as being linear or exponential or a U-shape.
0:24:23
The strength of the correlation can also be determined by how closely packed points are to each other on the graph, so the more closely packed all the points are together the stronger the correlation and the more spread out the weaker it is.
0:24:42
Bubble Charts work in the same way as a Scatterplot but they display an additional third variable through the area size of the circles.
0:24:55
And I’m going to show you the late Hans Rosling’s Gapminder tool which demonstrates the wealth and health of nations over time.
Do you see it starts off here in 1800s and you can see each of these are coloured based on on each continent.
It’ll come up to the present day and you’ll see how various nations have increased in wealth over time
0:25:52
Next up is a Heatmap and this is another way to find correlations or patterns in the data through the use of Heatmaps and here we’ve got basically a table and each of the cells are filled in based on the data value and this can be using in a couple of ways.
Here we have Heatmaps comparing the…
0:26:22
…comparing political views and there are opinions and each things so you’ve got the various issues and whether people consider them more important or not or least important and in the new rows we have the issues and in the columns we have each of the different political
factions and this is a poll that was carried out in the US so this can be useful to see… y’know, to make some kind of insight into the views over different categories.
0:27:04
But Heatmaps can also be used to show the data over time. So here we have from the Wall Street Journal Battling Infectious Diseases in the 20th century and the impacts of vaccines.
So each of the squares here visualised the intensity of polio across the US and there’s a line that strikes down through towards the ends which shows you where vaccines are introduced
and right afterwards you can see from visualising this data that the vaccine had a huge impact in destroying the rates of polio.
0:27:56
Choropleth Maps provides a way to visualise values over a geographical area to show variations or patterns.
0:28:10
And this is Baron Pierre Charles François Dupin’s map of distribution and the distribution and intensity of illiteracy in France, so the darker regions are the most illiterate and the lighter ones are showing lighter here so this is one of the very earliest drawings of this particular type of visualisation.
0:28:41
And another geographical use of the display of data is with a Bubble Map and Bubble Maps are good for comparing proportions over geographical regions without the issues caused by regional area size as seen with Choropleth Maps and the issue sometimes you get with Choropleth Maps is the larger regions tend to kind of dominate over the smaller ones and this can cut sometimes make it difficult to read values from.
0:29:18
And here is an example of the use of Bubble Maps recently for the recently to visualise exactly where each candidate’s cash came from and this is from Bloomberg politics and they’ve used different colours here for whether they’re Republican or from Democrats and where the where in the country the donors came from.
0:29:53
Next data map is a Flow Map. Flow Maps geographically show the movement of information or objects from one location to another and their amount typically Flow Maps are used to show the migration of migration data of people animals and products and here is an example here…
0:30:20
…and this is Minard’s map of French wine exports in 1864 and it shows you where France’s import is exporting its wine across the world in that time period.
0:30:41
A similar chart to that but without the map is a Sankey Diagram and typically Sankey Diagrams are used to visually show the transfer of energy, money or materials but they can be used to show the flow of any isolated system process.
0:31:04
The width of the arrows or lines are used to show their magnitudes or size and this example here that I’ve demonstrated shows the energy exchange in a light bulb so you start off at one end with the electrical energy and then it’s converted into light and heat energy and you can see this particular light bulb is not very efficient because most of it goes off in heat.
0:31:28
Here’s a bit more of a complicated example of a Sankey Diagram and this is showing the power outputs in a country and in where that power is distributed in the nation.
0:31:47
Another flow… kind of design of chart is a Parallel Set Chart, which is similar to a Sankey Diagram in the way that they showed flow and proportions however Parallel Sets don’t use arrows and they divide the flow path at each displayed line set.
0:32:12
Each line set corresponds to a dimension / data set, which its values / categories are represented in each line divided in that line set and the width of each chart and flow path that stems from it is determined by the proportional fraction of the categories’ total and each flow path can be coloured to show and compare the distribution between categories and in this example I’ve shown here we can see the breakdown of Titanic survivors.
So the the people that survived are coloured in the blue and people are perished were coloured in the in orange and in each line break they’ve divided it down based on sex, whether they’re male, female, age, with a child, adult, and also they broke it down by the
class as well in the cabin so first class, second class, etc, and also the crew, as well you can see where what percentage of what chunk of the people that were aboard the Titanic who perished and who survived the most.
0:33:33
And next up we have a Tree Diagram and this is a way of visually representing
hierarchy in a tree-like structure and in this example here we’ve got the this I’ve displayed the the structure of an organisation or a company.
0:33:56
There are also Icicle Tree Charts that can visualise hierarchical structure and here we’ve broken down the categories of various animals so we’ve got mammals broken down into canines, rodents, felines, canines is broken down into dogs, foxes, wolves, etc and so this is another way to visualise hierarchy.
0:34:22
Then Treemaps are an alternative way of visualising the hierarchical structure of a Tree Diagram while also displaying the quantities for each category by their area size and each category is assigned a rectangle area with their subcategories nested inside of it.
0:34:46
And here’s an example of the Force Awakens’ how much money they produced in revenue worldwide as well each block is the amount there. And this is from Bloomberg.
0:35:03
But we can also change this and convert it into circles with Circle Packing.
So, Circle Packing, also known as a circular Treemap is a variation of a Treemap that uses
circles and contains within each of these circles represents a level in the hierarchy.
0:35:27
So, imagine now in the next dataset that you have to communicate to an audience with the knowledge you’ve gained today you’ll be able to select from a much wider range of charts.
Also I hope that you’ve seen that data visualisation is an interesting creative field not just something relegated to statistics maybe you also be inspired today to create your own chart after seeing the possibilities available so thank you for listening and let me know if you have any questions.
So, just put your hands up and if you’ve got any questions to ask me, I’ll also whoops…
0:36:17
Also, I have a website as well which you can find a list of different charts as well.
You can follow me on Twitter where I post the latest news and research on and some
interesting examples, I also have a Facebook page that I update and on the YouTube channel I have a series of visual guides teaching you on different chart types.
0:36:45
AUDIENCE MEMBER: Do you make most of your charts on Excel?
0:36:50
Ah no, actually, I use typically Illustrator, so have you seen in Adobe Illustrator you can also draw charts, you have the graph tools. Some I can I do from scratch there’s also a list of other tools like d3.js, Tableau, R, which you can generate charts from instead of having to draw everything manually.
[ AUDIENCE QUESTION INAUDIBILE ]
0:37:31
Something maybe like the Spiral Plot I would… there’s some code I think but I believe online it would have to be generated with code, I think to do on Illustrator would be quite difficult to generate this kind of chart, but there are if you’re if you’re familiar of programming you can be you’ll be able to draw from there but I also have on my website links to various pieces of code or software that can generate those charts for you as well and there’s also a website by Andy Kirk called the I think is the Chart Makers Directory and he has a list there of all various company software websites and coding language you can use to generate different charts.
