Presented By O'Reilly and Cloudera
Make Data Work
22–23 May 2017: Training
23–25 May 2017: Tutorials & Conference
London, UK

Interactive data visualizations using Visdown

Amit Kapoor (narrativeVIZ), Bargava Subramanian (Binaize Labs)
13:3017:00 Tuesday, 23 May 2017
Level: Beginner
Average rating: ***..
(3.50, 2 ratings)

Who is this presentation for?

  • Data scientists, data analysts, programmers, BI developers, communication professionals, and web developers

Prerequisite knowledge

  • A working knowledge of Markdown (For those unfamiliar, take this 10-minute Markdown tutorial and you should be fine.)
  • Experience in creating static charts and graphs in Excel or Powerpoint; no prior experience in creating interactive data visualizations needed
  • A basic understanding of how a web page and the browser works (HTML, CSS, and JavaScript)

Materials or downloads needed in advance

  • A laptop with a modern browser (preferably Google Chrome), MS Excel or Google Sheets, a web server, and text editor installed (Mac and Linux users can use the built in Python server and default editor; Windows users, please install Mongoose and Notepad++.)

What you'll learn

  • Learn the grammar of interactive graphics (data, visual, annotation, and interaction layers)
  • Understand the principles behind interaction and how to add data-model interactions to static graphs
  • Gain experience in using the declarative markdown-based specification to easily create interactive data visualizations


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

We’ve all seen wonderful interactive data visualizations on the web (like those from the New York Times’s Upshot or FiveThirtyEight) and may want to bring similar interaction principles to our business dashboards. But crafting an interactive data visualization 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 with JavaScript libraries like D3, your options are limited.

What if you could write an interactive data visualization in the same easy way that you can write markdown to create HTML pages. Amit Kapoor and Bargava Subramanian explain how to use declarative markdown-based tool Visdown to build them with ease. Visdown is open source and created using the excellent vega and vega-lite data visualization 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.


Grammar of interactive graphics: The four layers of abstraction

  • Data layer: Data types and transformations
  • Visual layer: Variable mapping, marks, channels, scales, coordinate system, and layouts
  • Annotation layer: Titles, axes, legends, grids, references, and text
  • Interaction layer: Navigation, transition, selection, highlighting, filtering, brushing and linking, sorting, and animation


  • The tools landscape: Charting-based, grammar-based, and canvas-based
  • Introduction to Visdown

Creating a static visualization

  • Visualizing a multidimensional dataset
  • Playing with marks, channels, color, scales, and coordinates
  • Adding labeling and annotation

Adding an interaction layer

  • Adding interactive data-model manipulation
  • Exploring common interaction patterns: Select, explore, reconfigure, encode, filter, and drill-down

Creating an interactive data visualization

  • Building a full interactive data dashboard using Visdown
  • Using an interesting dataset step by step

Additional pointers and recap

  • Additional concepts in interaction: Scrolling, animation, and story points
  • Recap
Photo of Amit Kapoor

Amit Kapoor


Amit Kapoor is a data storyteller at narrativeViz, where he uses storytelling and data visualization as tools for improving communication, persuasion, and leadership through workshops and trainings conducted for corporations, nonprofits, colleges, and individuals. Interested in learning and teaching the craft of telling visual stories with data, Amit also teaches storytelling with data for executive courses as a guest faculty member at IIM Bangalore and IIM Ahmedabad. Amit’s background is in strategy consulting, using data-driven stories to drive change across organizations and businesses. Previously, he’s gained more than 12 years of management consulting experience with A.T. Kearney in India, Booz & Company in Europe, and startups in Bangalore. Amit holds a BTech in mechanical engineering from IIT, Delhi, and a PGDM (MBA) from IIM, Ahmedabad.

Photo of Bargava Subramanian

Bargava Subramanian

Binaize Labs

Bargava Subramanian is a cofounder and machine learning engineer of the boutique AI firm Binaize Labs in Bangalore, India. He has 15 years’ experience delivering business analytics and machine learning solutions to B2B companies, and he mentors organizations in their data science journey. He holds a master’s degree from the University of Maryland, College Park. He’s an ardent NBA fan.

Comments on this page are now closed.


Picture of Amit Kapoor
25/05/2017 10:14 BST

Thanks you all for attending. We would really love for you to try and give us feedback on how we can improve it more for your use cases.