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 Consulting), Bargava Subramanian (Independent)
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

narrativeVIZ Consulting

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

Photo of Bargava Subramanian

Bargava Subramanian


Bargava Subramanian is a machine learning engineer based in Bangalore, India. Bargava has 14 years’ experience delivering business analytics solutions to investment banks, entertainment studios, and high-tech companies. He has given talks and conducted numerous workshops on data science, machine learning, deep learning, and optimization in Python and R around the world. He mentors early-stage startups in their data science journey. Bargava holds a master’s degree in statistics from the University of Maryland at College Park. He is an ardent NBA fan.

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)


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.