Interactive Data Visualisation

What if you could write an interactive data visualisation in the same easy declarative way that you can write markdown to create HTML pages. In this talk, I explain how using a declarative grammar based approach can dramatically speed up the creation of interactive visualisation. I will also talk about a small tool called Visdown, which is open source and created using the excellent vega data visualisation library. You only need to learn the grammar and principles of interactive graphics, and you can then start your own journey in crafting interactive dashboards.

Transcript

1. Interactive Data-Vis using Markdown Amit Kapoor amitkaps.com
2. In the last decade... Create Killer Charts
3. Using Charting-based Approach — Excel for charts — PowerPoint for interaction
5. Then start of this decade... Let's make Interactive Vis
6. ”The urge, starting out, is to copy. And that’s not a bad thing. Most of us only find our own voices after we’ve sounded like a lot of other people.” — Neil Gaiman
10. "We do data visualisations to learn something new, not just to confirm" — Edward Tufte
11. But this is hard! Manage every pixel & interaction
12. Using Pixel-based Approach — Processing.js for managing pixels — Lots of code for interaction
14. Just gave up - this is hard Let's got back to Static Vis!
15. Then five years ago... Learnt the Grammar of Graphics
17. Using Grammar-based Approach — Using ggplot for implementing grammar — Limited to static visualisation
19. Then again last years... Let's try Interactive Vis again
21. Using Code-based Approach — Using d3.js for implementing grammar — But for interaction - there is no grammar
23. Still to hard for humans! Imperative: Describe how vis is computed
24. In the last few months... Let's investigate GUI tools
25. “We have a functional product, and we will put a dashboard on it”
26. Using GUI-based Approach — Use the multiple dashboard tools available — Drag & drop and create interactive vis
28. “Interactive Visualisations are a solved problem”
29. This made me very uncomfortable — Is it all so simple? — Why do I rarely see good interactive dashboards?
30. Why the glaring gap between Code-cra!ed and GUI-created interactive vis?
31. “Information Seeking Mantra: Overview first, then zoom and filter, and details on demand” — Ben Shneiderman
32. “Information Seeking Dashboard Mantra: Overview Aggregate first, then zoom chart and filter link, and details table on demand” — Ben Shneiderman Every BI Designer Tool
33. Dashboard Design Approach — Load a data table
34. Dashboard Design Approach — Load a data table — Create aggregate measures
35. Dashboard Design Approach — Load a data table — Create aggregate measures — Make 1D or 2D charts
36. Dashboard Design Approach — Load a data table — Create aggregate measures — Make 1D or 2D charts — Put them in a block layout
37. Dashboard Design Approach — Load a data table — Create aggregate measures — Make 1D or 2D charts — Put them in a block layout — Link them with a few filters
38. BI Dashboard Design Approach — Load a data table — Create aggregate measures — Make 1D or 2D charts — Put them in a block layout — Link them with a few filters — Add a table list for details
39. Now this is too easy! — Task Layer: Unlock data using a Dashboard
40. Now this is too easy! — Task Layer: Unlock data using a Dashboard — Data Layer: Columnar data storage
41. Now this is too easy! — Task Layer: Unlock data using a Dashboard — Data Layer: Columnar data storage — Visual Layer: Reusable charts in blocks
42. Now this is too easy! — Task Layer: Unlock data using a Dashboard — Data Layer: Columnar data storage — Visual Layer: Reusable charts in blocks — Annotation Layer: Just the basics
43. Now this is too easy! — Task Layer: Unlock data using a Dashboard — Data Layer: Columnar data storage — Visual Layer: Reusable charts in blocks — Annotation Layer: Just the basics — Interaction Layer: Brushing and Linking
44. Creating simple used to be hard! Making a set of killer charts
45. "There is a difference between simple and easy. Do not confuse the two. The simpler the thing is to understand, often the more difficult it is to do."
46. “Age of GUI driven Interactive Charto-mania”
47. GUI Dashboard driving Design UpSide - Increased visual analytics - Better simple charts - Improved aesthetic - Modular and Scalable design
48. GUI Dashboard driving Design DownSide - Over-indexed on Singular Design Pattern - Shape of data is lost - Insight and Narrative is missing - Impersonal and Dry
49. “How to make it easier to do interactive data visualisation?”
50. "We need Declarative Grammar of Interactive Graphics
51. A Declarative Grammar of Graphics — A set of principles to describe what the interaction should be doing. — ... and not how the visualisation is computed
53. Vega & Vega-lite
54. Visdown h!p://visdown.com
56. Declarative Interactive Design 1. Amplify Cognition 2. Think Datum First 3. Show Single & All 4. Visualise Uncertainty 5. Towards Compositions 6. First Class Annotation 7. Layer Interactions
57. 1. Amplify Cognition
58. 1. Amplify Cognition
59. 1. Amplify Cognition
60. 1. Amplify Cognition1 1 Up and Down the Ladder of Abstraction - Bret Victor
61. 2. Think Datum First
62. 2. Think Datum First2 2 The Architecture of a Data Visualisation - Giorgio Luipi
63. 3. Show Single & All
64. 3. Show Single & All
65. 3. Show Single & All3 3 Responsive Data Visualisation - Nick Rabinowitz
66. 4. Visualise Uncertainty
67. 4. Visualise Uncertainty
68. 4. Visualise Uncertainty4 4 Visualising uncertainty about the future - David Spiegelhalter, Mike Pearson, Ian Short
69. 5. Towards Composition
70. 5. Towards Composition
71. 5. Towards Composition5 5 Sandbox - John Le
72. 6.First Class Annotation
73. 6.First Class Annotation6 6 Making Annotations First-Class Citizens in Data Visualization - Elijah Meeks
74. 7. Layer Interaction
75. 7. Layer Interaction
76. 7. Layer Interaction7 7 Vega - Airport Connection
77. Upside Declarative Interactive Design 1. Build a mental model 2. Understand the single story 3. Have a micro and macro picture 4. Know that data and model are uncertain 5. See the picture as a whole 6. Have a narrative to see 7. Move between layers of abstraction
78. Principles of Interactive Data Vis 1. Amplify Cognition 2. Think Datum First 3. Show Single & All 4. Visualise Uncertainty 5. Towards Compositions 6. First Class Annotation 7. Layer Interactions
79. One human life, closely observed, is everyone’s life. In the particular is the universal. — Roger Ebert
80. Interactive Data-Vis using Markdown Amit Kapoor amitkaps.com