24. IMAGEN:
The goal of Data visualization is to communicate
information clearly and efficiently to users via the
statistical graphics, plots, information graphics,
tables, and charts selected. Effective visualization
helps users in analyzing and reasoning about data
and evidence. It makes complex data more
accessible, understandable and usable.
WIKIPEDIA
26. IMAGEN:
Data visualization is the mix of many
disciplines whose goal is to communicate
data-based information in a visual way with a
certain objective to a certain target audience.
COMPUTER SCIENCE
STATISTICS
GRAPHIC DESIGN
...
disciplines
visual way
objective target audience
INFORM
EXPLORE
ADMIRE
...
IMAGE
VIDEO
INTERACTIVE APP
...
MAINSTREAM
IN-COMPANY
JOURNALISTS
...
38. BETTER
COMMUNICATION
Videogames Market: $32 billions dollars
Internet Porn Industry: $97 billion dollars
US Defense Budget: $440 billion dollars
Global Pharmaceutical Market: $534 billions dollars
39. Save the Amazon: $21 billion dollars
Videogames Market: $32 billions dollars
Feed every child in the world for a year: $54 billion dollars
Internet Porn Industry: $97 billion dollars
Yearly amount given to charity by Americans: $300 billion dollars
US Defense Budget: $440 billion dollars
Feed and educate every child on Earth for 5 years: $465 billion dollars
Global Pharmaceutical Market: $534 billions dollars
BETTER
COMMUNICATION
51. IMAGEN:
Step 1: Accept that a graphic is a tool for
understanding
Step 2: Be curious and start making simple graphics
about topics you care about. Tons of them.
Step 3: Educate yourself in creating hierarchies,
narratives, stories, etc., that make your
presentations understandable.
Alberto Cairo
58. IMAGEN:
Represent Refine Interact
VISUALIZING DATA
Mine FilterAcquire Parse
PREPARING DATACOLLECTING DATA DATA VISUALIZATIONEXPLORATORY
DATA ANALYSYSDATA WRANGLING
LIKE IF WE WERE COOKING!
76. COLOR
Observers can rapidly differentiate between
only five to ten hues (Healy)
Twelve colors (6+6) recommended (Ward)
Don’t forget white, black and gray
77. SATURATION &
CONTRAST
Use saturated colors for points,
strokes and symbols
Use desaturated colors for fills and
larger areas
Make sure that the elements have
sufficient luminance contrast
83. We organize what we see in particular ways to make sense of visual information.
There are six principles that influence the ways human see and understand visuals.
GESTALT PRINCIPLES
OF PERCEPTION
106. DATA-INK
RATIO
ink used to
describe the data
ink used to describe
everything else
=
The highest
the better!
If it’s high you
have too much
chart junk!
114. AUTHOR-DRIVEN VIEWER-DRIVEN
- Strong ordering
- Heavy messaging
- Need for clarity and
for speed
- Ask questions
- Explore and interact
- Tell your own data
story
PRESENTATION
VISUALIZATION
INTERACTIVE
VISUALIZATION
134. D3.js
D3.js (Data-Driven Documents) is a JavaScript
library for producing dynamic and interactive data
visualizations in web browsers.
- D3 is Not a Charting Library (like Highcharts)
- D3 is Not a Graphics Layer (SVG, HTML + CSS)
- D3 is Not a SVG Polyfill (like RaphaelJS)
D3.js as a data visualization tool, in the sense that its
API has two parts: data (comes with lots of utilities for
processing data) and visualization (to bind and
transform DOM elements)
Ruoyu Sun
Source:
141. Books
- The functional art - Alberto Cairo
- Data + Design - Infoactive
- Raw Data: Infographic Designer - Steven Heller & Rick Landers
- Visual Storytelling with D3 - Ritchie S. King
Online
- Data Visualization & D3.js (Udacity)
- Data Visualization (Coursera)
- Front-end Masters - @Enjalot (GitHub)
- Mike Bostock (link)
- Flowing Data (link)
- Visualising Data (link)
RESOURCES