Interactive Data Visualisation

Slide 1

Slide 1 text

Interactive Data-Vis using Markdown Amit Kapoor amitkaps.com

Slide 2

Slide 2 text

In the last decade... Create Killer Charts

Slide 3

Slide 3 text

Using Charting-based Approach — Excel for charts — PowerPoint for interaction

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Then start of this decade... Let's make Interactive Vis

Slide 6

Slide 6 text

”The urge, starting out, is to copy. And that’s not a bad thing. Most of us only ﬁnd our own voices after we’ve sounded like a lot of other people.” — Neil Gaiman

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

"We do data visualisations to learn something new, not just to conﬁrm" — Edward Tufte

Slide 11

Slide 11 text

But this is hard! Manage every pixel & interaction

Slide 12

Slide 12 text

Using Pixel-based Approach — Processing.js for managing pixels — Lots of code for interaction

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Just gave up - this is hard Let's got back to Static Vis!

Slide 15

Slide 15 text

Then ﬁve years ago... Learnt the Grammar of Graphics

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Using Grammar-based Approach — Using ggplot for implementing grammar — Limited to static visualisation

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Then again last years... Let's try Interactive Vis again

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Using Code-based Approach — Using d3.js for implementing grammar — But for interaction - there is no grammar

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Still to hard for humans! Imperative: Describe how vis is computed

Slide 24

Slide 24 text

In the last few months... Let's investigate GUI tools

Slide 25

Slide 25 text

“We have a functional product, and we will put a dashboard on it”

Slide 26

Slide 26 text

Using GUI-based Approach — Use the multiple dashboard tools available — Drag & drop and create interactive vis

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

“Interactive Visualisations are a solved problem”

Slide 29

Slide 29 text

This made me very uncomfortable — Is it all so simple? — Why do I rarely see good interactive dashboards?

Slide 30

Slide 30 text

Why the glaring gap between Code-cra!ed and GUI-created interactive vis?

Slide 31

Slide 31 text

“Information Seeking Mantra: Overview ﬁrst, then zoom and ﬁlter, and details on demand” — Ben Shneiderman

Slide 32

Slide 32 text

“Information Seeking Dashboard Mantra: Overview Aggregate ﬁrst, then zoom chart and ﬁlter link, and details table on demand” — Ben Shneiderman Every BI Designer Tool

Slide 33

Slide 33 text

Dashboard Design Approach — Load a data table

Slide 34

Slide 34 text

Dashboard Design Approach — Load a data table — Create aggregate measures

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Dashboard Design Approach — Load a data table — Create aggregate measures — Make 1D or 2D charts — Put them in a block layout

Slide 37

Slide 37 text

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 ﬁlters

Slide 38

Slide 38 text

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 ﬁlters — Add a table list for details

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Now this is too easy! — Task Layer: Unlock data using a Dashboard — Data Layer: Columnar data storage — Visual Layer: Reusable charts in blocks

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Creating simple used to be hard! Making a set of killer charts

Slide 45

Slide 45 text

"There is a difference between simple and easy. Do not confuse the two. The simpler the thing is to understand, often the more difﬁcult it is to do."

Slide 46

Slide 46 text

“Age of GUI driven Interactive Charto-mania”

Slide 47

Slide 47 text

GUI Dashboard driving Design UpSide - Increased visual analytics - Better simple charts - Improved aesthetic - Modular and Scalable design

Slide 48

Slide 48 text

GUI Dashboard driving Design DownSide - Over-indexed on Singular Design Pattern - Shape of data is lost - Insight and Narrative is missing - Impersonal and Dry

Slide 49

Slide 49 text

“How to make it easier to do interactive data visualisation?”

Slide 50

Slide 50 text

"We need Declarative Grammar of Interactive Graphics

Slide 51

Slide 51 text

A Declarative Grammar of Graphics — A set of principles to describe what the interaction should be doing. — ... and not how the visualisation is computed

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Vega & Vega-lite

Slide 54

Slide 54 text

Visdown h!p://visdown.com

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

1. Amplify Cognition

Slide 58

Slide 58 text

1. Amplify Cognition

Slide 59

Slide 59 text

1. Amplify Cognition

Slide 60

Slide 60 text

1. Amplify Cognition1 1 Up and Down the Ladder of Abstraction - Bret Victor

Slide 61

Slide 61 text

2. Think Datum First

Slide 62

Slide 62 text

2. Think Datum First2 2 The Architecture of a Data Visualisation - Giorgio Luipi

Slide 63

Slide 63 text

3. Show Single & All

Slide 64

Slide 64 text

3. Show Single & All

Slide 65

Slide 65 text

3. Show Single & All3 3 Responsive Data Visualisation - Nick Rabinowitz

Slide 66

Slide 66 text

4. Visualise Uncertainty

Slide 67

Slide 67 text

4. Visualise Uncertainty

Slide 68

Slide 68 text

4. Visualise Uncertainty4 4 Visualising uncertainty about the future - David Spiegelhalter, Mike Pearson, Ian Short

Slide 69

Slide 69 text

5. Towards Composition

Slide 70

Slide 70 text

5. Towards Composition

Slide 71

Slide 71 text

5. Towards Composition5 5 Sandbox - John Le

Slide 72

Slide 72 text

6.First Class Annotation

Slide 73

Slide 73 text

6.First Class Annotation6 6 Making Annotations First-Class Citizens in Data Visualization - Elijah Meeks

Slide 74

Slide 74 text

7. Layer Interaction

Slide 75

Slide 75 text

7. Layer Interaction

Slide 76

Slide 76 text

7. Layer Interaction7 7 Vega - Airport Connection

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

One human life, closely observed, is everyone’s life. In the particular is the universal. — Roger Ebert

Slide 80

Slide 80 text

Interactive Data-Vis using Markdown Amit Kapoor amitkaps.com