Making shinier charts

1. Making shinier charts

In the previous lessons, you focused on how to link charts and implement different selection strategies to best explore the data using tools native to plotly charts, such as the lasso selection tool. In this lesson, you will learn what other functionality the crosstalk package enables, making your charts resemble basic shiny apps without the need for shiny.

2. Apps without shiny

For example, here we have scatterplots of CO2 emissions against per capita GDP and life expectancy against per capita GDP, which we can interact with using checkboxes to filter out regions and a slider bar to filter out specific ranges of CO2 emissions. Such controls enhance your plotly charts, enabling quicker exploration of subsets of your data. Let's see how this chart is built.

3. bscols() for column layouts

First, we'll need to load the plotly and crosstalk packages, and create a sharedData object for the world2014 dataset. Next, we pipe shared_data into our plotly scatterplot pipeline and store the two scatterplots as p1 and p2. To create side-by-side plotly charts compatible with the selector widgets, we pass p1 and p2 into the bscols() command. Unlike subplot, bscols() creates two side-by-side htmlwidgets, each containing a plotly chart.

4. bscols() for column layouts

The result is a chart that resembles our standard subplots, but with separate plotly control panels for each chart.

5. Adding filters: Checkboxes

Now that you're familiar with aligning plots, let's see how we can add filters. To begin, let's consider adding a checkbox filter to filter out specific regions of the world. The filter_checkbox command creates the checkbox selector and requires four arguments: a unique id to identify the HTML element, a user-readable label for the filter tool, a sharedData object, and a group, which uses a one-sided formula mapping a variable to the checkboxes. To combine the filter_checkbox and our scatterplot p1, we again use the bscols function.

6. Adding filters: Select box

To use a select box rather than checkboxes to filter out levels of a categorical variable, we use similar code, but replace filter_checkbox() with filter_select().

7. Adding filters: Sliders

To filter out values of a numeric variable, we need to use a slider rather than checkboxes or select boxes. To do this, we use the filter_slider command which requires four arguments: a unique id to identify the HTML element, a user-readable label for the filter tool, a sharedData object, and column, a one-sided formula mapping a variable in the dataset to the slider. Notice that when filtering the data, plotly automatically rescales the axes, zooming in and out of the data space.

8. Fixing the range of your axes

To avoid this zooming, you can fix the range of an axis using the layout command.

9. Putting the pieces together

Now that you know how to create filters, let's put the pieces together to recreate the first example. Recall that our goal is to have three columns: one for filters, and two for scatterplots. To achieve this we pass three objects to bscols. The first object is a list containing the filter_checkbox and filter_select widgets, resulting in the two controls being stacked within a single column. The other two objects are the scatterplots, p1 and p2. Additionally, we specify the widths of each column. The underlying Bootstrap grid system is comprised of 12 columns. Here we specify that the first column should span 2 columns, and the other two columns should each span 5 columns.

10. Putting the pieces together

The resulting chart reproduces the first example, less a little polishing.

11. Let's practice!

Now that you know the basics of Bootstrap layouts for plotly, it's time to practice.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.