Creating Interactive Visualizations Should Be Easier
How an interactive grammar of graphics changes everything.
Have you spent the hours pulling your hair out trying to make your D3 project more interactive? You’re not alone. Tools like D3 and ProtoVis are useful for specific kinds of visualization, but when you step out of that use case, things get a little hairy.
Exploratory vs. Explanatory Visualization
Broadly speaking, data visualization can be categorized into two kinds.
Let’s say you’re looking at the global temperature data for the last 30 years. If you go into the visualization project knowing that temperatures have been steadily rising, you’re using the visualization to explain it to someone else (or to confirm it for yourself). On the other hand, if you’re dealing with unknown data that hasn’t been investigated, you have to approach the visualization in an exploratory manner.
Exploration often includes interaction. To be able to derive insight from a large set of data, the ability to immerse yourself in it is vital. And the only way to imbibe that sense of immersion is through interaction.
The Problem
Here’s where the problem lies. Building interactive visualizations take more effort and more time than it actually should.
Enter Arvind Satyanarayan (now an assistant professor at MIT) and his colleagues. Their paper “Vega-Lite: A Grammar of Interactive Graphics” aims to solve this issue by proposing a high-level grammar that enables rapid development of interactive data visualizations. More specifically, they aim to combine a traditional grammar of graphics with a novel grammar for interactions.
Let’s start with the first bit.
The Visualization
To be able to jump right into interactions, the data has to be quickly visualized. This requires the compiler to decode high-level specifications. In this case, the Vega-Lite compiler ingests JSON specifications and outputs a lower-level Vega specification.
This high-level specification enables rapid and expressive specification of visualizations. Take a look at this stacked bar chart.
This is how many lines of code it takes to build this stacked bar-chart.
“data”: {
“url”: “data/weather.csv”,
“formatType”: “csv” },
“mark”: “bar”,
“encoding”: {
“x”: {
“field”: “location”, “type”: “nominal”
},
“y”: {
“field”: “*”, “type”: “quantitative”,
“aggregate”: “count”
},
“color”: {
“field”: “weather”,
“type”: “nominal”
}The Interaction
Like I mentioned before, the most important part of any exploratory data visualization is the interactions. So how does the Vega-Lite handle that?
Whereas D3 encapsulates event processing — making it harder to distinguish between things like dragging and panning — Vega-Lite employs an event selection method. Essentially, event streams manipulate intermediate dynamic signals which in turn parameterize the remainder of the specification. The authors specify that this reactive approach is twice as fast as D3’s approach.
A major part of interacting with visualizations is selecting. This can be in the form of clicking or lassoing visual items. The creators of Vega-Lite have implemented rich interactive selection.
This selection can essentially be extended to multiple forms of interactions which include selection, exploration, connection, abstraction, reconfiguration, and filtering. Going back to the fact that all of these are still performed with high-level specification, this allows users to write small amounts of code to build rich interactive visualizations.
Conclusion
Vega-Lite attempts to provide a high-level grammar to create quick, interactive data visualizations. Any tool that can create complicated interactive, good-looking visualizations with about 20–30 lines of code should be welcomed with open arms.
- Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, Jeffrey Heer. Vega-Lite: A Grammar of Interactive Graphics. IEEE Transactions on Visualization and Computer Graphics, 2017.
