Learning Vega 2.0 a.k.a. Reactive Vega
A Grammar of Graphics
Vega 2.0 adds a grammar of interaction to the grammar of graphics implemented in Vega 1.0.
When you say grammar of graphics all roads bring you to
Leland Wilkinson The Grammar of Graphics Springer Science & Business Media, Jul 15, 2005
But given the price of 100+ USD, I am not even thinking of getting my hands on it.
So the next thing you can look at is who has build upon this conceptual framework. And then we bump into
Hadley Wickham. A layered grammar of graphics. Journal of Computational and Graphical Statistics, vol. 19, no. 1, pp. 3–28, 2010. https://vita.had.co.nz/papers/layered-grammar.html
which implements a (layered) grammar of graphics as a package for the excellent R language. The article in the “Conclusions” section raises the question of how to add interaction to the ggplot2 framework.
… and a Grammar of Interaction
Moving to Vega, from its own site
Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs
The interactive was not present in the first implementation as of Apr 2014, it has been added and publicly described in
Arvind Satyanarayan, Kanit Wongsuphasawat, Jeffrey Heer Declarative Interaction Design for Data Visualization ACM User Interface Software & Technology (UIST), 2014, https://idl.cs.washington.edu/papers/reactive-vega
The companion video explains things further:
And now let’s use it
All that reading is ok but without doing I do not fully get it (and even then … ;-) I need examples
So the Vega tutorial is a very good starting point (and like all tutorials it can be perfected by inspirational minds), as well as the interactive and non examples in the Vega Editor.
Here of course you have less textual description about the what’s and why’s.
The tutorial shows you how to build a (vertical) bar chart. Here it is:
So as my homework I implemented what requested as en exercise at the end of the tutorial. That is
“convert the (vertical) bar plot to an horizontal one”
Here it is:
The interactive bit in both blocks is evident when you hover your mouse on the bars and the relevant amount is textually shown. Simple and it renders the concept.
And finally a little example with yearly number of flight in Europe:
The following questions remain for me:
How to I pad the graph so that my boundary point are not so close to the axes? This issue calls for an offset to be added to the spec.
How do I link events from widgets external to the graph to interactions in the graph? (Here I think the Reactive Vega supplemental material, i.e.
ex_jobs.json, watch at min 3:19 of reactive vega video above, will help, as well as CSS selector for Signals in the Vega documentation)
If you want to daydream and see the potentials of Vega, watch the recent conference presentation from Prof. Jeffrey Heer:
Raising the Bar (Chart): The Next Generation of Visualization Tools, OpenVis Conference 2015 keynote talk by Jeffrey Heer.