fitc - data visualization in practice
TRANSCRIPT
![Page 1: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/1.jpg)
Rami Sayar - @ramisayar
Technical Evangelist
Microsoft Canada
![Page 2: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/2.jpg)
• Quick Introduction to Data Visualization
• Five Data Visualization Principles & Best Practices to Follow
• How Successful Visualizations are Designed
• Tips and Mistakes Learned with D3.js
![Page 3: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/3.jpg)
• Working knowledge of JavaScript, D3.js and HTML5.
• Basic understanding of statistics.
![Page 4: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/4.jpg)
FITC - @RAMISAYAR
![Page 5: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/5.jpg)
Data visualization helps people understand data through visual display.
![Page 6: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/6.jpg)
Communicating knowledge clearly and efficiently.
Displaying data to understand cause and effect.
![Page 7: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/7.jpg)
![Page 8: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/8.jpg)
![Page 9: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/9.jpg)
![Page 10: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/10.jpg)
![Page 11: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/11.jpg)
![Page 13: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/13.jpg)
“The purpose of visualization is insight, not pictures”
Ben Schneiderman
A.K.A. It’s not about aesthetics.
![Page 14: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/14.jpg)
“#DataVisualization is not about creating infographics for your marketing department.
- @RamiSayar #bigdata #dataviz”
I dare you to tweet that.
![Page 15: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/15.jpg)
![Page 16: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/16.jpg)
![Page 17: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/17.jpg)
![Page 18: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/18.jpg)
Off course, I have to show you an
infographic! Sorta…
LINK: http://blogs.microsoft.com/work/2014/02/12/big-
data-and-the-digital-universe
![Page 19: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/19.jpg)
Booming Field – Potentially Creating 1.9 Million Jobs.
![Page 21: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/21.jpg)
![Page 22: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/22.jpg)
Let’s start with this + some sample D3.js code.
![Page 23: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/23.jpg)
The context in which data is visually placed impacts the knowledge that can be gleaned or communicated.
![Page 24: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/24.jpg)
Example: ‘Stop-and-Frisk’ Is All but Gone From New York by Mike Bostock
• Controversial policing tactic that involved stopping and frisking people for what police deemed “suspicious behavior”.
• Report data composed of detailed info such as location, time, etc...
![Page 25: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/25.jpg)
Example: ‘Stop-and-Frisk’ Is All but Gone From New York by Mike Bostock
Data Visualization Attempt 1:
![Page 26: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/26.jpg)
Data Visualization Attempt 2
![Page 27: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/27.jpg)
Data Visualization Attempt 3
![Page 28: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/28.jpg)
Data Visualization Attempt 4
![Page 29: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/29.jpg)
Example: Take Care of your Choropleth Maps by Gregor Aisch
Guardian data blog published a US poverty map…
![Page 30: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/30.jpg)
Example: Take Care of your Choropleth Maps by Gregor Aisch
Don’t mess around with your class limits.
![Page 31: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/31.jpg)
Example: Take Care of your Choropleth Maps by Gregor Aisch
Don’t mess around with your class colors.
![Page 32: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/32.jpg)
Example: Take Care of your Choropleth Maps by Gregor Aisch
• Place data in comparison for context, e.g. class count.
![Page 33: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/33.jpg)
Mapping with D3.js
• D3.js includes routines for handling geographic information.
• GeoJSON is the geographic data file of choice. Fairly complicated process to convert primary mapping information to GeoJSON.• Instead use: johan/world.geo.json
• TopoJSON is an extension of GeoJSON that encodes topology instead of geometrics -> smaller data files.
![Page 34: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/34.jpg)
Mapping with D3.js
• D3.js includes routines for handling geographic information.
• GeoJSON is the geographic data file of choice. Fairly complicated process to convert primary mapping information to GeoJSON.• Use: johan/world.geo.json
• TopoJSON is an extension of GeoJSON that encodes topology instead of geometrics -> smaller data files.• Use: mbostock/world-atlas
• Use: mbostock/us-atlas
![Page 35: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/35.jpg)
Mapping with D3.js
Demo: Area Choropleth
Demo: U.S. TopoJSON
![Page 36: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/36.jpg)
• The context in which data is visually placed impacts the knowledge that can be gleaned or communicated.
• Enforce the right comparisons for the context.
• Many problems are multivariate (i.e. multiple variables) and that needs to be recognized in the data visualization.
![Page 37: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/37.jpg)
The knowledge communicated through visualizations must match the underlying data.
![Page 38: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/38.jpg)
Because I know that’s what some of you are thinking…
![Page 39: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/39.jpg)
• Fairly obvious point but most people miss this surprisingly… or they do it knowingly…
Example: Truncated Y-Axis from How to Lie with Data Visualization by Ravi Parikh
![Page 40: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/40.jpg)
Example: Cumulative Graphs from How to Lie with Data Visualization by Ravi Parikh
![Page 41: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/41.jpg)
Example: Effects of Temporal Aggregation from Modern Visual Evidence by Gregory Joseph, discovered in Visual Explanations by Edward Tufte.
Quarterly Revenue Revenue by Fiscal Year (July 1 to June 30) Revenue by Calendar Year
![Page 42: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/42.jpg)
Demo: Crossfilter
Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records.
![Page 43: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/43.jpg)
• The knowledge communicated through visualizations must match the underlying data.
• Follow convention in how you model your data and axis.
• The objective of data visualization is communicate information to the viewer, misleading by deception or confusion (even accidentally) will not serve your purpose.
![Page 44: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/44.jpg)
Although devices present data in two dimensions, this desolate flatland can be escaped.
![Page 45: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/45.jpg)
Example: Using Three Dimensions to Show Skyline Changes.
The Bloomberg Years: Reshaping New York by NYTimes
Demo
![Page 46: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/46.jpg)
Example: Visualizing Friendships by Paul Butler
![Page 47: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/47.jpg)
Example: Using Three Dimensions to Convey Geographic Information at a Global Scale
![Page 48: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/48.jpg)
Using three dimensions incorrectly adds no value or obfuscates the data visualization.
Example: The Ebb and Flow of Movies: Box Office Receipts by NYTimes.
Yes I know, it’s meant to be interactive.
![Page 49: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/49.jpg)
Link: UK Temperature History
Yes I know, it’s meant to be interactive.
![Page 50: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/50.jpg)
Aggregating details can reveal the knowledge present in data.
![Page 51: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/51.jpg)
On occasion, showing all the data points in one big visualization can communicate knowledge clearly.
Example: House Hunting All Day, Every Day by Trulia Trends
![Page 52: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/52.jpg)
Example: Will it Shuffle? By Mike Bostock
Run SHUFFLE DEMO.
![Page 54: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/54.jpg)
Layering and parallelizing data visualizations can reveal insights but be careful not to form haystacks.
![Page 55: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/55.jpg)
![Page 56: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/56.jpg)
• Layering data on a common X Axis maximizes visualization of coincidence and anomalies. Best use for time series data.• Use Color and Transparency.
• Parallelizing data is as powerful as layering data to show significant differences between multiple data sets.
![Page 57: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/57.jpg)
How Likely Is It That Birth Control Could Let You Down? By Gregor Aisch and Bill Marsh.
![Page 58: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/58.jpg)
Example: Introduction to Cubism by Mike Bostock
CPU Usage
![Page 59: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/59.jpg)
Example: Introduction to Cubism by Mike Bostock
Network (10s)
![Page 60: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/60.jpg)
Example: Introduction to Cubism by Mike Bostock
Network (5m)
![Page 63: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/63.jpg)
Books
• Anything by Edward Tufte
• Knowledge/Information is Beautiful
• Designing News by Franchi
Conferences
• Visualized in NYC
Websites
• InformationisBeautiful.net
• FlowingData.com
• Visualizing.org
• Information Aesthetics
• VisualComplexity.com
• Mike Bostock
• D3.js Gallery
• Driven-by-data.net
![Page 64: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/64.jpg)
• Edward Tufte - Data Scientist & Professor of PoliSci, Statistics, CS at Yale + Princeton for 33 years - @EdwardTufte
• Mike Bostock – Graphics Editor at NYTimes + Creator of D3.js @mbostock
• Jonathan Corum - Information Designer and NYTimes Science Graphics Editor - @13pt
• Bret Victor – Purveyor of Impossible Dreams - @worrydream
• Gregor Aisch – Graphics Editor at NYTimes + Creator of kartograph.js & datawrapper.js - @driven_by_data
![Page 65: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/65.jpg)
• Introduction to Data Visualization
• Five Data Visualization Principles & Best Practices to Follow• Context is king.• Visualizations must match the data.• Escape flatland when useful.• Aggregating details can reveal the knowledge present in data.• Layering and parallelizing data visualizations can reveal insights but be
careful not to form haystacks.
• How Successful Visualizations are Designed
FITC - @RAMISAYAR
![Page 66: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/66.jpg)
Follow @ramisayar
FITC - @RAMISAYAR
![Page 67: FITC - Data Visualization in Practice](https://reader033.vdocuments.mx/reader033/viewer/2022042602/55a615491a28abee328b46ae/html5/thumbnails/67.jpg)
©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.