Week 8 – The Beauty of Data Visualisation

Screen Shot 2016-09-07 at 5.13.07 AM.png

The Billion Pound-O-Gram sourced from informationisbeautiful.net by David McCandless

The Beauty of Data Visualisation by David McCandless
Designing information to make more sense and tells a story. This is the billion dollar-o-gram. It was created out of frustration of non-sensical visual. David McCandles uses colours as motivation behind money (purple is fighting, red is giving money away, and green is profiteering). You start to see pattern and connection between numbers that would otherwise be scattered across multiple news report.

You can use this diagram to cross reference debt ratio between nations. A landscape to explore with eyes (an information map).

mountains_molehills_2015_011.png

Mountains Out of Molehills sourced from informationisbeautiful.net by David McCandless

The height is the intensity in certain fears as reported in the media. Finding hidden patterns in data is possible through data visualisation. Peaks occur at the same month every year. April isn’t a massive month for video games but November is. April 1999 was the columbine shooting. Another pattern can be spotted in the gap of September 2001.

Phrase: Data is the new oil. David prefers “Data is the new soil”. It’s a fertile medium. Interesting things can appear and patterns can be revealed from data visualisations.

peak-breakup-times-on-facebook_52b07625a96ce_w1500.png.jpeg

Peak Break-Up Times sourced from informationisbeautiful.net by David McCandless & Lee Byron

10,000 FB updates used as data to create this data visualisation. If you ask the right kind of questions and word it in the right way, interesting things can emerge.

Visual-CV.pngVisual Work Experience sourced from visualising data.com by David McCandless

Sensitivity to idea of grid, space, alignment, and typography. Everyday all of us are being blasted by information design. There is a demand of visual aspect of visual information. It is effortless and pours in. It’s a relief, or coming across a clearing in the jungles.

main-qimg-7d75654e228ae86936002c598e4fb439.png

Same Bandwidth as a Computer Network sourced in The Beauty of Data Visualisation by David McCandless

Bandwidth into senses. Language of the eye combined with the mind. Two languages both working at the same time.

Info-is-beautiful-defence-001.jpg

The US Military Budget sourced in TheGuardian by David McCandless

America’s leading military budget in relative to GDP is 7th in the World. Data visualisations in comparison shares that it’s military budget compared to GDP alters our perspective. China 2.1 soldiers, but off course China has an enormous population. China drops to 124th which is tiny if you take into account other data visualisation. We need relative figures that connect to other data so that we could see a fuller picture. That could lead us to change our perspective. Let the data set change your mindset. This could then help us change our behaivours.

military-GDP.jpg

Military Budget sourced in TheGuardian by David McCandless

health_supplements.png
Snake Oil? sourced in informationisbeautiful.net by David McCandless

This is a supplement visualisation converted into data visualisation based on google search results and popular use. The data is stored in a google doc and generating itself from updated living data. It can go beyond data and numbers. Ideas and concepts can also be applied.

leftright_US_1416.gif.png
Left vs. Right sourced in informationisbeautiful.net by David McCandless

Political data visualisation. In order to create a full image, the perspectives of left and right sides needed to be balanced. Design is about solving problems and providing elegant solutions. Information design is about solving information problems and it feels like we have a lot of information problems in society; overload, saturation, break down of trust and reliability, run away skepticism, lack of transparency, and interestingness. Visualisation in information can give quick solutions, even when information is terrible, the clarity created by data visuals can can be beautiful.

Week 4 – Why Graphs?

Alberto Cairo, The Functional Art, 2013
There are a great range of different ways which we could present data to achieve this goal. Designers sometimes chose the incorrect data due to aesthetics, fashion, a casing point would be the overuse of bubble charts (Circular bars).

Screen Shot 2016-08-09 at 2.15.06 PM.png

Market Capitalization of the World’s Biggest Banks image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

Why do we make graphs? To make comparisons easier

The following examples show changes of market capitalisation in various banks in 2007 – 2009 and how much their stocks are worth (That’s what the market thinks they’re worth). The lightest bubbles are 2007, the darker ones are in 2009. We can say over the 2 years, capital decreased in all banks (fall in stock price).

Screen Shot 2016-08-09 at 2.16.06 PM.png

Market Capitalization of Societe Generale image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

What do you think is the difference between the 2007 and 2009 value?
2007 = $80 Billion
2009 = ?

Screen Shot 2016-08-09 at 2.17.01 PM.png

Market Capitalization of the World’s Biggest Banks image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

It looks roughly half in a circle chart.

Our brains and our eyes are good at comparing single dimensions e.g. length, but we are not good at comparing surface areas such as height x width. When a bear runs towards you that opposes a big threat, the brain doesn’t waste time figuring out if the bear is tall or wide and that is the hard wired nature of our vision.

You might make a graph wanting your audience to compare area, but what they will ultimately do is compare heights and width because comparing circles are more complicated than comparing squares. So you need to use the formula A = π r2

While the original chart gave us a good overview in the fall of the capitalised banks, it doesn’t give us access to estimate the difference in banks. Using circles will always lead us to underestimate size.

Screen Shot 2016-08-09 at 2.23.03 PM.pngTree map image sourced from informationisbeautiful.net by David McCandles

David McCandles, Information is Beautiful, 2010, HarperCollins UK
informationisbeautiful.net

Yellow = 780 Billion total cost of financial crisis to the US government
Blue (left) = 500 Billion (New deal, recovery package after the great depression in 1933)
Blue (right) = 823 Billion Nasa’s all time total budget
Blue (Small Bottom) = 150 Million / Martial plan spent to build Europe after WWII in today’s dollar
Green = Other countries bail out for the same expenditure
Red = Africa’s entire debt to the Western Nation

Ranking of different graphic approaches to comparing data

Screen Shot 2016-08-09 at 2.28.05 PM.png 

Approaches to ranking graphs image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

Alberto Cairo, The Functional Art, 2013

Based on human visual perception. We need to tailer the way we show stuff so we are able read easily. The more accurate, the more likely they will take away a correct perception of the patter that you are presenting. This is starting at the top, you can see the arrow saying “Allows more accurate Judgement” to the bottom “Allows more generic judgements”.

Screen Shot 2016-08-09 at 3.31.22 PM.pngScreen Shot 2016-08-09 at 3.31.47 PM.png

Map image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

We use shading height as a general indicator for relative comparisons (Saturation). Whereas comparing things like dollar value we need a more accurate judgement – that is why we need to use graphs that compare length.

Screen Shot 2016-08-09 at 3.32.09 PM.png

 Image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

The goal is to allow your reader to make accurate comparison. A chart based on line to bars sitting on a single axis beats any form of comparison. These 3 charts have the same data imbedded in them, bar graph, bubble chart, colour saturation scale (10 on the left, 7 on the far right). The bar chart makes a better instant comparison compared to the bar chart assuming we don’t have numbers there to help us, including the shading and tonal value that are so close that we probably can’t tell them apart.

Screen Shot 2016-08-09 at 3.33.54 PM.png

 Image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

Here’s the 3 most common charts you would use

Time series chart (left) Plotting changes over time we often see this in market movement (index over a day or year).
Middle Bar Chart (Comparison with 1 dimension) Comparisons between things (Market value)
Right Scatter Plot: Variable on each axis. Interesting to compare things with multiple variables. In this case we have market value on the vertical axis, and profit in the horizontal. We can see that JPMorgan was more profitable even though HSBC had a better market value.

challenger-b.jpg

NASA image sourced from Lecturepod Visualisation Styles: Graphs by Western Sydney University
(Need to be a Western Sydney University Student to access)

Here is an example of how using a scatter plot graph could of saved a lot of lives. Here’s a story, leading up to launch day, it had been colder than usual where normally it would be warm. All through the night before the launch, NASA had debates on whether the launch should go ahead in the next day. O-rings sealing the sections of the booster rockets and possibility of it becoming damaged/unsafe. The booster rocket engineers made the first no launch recommendation in 12 years.

Screen Shot 2016-08-09 at 7.56.19 PM.png

Scatter Plot Graph image sourced from Lecturepod Visualisation Styles: Graphs
by Western Sydney University
(Need to be a Western Sydney University Student to access)

This is 1/13 recommendations. Historical launch order from 1 to 24 of damage to booster seals. This graphic design obscures the 2 most important variables of interest in this case (Relationship between temperature / degree of damage). We see the temperature listed in the nose of the rockets and the degree of damage is listed on the side which is shaded. The rocket engineers decided to order their launch by time instead of temperate and damage.

The booster rocker leaked flames from damaged O-rings the next morning. Edward Tufty took the same data and redrew this in a simple scatter plot data

Screen Shot 2016-08-09 at 8.01.39 PM.png

Shuttle Tufte image sourced from Lecturepod Visualisation Styles: Graphs
by Western Sydney University

(Need to be a Western Sydney University Student to access)

This reveals temperate and O-ring damage. Clear pattern of damage, severity as temperate dropped. It shows that there is always damage below 65degrees Fahrenheit. It shows that the temperature on that day is colder than any other launch. If the engineers presented their case in this mode of data presentation, it may have been more convincing.

Screen Shot 2016-08-09 at 8.04.58 PM.png

Movie Sequel Bar Chart image sourced from Lecturepod Visualisation Styles: Graphs
by Western Sydney University

(Need to be a Western Sydney University Student to access)

Names of different graph types and what they are used for. This is a classic bar chart. It is used a lot because it is easy to use and people have familiarity with it so it is a big advantage. It makes it quick to compare information, you can reveal high and lows at a glance, you can quickly see trends within the data with numerical comparison. (When you’re comparing data across a category, it’s good to use bar charts). This is looking at movie sequels and budgets compared to profits. The estimated budget if placed first, than profit after, than realign the axis point where the profit and estimated budget meet – this may improve visibility.

Screen Shot 2016-08-09 at 8.07.25 PM.png

Movie Sequel Bar Chart image sourced from Lecturepod Visualisation Styles: Graphs
by Western Sydney University

(Need to be a Western Sydney University Student to access)

Screen Shot 2016-08-09 at 9.28.58 PM.png

 Movie Sequel Bar Chart image sourced from Lecturepod Visualisation Styles: Graphs
by Western Sydney University

(Need to be a Western Sydney University Student to access)

Line Chart – Comparing the rise of the terms of commercial art and graphic design starting from the 60’s. These are as popular as bar charts that are frequently used. Line charts connect individual numeric data points. Primary use is to display trends over a period of time. When you’re looking at trends over time e.g. stock price change over a 5 year period. Students often use line charts (error) which indicate a time sequence for a single category instead of a bar chart which make comparisons with categories.

Summary
The selection of visualisation styles can greatly impact on how the audience perceives information to make a good or poor judgement on a topic or area of study. The most familiar form of charts include bar charts, scatter plots, and line charts. People are hardwired to see things in rectangular, linear, and length ways rather than in circumferences or circular spacial perceiving due to how humans have developed over time during our hunter gatherer evolution. The instinct, when a predator runs towards us is to make quick judgements by perceiving forward or up and down. We don’t waste time measuring the size of a predator.

An example of how scatter plots could have saved human lives during a NASA launch in 1986 was in the method of how engineers delivered the information of O-ring failures under cold temperature and conditions. Hierarchy considerations can emphasise the importance of a particular subject and clearly communicate when selecting appropriate visualisation styles to deliver red flags and emergency information.