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. 4.
  2. 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
  3. 7.
  4. 8.
  5. 9.
  6. 13.
  7. 16.
  8. 18.
  9. 20.
  10. 21.
  11. 22.
  12. 26.
  13. 27.
  14. 29.

    This made me very uncomfortable — Is it all so

    simple? — Why do I rarely see good interactive dashboards?
  15. 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
  16. 35.

    Dashboard Design Approach — Load a data table — Create

    aggregate measures — Make 1D or 2D charts
  17. 36.

    Dashboard Design Approach — Load a data table — Create

    aggregate measures — Make 1D or 2D charts — Put them in a block layout
  18. 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
  19. 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
  20. 40.

    Now this is too easy! — Task Layer: Unlock data

    using a Dashboard — Data Layer: Columnar data storage
  21. 41.

    Now this is too easy! — Task Layer: Unlock data

    using a Dashboard — Data Layer: Columnar data storage — Visual Layer: Reusable charts in blocks
  22. 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
  23. 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
  24. 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."
  25. 47.

    GUI Dashboard driving Design UpSide - Increased visual analytics -

    Better simple charts - Improved aesthetic - Modular and Scalable design
  26. 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
  27. 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
  28. 52.
  29. 55.
  30. 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
  31. 62.
  32. 68.

    4. Visualise Uncertainty4 4 Visualising uncertainty about the future -

    David Spiegelhalter, Mike Pearson, Ian Short
  33. 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
  34. 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
  35. 79.

    One human life, closely observed, is everyone’s life. In the

    particular is the universal. — Roger Ebert