$30 off During Our Annual Pro Sale. View Details »

Interactive Data Visualisation

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.

Amit Kapoor

July 29, 2017
Tweet

More Decks by Amit Kapoor

Other Decks in Design

Transcript

  1. ”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
  2. This made me very uncomfortable — Is it all so

    simple? — Why do I rarely see good interactive dashboards?
  3. “Information Seeking Dashboard Mantra: Overview Aggregate first, then zoom chart

    and filter link, and details table on demand” — Ben Shneiderman Every BI Designer Tool
  4. Dashboard Design Approach — Load a data table — Create

    aggregate measures — Make 1D or 2D charts
  5. Dashboard Design Approach — Load a data table — Create

    aggregate measures — Make 1D or 2D charts — Put them in a block layout
  6. 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
  7. 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
  8. Now this is too easy! — Task Layer: Unlock data

    using a Dashboard — Data Layer: Columnar data storage
  9. Now this is too easy! — Task Layer: Unlock data

    using a Dashboard — Data Layer: Columnar data storage — Visual Layer: Reusable charts in blocks
  10. 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
  11. 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
  12. "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."
  13. GUI Dashboard driving Design UpSide - Increased visual analytics -

    Better simple charts - Improved aesthetic - Modular and Scalable design
  14. GUI Dashboard driving Design DownSide - Over-indexed on Singular Design

    Pattern - Shape of data is lost - Insight and Narrative is missing - Impersonal and Dry
  15. A Declarative Grammar of Graphics — A set of principles

    to describe what the interaction should be doing. — ... and not how the visualisation is computed
  16. 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
  17. 4. Visualise Uncertainty4 4 Visualising uncertainty about the future -

    David Spiegelhalter, Mike Pearson, Ian Short
  18. 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
  19. 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
  20. One human life, closely observed, is everyone’s life. In the

    particular is the universal. — Roger Ebert