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.
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 :
x
and y
valuesYou 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)
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.
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)
A legend is then automatically added. You can manually specify its width with the legend_width
argument. Use legend_width = 0
to disable it entirely.
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)
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))
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.
If the default tooltips don’t suit your needs, you can customize them by providing a character vector to the tooltip_text
argument. 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
.
You can draw a confidence ellipse around the points :
scatterD3(x = mtcars$wt, y = mtcars$mpg, ellipses = TRUE)
Or around the different groups of points defined by col_var
:
scatterD3(x = mtcars$wt, y = mtcars$mpg, col_var = mtcars$cyl, ellipses = TRUE)
Ellipses are computed by the ellipse.default()
function of the ellipse package. The confidence level can be changed with the ellipse_level
argument (0.95
by default).
Thanks to the d3-lasso-plugin integration made by @timelyportfolio, you can select and highlight points with a lasso selection tool. To activate it, just add a lasso = TRUE
argument. The tool is used by shift-clicking and dragging on the plot area (if it doesn’t activate, click on the chart first to give it focus).
scatterD3(x = mtcars$wt, y = mtcars$mpg, lab = rownames(mtcars), lasso = TRUE)
To undo the selection, just shift-click again.
You can specify a custom JavaScript callback function to be called by passing it to the lasso_callback
argument as a character string. This function should accept a sel
argument, which is a d3 selection of selected points.
Here is an example which shows an alert with selected point labels :
scatterD3(x = mtcars$wt, y = mtcars$mpg, lab = rownames(mtcars),
lasso = TRUE,
lasso_callback = "function(sel) {alert(sel.data().map(function(d) {return d.lab}).join('\\n'));}")
Finally, and for more specific use cases, you can represent some points as an arrow starting from the origin by using the type_var
argument, and you can add a unit circle with unit_circle = TRUE
.
scatterD3(x = c(1, 0.9, 0.7, 0.2, -0.4, -0.5), xlab = "x",
y = c(1, 0.1, -0.5, 0.5, -0.6, 0.7), ylab = "y",
lab = LETTERS[1:6], type_var = c("point", rep("arrow", 5)),
unit_circle = TRUE, fixed = TRUE, xlim = c(-1.2, 1.2))
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.
For 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 form control, then you must provide a key_var
variable that uniquely and persistently identify your rows.
Furthermore, scatterD3
provides some additional handlers for two interactive features : SVG export and zoom resetting.
By default, you just have to give the following id
to the corresponding form controls :
#scatterD3-reset-zoom
: reset zoom to default on click#scatterD3-svg-export
: link to download the currently displayed figure as an SVG fileIf 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
.
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.