At its code G2.js comprises of just a few primitive figures.
However, g2r provides many more. This is simply to say that all figures provided by g2r but not G2.js are actually built, under-the-hood, by the aforementioned primitive figures.
Take for instance
fig_ribbon which G2.js does not handle out of the box. A ribbon chart is essentially an area chart that holds two
y values for every
x, where the first is the lower bound and the second is the higher bound.
So why add
fig_ribbon? Well because the shape of the data that must be passed to G2.js is somewhat unwieldy.
Instead of using
fig_ribbon one could simply build the a list column tibble that resembles the above and use
With the list column where the
y column actually holds two values one can now simply use
All of the custom figures provided by g2r are in the figures.R file, feel free to take a look to learn more about how they work.
It may be somewhat counterintuitive at first but G2.js allows multiple “aspects” where one would often only expect one. For instance the tooltip of a visualisation can make use or present multiple variables.
Also, while in ggplot2 one can pass operations to the
aes function, e.g.:
aes(x = y + 20) one cannot do that with g2r. This is because g2r does not process the data is receives in any way. It likely never will either.
This is because, in an attempt to improve performances, g2r does not “bind” the data used in a figure to it. If data was passed to the initialisation function
g2 then that data is used but no subset of it is copied or processed.
It’s not strictly true that g2r does not preprocess the data, it performs one operation: reordering. This is because G2.js expects the data to be reordered along the x axis. At the exception of a few figures where it is either not necessary (e.g.:
fig_point) or where it would result in a an erroneous output.
In G2.js variables can be aliases which changes the name that is displayed across the visualisation, in labels, tooltips, etc.
E.g.: Aliasing the variable below with
aka changes the way it is displayed on the tooltip.