The scatterD3 package provides an HTML widget based on the htmlwidgets package and allows to produce interactive scatterplots by using the d3.js javascript visualization library.

Basic scatterplot

Starting with the sample mtcars dataset, we can produce a basic scatterplot with the following command :

library(scatterD3)
scatterD3(x = mtcars$wt, y = mtcars$mpg)

This will display a simple visualization with the given variables as x and y axis. There are several interactive features directly available :

You can customize the points size with the point_size parameter, their opacity with point_opacity, and you can force the plot to have a 1:1 fixed aspect ratio with fixed = TRUE.

scatterD3(x = mtcars$wt, y = mtcars$mpg, point_size = 15, point_opacity = 0.5, fixed = TRUE)

Point labels

You can add text labels to the points by passing a character vector to the lab parameter. Labels size are controlled by the labels_size parameter.

scatterD3(x = mtcars$wt, y = mtcars$mpg, lab = rownames(mtcars), labels_size = 9)

Note that text labels are fully movable : click and drag a label with your mouse to place it where you want. Custom positions are preserved while zooming/panning.

Mapping colors, symbols and size to variables

By passing vectors to the col_var and/or symbol_var arguments, you can map points colors and symbols to other variables.

scatterD3(x = mtcars$wt, y = mtcars$mpg, col_var = mtcars$cyl, symbol_var = mtcars$gear)

Note that when hovering over a legend item with your mouse, the corresponding points are highlighted. Also note that the mapped variables values are automatically added to the default tooltips.

You can also map symbol sizes with a variable with the size_var argument. size_range allows to customize the sizes range :

scatterD3(x = mtcars$wt, y = mtcars$mpg, col_var = mtcars$cyl, size_var = mtcars$hp, size_range = c(10,1000), point_opacity = 0.7)

Axis limits

You can manually specify the x or y axis limits with the xlim and ylim arguments :

scatterD3(x = mtcars$wt, y = mtcars$mpg, xlim=c(0,10), ylim=c(10,35))

Custom axis and legend labels

You can customize the axis and legend labels with xlab, ylab, col_lab, symbol_lab and size_lab :

scatterD3(x = mtcars$wt, y = mtcars$mpg, col_var = mtcars$cyl, symbol_var = mtcars$gear,
          xlab = "Weight", ylab = "Mpg", col_lab = "Cylinders", symbol_lab = "Gears")

Note that default tooltips are updated accordingly.

Custom tooltips

If the default tooltip doesn’t suit your needs, you can customize them by providing a character vector to the tooltip_text. This can contain HTML tags for formatting.

tooltips <- paste("This is an incredible <strong>", rownames(mtcars),"</strong><br />with ", 
                  mtcars$cyl, "cylinders !")
scatterD3(x = mtcars$wt, y = mtcars$mpg, tooltip_text = tooltips)

You can also disable tooltips entirely with tooltips = FALSE.

Shiny integration

Transitions

Like every R HTML widget, shiny integration is straightforward. But as a D3 widget, scatterD3 is updatable : changes in settings or data can be displayed via smooth transitions instead of a complete chart redraw, which can provide interesting visual clues.

To a small demonstration of these transitions, you can take a look at the sample scatterD3 shiny app.

Enabling transitions in your shiny app is quite simple, you just have to add the transitions = TRUE argument to your scatterD3 calls in your shiny server code. There’s only one warning : if your shiny application may filter on your dataset rows via a control, then you must provide a key_var variable that uniquely and persistently identify your rows.

Additional controls : Reset zoom and SVG export

Furthermore, scatterD3 provides some additional handlers to two interactive features : SVG export and zoom resetting.

By default, you just have to give the following id to the corresponding form controls :

If you are not happy with these ids, you can specify their names yourself with the arguments dom_id_svg_export and dom_id_reset_zoom.

Sample app and source code

The sample scatterD3 shiny app allows you to see the different features described here. You can check its source code on GitHub for a better understanding of the different arguments.