05 Data Visualisation I

Today: Data Visualisation

● Communication

● Motivations for visualisations

● Introduction to D3.js

Consider ...

“... data visualization is not an exact science. There is rarely,

if ever, a single right answer or single best solution. It is much

more about using heuristic methods to determine the most

satisfactory solutions.”

p20, Andy Kirk, Data Visualisation - a successful design process (2012)

http://site.ebrary.com/lib/dublincu/detail.action?docID=10642563

What is Data Visualization?

• Visual Representation of Data

• For exploration, discovery, insight, ..

• Interactive component provides more insight as compared to a static image

Image credits: Yahoo Finance, IBM

Data Visualization: A Tool for Effective

Communication

● Visualization is any technique for creating images, diagrams, or animations

to communicate a message.

● Visualization through visual imagery has been an effective way

to communicate both abstract and concrete ideas since the dawn of

humanity.

5

Graphic Communication

AKA Visual Communication

Cave Paintings → Written Word → Illuminated Manuscripts → Printed Word →

Digital Age → Modern Media

Media: “all forms of printed paper or material (books, magazines, newspapers,

brochures, flyers, signage, and billboards), the Internet, mobile phones and

handheld devices, television, radio, CDs and DVDs, videos, video games, films,

…”

Graphic Communication

Sender (Designer, Author, Client)

Receiver (Audience)

Medium (delivery platform) Message (information

or effort to persuade)

Discuss:

Other types of communication

“The medium is the message”

Graphic Communication

● Stages of understanding○ Sensing - your brain seeing colours and shapes

○ Perceiving - what does it show? big, small, bright, red,

○ Interpreting - what does it mean? good, bad, increasing

○ Comprehending - what does it mean to me? relevant, consequences

● Communication Goals:

○ Information

○ Persuasion

○ Education

○ Entertainment

Information

Structured data

Design principles:

Structure is key

Level of detail - macro v micro

Layout, Colour

Important to have good source data - high quality

informationisbeautiful.net

Persuasion

Communication to provoke a particular response

E.g., Advertising → using information to present a message

Factual (rational appeal) vs Emotional (values, opinions, attitudes)

Design principles:

Research audience

Illustrations, themes, colours, grouping → attract viewer’s eye

Education

transferring knowledge and skills

Textbooks, online learning resources, brochures, movies

Design principles:

Divide information into chunks (hierarchy - trees, nests, etc.)

Legibility is key (the quality of being clear enough to read)

Progressive disclosure

Entertainment

pleasure, diversion, amusement

art, video games, film, television, ebooks

Design principles:

focus on narrative

how constructed (lighting, layout, multimodality) → the medium

Style ...

Information is Beautiful - David McCandless

http://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?l

anguage=en [start ~12m]

7 things you need to know aboutData Visualization

1. Think twice before deciding to go for data visualisation. If you don’t have really compelling data that helps to tell your story, it’s probably better to stick to producing good copy. Putting one number in a circle is not data visualisation!

2. Look carefully at the data before deciding on the story. What are the most interesting comparisons (including significant outliers)? How have values changed over time?

3. Be selective about the data. Overloading a visualisation will prevent your main messages getting across

4. Use visual storytelling to build engagement. good data visualisations engage readers using story structure

7 things you need to know aboutData Visualization

5. Choose the format that fits the data and the story. Different chart types (bar, line, pie, scatterplot, bubble chart, tree chart, timeline …) work with different kinds of data. Maps are always popular, as long as your data includes relevant geographical comparisons

6. Good design should help the user to understand the story. Colour, fonts, iconography and other design elements all affect the readability of data visualisations.

7. Producing an effective data visualisation requires collaboration. Different skill sets are required to produce visualisations at each stage of the production process (data analysis, story development, charting, design).

Types of Data Visualization

• Scientific Visualization –

– Structural Data –Seismic, Medical, ..

• Information Visualization

– No inherent structure –News, stock market, top grossing movies, facebook connections

• Visual Analytics

– Use visualization to understand and synthesize large amounts of multimodal data –audio, video, text, images, networks of people ..

Scientific Visualization

Information Visualization

Visual Analytics

• Integration of interactive visualization with analysis techniques toanswer a growingrange of questions in science, business, andanalysis.

• Making sense of multimodal data -audio clips, video, photographs,transcripts, …

Visualization of Napoleon’s Army

• Hurricane Visualization for the common man

Demo:http://www.msnbc.msn.com/id/26295161?preferredName=Gustav

Image Credits: Stamen Design

Impact of Visualization • John Snow’s Cholera Map

The September 1854 cholera outbreak was centered in the Soho district, close to Snow's house. Snow mapped the 13

public wells and all the known cholera deaths around Soho, and noted the spatial clustering of cases around one

particular water pump on the southwest corner of the intersection of Broad (now Broadwick) Street and Cambridge (now

Lexington) Street. He examined water samples from various wells under a microscope, and confirmed the presence of an

unknown bacterium in the Broad Street samples.

As part of the BBClaunching their new showcalled Truth about crime,they have launched a new“Crime Map” website thatuses heatmaps to showreal crime data for Oxford,England.

The heatmaps are visualrepresentations of all thecrime data available

Truth About Crime - Charts & Graphs can communicate data

What makes a good visualisation?

Edward Tufte

Viewer should “think about substance rather than methodology …”

“Graphical excellence … gives the viewer the greatest number of ideas in the

shortest time with the least ink in the smallest space”

Stephen Few - “Show Me the Numbers” (2012)

Well told stories - simple, seamless, informative, true, contextual, familiar,

concrete, personal, emotional, actionable, sequential

Kirk’s principles of Good Data Visualisation

Good data visualisations are:

1. Trustworthya. Inappropriate colour palettes or fonts

b. Unnecessary chart junk

2. Accessiblea. Useful and understandable

b. Reward vs Effort (complexity is sometime okay!)

3. Elegant a. Thorough (get the little details right!)

b. Stylish

Andy Kirk, “Data Visualisation” (2016)

What is “good” visualisation?

https://www.menti.com/bbacde

Provide 1 or 2 word descriptions for what makes a good visualisation.

I’ll show the results after the break.

What is D3.js?

Javascript library for creating data visualisations in the browser

● D3 stands for Data-Driven Documents. It is an open-source JavaScript

library developed by Mike Bostock to create custom interactive data

visualizations in the web browser using SVG, HTML and CSS.

● D3 provides a great deal of ease and flexibility to create these data

visualizations. It is dynamic, intuitive and needs minimum amount of effort.

● Official web site: d3js.org

● D3 Source code: https://github.com/d3/d3

D3.js doesn’t ...

● support older browsers

● generate prepared visualisations for you (unlike Google Fusion Tables,

Tableau etc.)○ so you generally don’t do Processing or Analytics in D3.js

● hide your original data - it’s all sent to the client to do the graph generation.

So be sure you want it exposed!

Web Standards

HTML - HyperText Markup Language

DOM - Document Object Model

CSS - Cascading Style Sheets

JS - JavaScript

SVG - Support Vector Graphics

HTML

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Page Title</h1>

<p>This is a really interesting paragraph.</p>

</body>

</html>

DOM

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Page Title</h1>

<p>This is a really interesting paragraph.</p>

</body>

</html>

parent

child

siblings

Hierarchical structure of HTML elements (<element></element>)

CSS - Cascading Stylesheets

HTML is used to define the structure and semantics of your content, CSS is used

to style it and lay it out. So for example, you can use CSS to alter the font, color,

size, and spacing of your content, split it into multiple columns, or add animations

and other decorative features.

body {

background-color: white;

color: black;

}

Selectors h1 /* Selects level 1 headings */

p /* Selects paragraphs */

.caption /* Selects elements with class "caption" */

CSS

Rules

color: pink;

background-color: yellow;

margin: 10px;

padding: 25px;

p.explain {

font-size: 12px;

line-height: 14px;

color: black;

}

D3.js uses CSS selectors to identify elements on which to operate

selector

rules

JavaScript

Scripting language (not Java)

Either include in <script> or call from external file

<body>

<script type="text/javascript">

alert("Hello, world!");

</script>

</body>

<head>

<title>Page Title</title>

<script type="text/javascript" src="myscript.js"></script>

</head>

SVG - Scalable Vector Graphics

This is an XML-based vector image format for two-dimensional graphics with

support for interactivity and animation. Text based image format (like HTML but for

shapes, lines, colours, animation)

Markup code can be included directly in HTML documents

Scales (zoom in and out without losing quality)

Example

http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5

http://bost.ocks.org/mike/bar/

http://bl.ocks.org/mbostock/4062045

http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#Centered_labels

Kaggle

Kaggle - https://www.kaggle.com/datasets

Resources

[Ref 1] John Dimarco, Digital Design for Print and Web An Introduction to Theory, Principles, and

Techniques, (Part 1 only), https://www-dawsonera-com.dcu.idm.oclc.org/abstract/9780470639184

● David McCandless, The Beauty of Data Visualization (TED talk)

http://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?language=en

● ProPublica Guides, Data Style Guide, https://github.com/propublica/guides/blob/master/news-

apps.md - very good source of general design rules, sections on Accuracy, Axes, Charts, Colors,

Legends, Maps, Money, Numbers, Sources and Time are relevant to CA682.

● History of Visual Communication, http://www.citrinitas.com/history_of_viscom/

● See Week 6 on Loop for a list of suggested readings -

https://loop.dcu.ie/mod/page/view.php?id=366204