| title | Simple Interaction |
|---|---|
| keywords | vega-in-r |
| sidebar | vega-in-r_sidebar |
| permalink | /vega-in-r-simple-interaction.html |
| folder | vega-in-r |
| series | vega-in-r-series |
| weight | 4 |
One of the main advantages to use the altair package is the fact that supports the generation of interactive graphics. The code required for adding a simple interaction is relatively short.
A tooltip can be added to the plot using tooltip() inside encode() altair R tooltips. For one variable displayed in the tooltip we can use:
...
tooltip = "Variable_1:T"
...and for more than one variable, we can use the R function list() or c() as illustrated below:
...
tooltip = c("Variable_1:T", "Variable_2:T")
...Mind that if we are importing the data from a url directly in the plot specification, we may need to specify the field type. As shown above we may use "T" for the type, where "T" may be for instance O for orninal, Q for quantitative or N for nominal.
We may also use the long form alt$Tooltip(field = "Entity", type = "nominal") and get the same result, or modify the tooltip specifying for instance a title, using alt$Tooltip(field = "Entity", type = "nominal", title = "Disaster").
{:.exercise} Exercise - Add a tooltip in the heatmap we created in the previous section, to get the graph illustrated above.
We illustrate two ways of making a graph zoomable and pannable. The first one is by adding the intreactive() attribute, as illustrated below:
chart = alt$Chart(data_source_subset)$
.....
$interactive()A second option is to specify the selection outside the plot code and then use it inside the add_selection attribute in the chart code.
The second option is an interval selection using a scale binding. For more information on selection types supported in altair you can refer to altair.selection_interval reference
selection = alt$selection_interval(bind='scales')
chart = alt$Chart(data_source_subset)$
.....
$add_selection(
selection
){:.exercise} Exercise - Make the time series plot of all natural distasters interactive, to get the graph illustrated above. Use both ways of making it zoomable and pannable.
{% include custom/series_vega-in-r_next.html %}