Data visualization in a nutshell
•
22 likes•4,418 views
Introduction to Data Visualization: the definition, the why, the process, the basics, the story and the tools.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Data visualization in a nutshell
Similar to Data visualization in a nutshell (20)
More from David Alayón
More from David Alayón (7)
Recently uploaded
Recently uploaded (20)
Data visualization in a nutshell
- 3. DataPointed Viz by: ... and I’m here to talk about Data Visualization
- 4. ... and I’m here to talk about Data Visualization DataPointed Viz by:
- 5. ... and I’m here to talk about Data Visualization DataPointed Viz by:
- 6. ... and I’m here to talk about Data Visualization DataPointed Viz by:
- 7. ... and I’m here to talk about Data Visualization DataPointed Viz by:
- 8. ... and I’m here to talk about Data Visualization DataPointed Viz by:
- 12. PLOS Viz by: VEGETATIVE STAGE BRAIN DAMAGE HEALTHY PERSON
- 13. IMAGEN:
- 15. Aaron Koblin Viz by: AIR TRAFFIC OVER NORTH AMERICA
- 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 ...
- 27. THEWHY
- 28. IMAGEN:
- 31. FRAGMENT FIRST WORLD MAP - PIRI REIS CARTOGRAPHY EXPLORE
- 33. REAL MADRID VS ATLÉTICO MADRID - CARTODB CARTOGRAPHY EXPLORE INFORM ADMIRE
- 34. FIRST TIME-SERIES - 10th century OBSERVATION OFOURWORLD EXPLORE
- 36. THE LARGEST STARS IN THE UNIVERSE 2015 EXPLORE INFORM ADMIRE OBSERVATION OFOURWORLD
- 37. CHOLERA MAP - DR SNOW PROBLEM SOLVING
- 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
- 41. DETECT PATTERN
- 42. DETECT PATTERN
- 43. THEPROCESS
- 44. IMAGEN:
- 45. IMAGEN: “Obesity is, on average, inversely proportional to the average education of the population” Can you show the evidence for this assertion?
- 46. THE FUNCTIONAL ART - ALBERTO CAIRO
- 47. THE FUNCTIONAL ART - ALBERTO CAIRO
- 48. THE FUNCTIONAL ART - ALBERTO CAIRO
- 49. THE FUNCTIONAL ART - ALBERTO CAIRO
- 50. THE FUNCTIONAL ART - ALBERTO CAIRO
- 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
- 52. IMAGEN: Represent Refine Interact DATA VISUALIZATION
- 53. IMAGEN: Represent Refine Interact DATA VISUALIZATION Mine FilterAcquire Parse EXPLORATORY DATA ANALYSYSDATA WRANGLING
- 54. IMAGEN: - SHAPED
- 56. IMAGEN: NoSQL ETL Statistics Machine LearningData Mining Communication Graphic Design Web scrapping API Storytelling
- 58. IMAGEN: Represent Refine Interact VISUALIZING DATA Mine FilterAcquire Parse PREPARING DATACOLLECTING DATA DATA VISUALIZATIONEXPLORATORY DATA ANALYSYSDATA WRANGLING LIKE IF WE WERE COOKING!
- 59. IMAGEN: WE HAVE THE DATA! IT’S PREPARE TO COOK! LET’S COOK!
- 60. HAVE A GREAT STORY William Doree Photo by:
- 63. KNOW YOUR CONTENT Victoria Hellner Photo by: RESPECT YOUR AUDIENCE
- 64. IMAGEN: DECIDE WHICH DATA TO ILLUSTRATE Pablo Peron Photo by:
- 65. DECIDE HOW TO ILLUSTRATE Antonis Androulakis Photo by:
- 67. TYPES OF DATA Ordinal (size: S, M...) Quantitative (counts: 1, 2, 3...) Fields (altitude temperature...) Nominal (shape, geo...) Cyclic values (directions, hues...) DISCRETE (no between values) CONTINUOUS (values between) ORDERED (values are comparable) UNORDERED (values not comparable)
- 68. LIFE EXPECTANCY GEOGRAPHICAL REGION GapMinder Viz: INCOME PER PERSON
- 69. LIFE EXPECTANCY Quantitative Fields GEOGRAPHICAL REGION Nominal GapMinder Viz: INCOME PER PERSON
- 71. HOW MANY TIMES BIGGER?
- 72. HOW MANY TIMES BIGGER?
- 73. x7
- 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
- 84. FONTS Data visualization Data visualization Data visualization Data visualization Datavisualization
- 86. ICONS Easy to understand (icon + measure)
- 87. Sentences are to speech what charts are to visual encodings CHARTS VISUAL ENCODINGS DATA TYPES RELATIONSHIPS CHART TYPES++ =
- 88. BAR CHART Quantitative dependent variable Discrete / nominal independent variable POSITION + LENGHT
- 89. LINE CHART Quantitative continuous dependent variable Quantitative continuous independent variable POSITION
- 90. SCATTER PLOT Quantitative independent variable Quantitative independent variable POSITION + DENSITY
- 91. PIE CHART Relative portions of a quantitative dependent variables On single dimension (100%) ANGLES
- 92. STACKED BAR CHART Two accumulating quantitative dependent variable Independent variables POSITION + LENGTH
- 95. ANATOMY OF A CHART
- 101. CHERNOFF FACES
- 102. DASHBOARD Ducksboard
- 105. Ryan MacEachern DESIGN X FOOD
- 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!
- 107. THESTORY
- 108. HAVE A GREAT STORY William Doree Photo by:
- 109. PRESENTATION VISUALIZATION INTERACTIVE VISUALIZATION INTERACTIVE STORYTELLING Used for communication Doesn’t support user input
- 111. TV & TWITTER ADS
- 113. PRESENTATION VISUALIZATION INTERACTIVE VISUALIZATION INTERACTIVE STORYTELLING Used for discovery Rerenders based on input
- 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
- 116. The Guardian Viz:
- 118. Bestiario Viz:
- 119. Bloomberg Viz:
- 121. DataViva Viz:
- 122. PRESENTATION VISUALIZATION INTERACTIVE VISUALIZATION INTERACTIVE STORYTELLING Mix between presentation and interaction
- 126. Drones Viz:
- 127. Periscopic Viz:
- 129. Flexibility Productivity ASSEMBLY C / C++ Python / Ruby Excel
- 133. SVG <path d=‘ M 256,213 C 245,181 206,187 234,262 147,181 169,71.2 233,18 220,56 235,81 283,88 285,78.7 286,69.3 288,60 289,61.3 290,62.7 291,64 291,64 297,63 300,63 303,63 309,64 309,64 310,62.7 311,61.3 312,60 314,69.3 315,78.7 317,88 365,82 380,56 367,18 431,71 453,181 366,262 394,187 356,181 344,213 328,185 309,184 300,284 291,184 272,185 256,213 Z’> </path> Tavmjong Animated:
- 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:
- 135. D3.js · Binding API var svg = d3.select('svg') svg.append('circle') .attr({ cx: 100, cy: 100, r: 40, fill:'#25B0B0' }) svg.append('circle') .attr({ cx: 350, cy: 100, r: 40, fill:'#25B0B0' }) @Enjalot Tutorial:
- 136. D3.js · Non- Binding API var quant = [0, 5, 10, 15, 20]; var qual = ["big", "small", "medium"]; var qScale = d3.scale.linear() .domain(d3.extent(quant)) .range([10, 100]) quantValue = qScale(7); @Enjalot Tutorial:
- 137. D3.geo function draw(geo_data) { "use strict"; var margin = 75, width = 1400 - margin, height = 600 - margin; var svg = d3.select("body") .append("svg") .attr("width", width + margin) .attr("height", height + margin) .append('g') .attr('class', 'map'); var projection = d3.geo.mercator() .scale(150) .translate( [width / 2, height / 1.5]); var path = d3.geo.path().projection(projection); var map = svg.selectAll('path') .data(geo_data.features) .enter() .append('path') .attr('d', path) .style('fill', 'lightBlue') .style('stroke', 'black') .style('stroke-width', 0.5); };
- 138. dimple.js
- 140. D3.js - Protovis (http://mbostock.github.io/protovis/) - Vega (https://trifacta.github.io/vega/) - Prefuse (http://prefuse.org/) Dimple.js - NVD3 (http://nvd3.org/) - Rickshaw (http://code.shutterstock.com/rickshaw/) - Highcharts (http://www.highcharts.com/) Tableau - RAW (http://raw.densitydesign.org/) - Chartio (https://chartio.com/) - Plot.ly (https://plot.ly/)
- 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