Pro Yearly is on sale from $80 to $50! »

Interactive Data Visualisation

A4325416b0ed5218af22cf0473fe3d2b?s=47 Amit Kapoor
July 29, 2017

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.

A4325416b0ed5218af22cf0473fe3d2b?s=128

Amit Kapoor

July 29, 2017
Tweet

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
  4. None
  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
  7. None
  8. None
  9. None
  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
  13. None
  14. Just gave up - this is hard Let's got back

    to Static Vis!
  15. Then five years ago... Learnt the Grammar of Graphics

  16. None
  17. Using Grammar-based Approach — Using ggplot for implementing grammar —

    Limited to static visualisation
  18. None
  19. Then again last years... Let's try Interactive Vis again

  20. None
  21. Using Code-based Approach — Using d3.js for implementing grammar —

    But for interaction - there is no grammar
  22. None
  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
  27. None
  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
  52. None
  53. Vega & Vega-lite

  54. Visdown h!p://visdown.com

  55. None
  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