Overview

Crafting interactive data-vis for the web is hard. Either you are stuck using proprietary tools like Tableau or you need to become proficient in javascript libraries like d3.js. But what if creating them was as easy as writing text. This workshop teaches the grammar of interactive graphics and uses a simple declarative markdown based tool - Visdown - to help you build them with ease and speed.

Detailed Abstract

“A picture is worth a thousand words. An interface is worth a thousand pictures.” – Ben Shneiderman

We all see the wonderful interactive data visualisation on the web (like Upshot at New York Times or FiveThirtyEight.com) and want to bring similar interaction principle to our business dashboards. But crafting an interactive data-vis on the web is hard. If you don’t want to use proprietary tools like Tableau or you don’t (yet) have the coding skills in javascript libraries like d3.js, the options are limited.

But what if you could write an interactive data-vis in the same easy way that you can write markdown to create html pages. Visdown allows you to do this by writing simple declarative text specification for an interactive data-vis. Visdown is open source and created using the excellent vega and vega-lite data visulisation library. You need to learn the grammar and principles of interactive graphics and you can then start your own journey in crafting interactive dashboard.

Notes

A version of this workshop will be presented at Strata London 2017 and Strata Singapore 2017

Workshop Content

1: Grammar of Interactive Graphics (20 mins)

• Learn the four layers of abstraction – Data Layer: data types and transformations – Visual Layer: variable mapping, marks, channels, scales, coordinate system, layouts – Annotation Layer: titles, axes, legends, grids, references, text – Interaction Layer: – navigation, transition, selection, highlighting, filtering, brushing & linking, sorting, animation

2: Start using Visdown (10 mins)

• Understand the tools landscape: Charting-based, Grammar-based and Canvas-based
• Intro to declarative markdown based visualisation tool – visdown

3: Create Static Vis (20 mins)

• Visualise a multi-dimensional dataset
• Play with marks, channels, color, scales, and coordinates
• Add labeling and annotation

4: Add Interaction layer (40 mins)

• Add interactive data-model manipulation
• Explore common interaction patterns: select, explore, reconfigure, encode, filter, drill-down

5: Create an Interactive Data-Vis (45 mins)

• Build a full interactive data dashboard using Visdown
• Step-by-step hands-on session using an interesting dataset

6: Additional Pointers and Recap (15 mins)

• Additional concepts in interaction: scrolling, animation, story points
• Recap of the overall workshop