Download as PDF, PPTX
![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:](https://image.slidesharecdn.com/datavisualizationinanutshell-150805212035-lva1-app6892/85/Data-visualization-in-a-nutshell-136-320.jpg)
![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);
};](https://image.slidesharecdn.com/datavisualizationinanutshell-150805212035-lva1-app6892/85/Data-visualization-in-a-nutshell-137-320.jpg)
![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:](https://image.slidesharecdn.com/datavisualizationinanutshell-150805212035-lva1-app6892/75/Data-visualization-in-a-nutshell-136-2048.jpg)
![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);
};](https://image.slidesharecdn.com/datavisualizationinanutshell-150805212035-lva1-app6892/75/Data-visualization-in-a-nutshell-137-2048.jpg)
Uploaded byDavid Alayón
Data visualization in a nutshell
The document discusses the concept and importance of data visualization, emphasizing its role in clearly communicating complex information through various visual formats. It covers disciplines involved in data visualization, effective techniques for representing data, and tools like D3.js for creating dynamic visualizations. Additionally, it highlights key principles and types of data to consider when designing effective visual graphics.
More Related Content
Similar to Data visualization in a nutshell
Data visualization in a nutshell
- 1.
- 2.
- 3. DataPointed Viz by: ... andI’m here to talk about Data Visualization
- 4. ... and I’mhere to talk about Data Visualization DataPointed Viz by:
- 5. ... and I’mhere to talk about Data Visualization DataPointed Viz by:
- 6. ... and I’mhere to talk about Data Visualization DataPointed Viz by:
- 7. ... and I’mhere to talk about Data Visualization DataPointed Viz by:
- 8. ... and I’mhere to talk about Data Visualization DataPointed Viz by:
- 9.
- 11.
- 12. PLOS Viz by: VEGETATIVE STAGEBRAIN DAMAGE HEALTHY PERSON
- 13.
- 14.
- 15. Aaron Koblin Viz by: AIRTRAFFIC OVER NORTH AMERICA
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. IMAGEN: The goal ofData 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
- 25.
- 26. IMAGEN: Data visualization isthe 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.
- 28.
- 29.
- 30.
- 31. FRAGMENT FIRST WORLD MAP- PIRI REIS CARTOGRAPHY EXPLORE
- 32.
- 33. REAL MADRID VSATLÉTICO MADRID - CARTODB CARTOGRAPHY EXPLORE INFORM ADMIRE
- 34. FIRST TIME-SERIES - 10thcentury OBSERVATION OFOURWORLD EXPLORE
- 35.
- 36. THE LARGEST STARSIN THE UNIVERSE 2015 EXPLORE INFORM ADMIRE OBSERVATION OFOURWORLD
- 37. CHOLERA MAP - DRSNOW PROBLEM SOLVING
- 38. BETTER COMMUNICATION Videogames Market: $32billions 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
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. IMAGEN: “Obesity is, onaverage, 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: Acceptthat 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 DATAVISUALIZATION
- 53. IMAGEN: Represent Refine Interact DATAVISUALIZATION Mine FilterAcquire Parse EXPLORATORY DATA ANALYSYSDATA WRANGLING
- 54.
- 55.
- 56. IMAGEN: NoSQL ETL Statistics Machine LearningDataMining Communication Graphic Design Web scrapping API Storytelling
- 58. IMAGEN: Represent Refine Interact VISUALIZINGDATA Mine FilterAcquire Parse PREPARING DATACOLLECTING DATA DATA VISUALIZATIONEXPLORATORY DATA ANALYSYSDATA WRANGLING LIKE IF WE WERE COOKING!
- 59. IMAGEN: WE HAVE THEDATA! IT’S PREPARE TO COOK! LET’S COOK!
- 60. HAVE A GREAT STORY WilliamDoree Photo by:
- 61.
- 62.
- 63. KNOW YOUR CONTENT Victoria Hellner Photoby: RESPECT YOUR AUDIENCE
- 64. IMAGEN: DECIDE WHICH DATATO ILLUSTRATE Pablo Peron Photo by:
- 65. DECIDE HOW TO ILLUSTRATE AntonisAndroulakis Photo by:
- 66.
- 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.
- 69.
- 71. HOW MANY TIMESBIGGER?
- 72. HOW MANY TIMESBIGGER?
- 73.
- 75.
- 76. COLOR Observers can rapidlydifferentiate between only five to ten hues (Healy) Twelve colors (6+6) recommended (Ward) Don’t forget white, black and gray
- 77. SATURATION & CONTRAST Use saturatedcolors for points, strokes and symbols Use desaturated colors for fills and larger areas Make sure that the elements have sufficient luminance contrast
- 78.
- 79.
- 80.
- 81.
- 83. We organize whatwe 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 Datavisualization Data visualization Datavisualization
- 85.
- 86. ICONS Easy to understand (icon+ measure)
- 87. Sentences are tospeech 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.
- 90.
- 91. PIE CHART Relative portionsof a quantitative dependent variables On single dimension (100%) ANGLES
- 92. STACKED BAR CHART Twoaccumulating quantitative dependent variable Independent variables POSITION + LENGTH
- 95. ANATOMY OF ACHART
- 96.
- 101.
- 102.
- 105.
- 106. DATA-INK RATIO ink used to describethe data ink used to describe everything else = The highest the better! If it’s high you have too much chart junk!
- 107.
- 108. HAVE A GREAT STORY WilliamDoree Photo by:
- 109.
- 110.
- 111. TV & TWITTERADS
- 112.
- 113.
- 114. AUTHOR-DRIVEN VIEWER-DRIVEN - Strongordering - Heavy messaging - Need for clarity and for speed - Ask questions - Explore and interact - Tell your own data story PRESENTATION VISUALIZATION INTERACTIVE VISUALIZATION
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129. Flexibility Productivity ASSEMBLY C / C++ Python/ Ruby Excel
- 130.
- 131.
- 132.
- 133. SVG <path d=‘ M 256,213C 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 · BindingAPI 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) { "usestrict"; 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.
- 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 functionalart - 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
- 142.