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 feature 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 and symbols 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.

Custom axis and legend labels

You can customize the axis and legend labels with the xlab, ylab, col_lab and symbol_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 : additional controls and SVG export

Like every R HTML widget, shiny integration is straightforward. Furthermore, we provide some additional handlers to map form controls to SVG export and interactive effects (text size, points opacity and zoom reset). You just have to give the following id to your form controls :

Here is a minimal working example :

library(shiny)
runApp(shinyApp(
    ui=fluidPage(
      sidebarLayout(
        sidebarPanel(
          numericInput("scatterD3-size", "Labels size :", min = 2, max = 30, value = 10),
          numericInput("scatterD3-opacity", "Opacity :", min = 0, max = 1, value = 1, step=0.05),
          actionButton("scatterD3-resetzoom", "Reset Zoom"),
          tags$a(id="scatterD3-download", href="#", class="btn btn-default", "Download SVG")
        ),
        mainPanel(scatterD3Output("scatterPlot"))
      )
    ),
    server = function(input, output) {
      output$scatterPlot <- renderScatterD3({
        scatterD3(x=mtcars$wt,
                  y=mtcars$mpg,
                  lab=rownames(mtcars),
                  col_var=mtcars$cyl)
      })
    }
))

You can see the result of this minimal scatterD3 shiny app hosted on shinyapps.io.