05 data visualisation ifeb 05, 2020 · 7 things you need to know aboutdata visualization 5. choose...
Post on 02-Oct-2020
0 Views
Preview:
TRANSCRIPT
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
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
top related