Display Image Data in R

This tutorial shows how to display and explore image data. If you would like instead a logo or static image, use layout.Image as explained here.

Display RGB Image Data with Image Trace

Note that Image trace only accepts multichannel images. For single images, use Heatmap. Image trace is different from the layout.Image class, which can be used for adding background images or logos to figures.

library(plotly)
library(EBImage)

img_rgb = list(list(c(255, 0, 0),c(0, 255, 0),c(0, 0, 255)),
               list(c(0,255, 0),c(0, 0, 255),c(255, 0, 0)))
fig <- plot_ly(type="image", z=img_rgb)
fig

Read image arrays from image files

In order to create a numerical array to be passed to Image trace, you can use a third-party library like EBImage to open an image from a URL.

library(plotly)
library(EBImage)

img = readImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Crab_Nebula.jpg/240px-Crab_Nebula.jpg')

fig <- plot_ly(type="image", z=img*255)
fig

Define the data range covered by the color range with zmin and zmax

The data range and color range are mapped together using the parameters zmin and zmax, which correspond respectively to the data values mapped to black [0, 0, 0] and white [255, 255, 255]. The default value of zmin and zmax depends on the colormodal value. In this example colormodel is "rgb"(by default), so the default value of zmin is [0, 0, 0] and zmax is [250, 250, 250].

library(plotly)
library(EBImage)

img = readImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Crab_Nebula.jpg/240px-Crab_Nebula.jpg')
# Stretch the contrast of the red channel only, resulting in a more red image
fig <- plot_ly(type="image", z=img*250,
               zmin=c(10, 0, 0), zmax=c(200, 250, 250))
fig

Set Ticks and Margins

library(plotly)
library(EBImage)

img = readImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Crab_Nebula.jpg/240px-Crab_Nebula.jpg')
fig <- plot_ly(type="image", z=img*250)
fig <- fig %>% layout(margin=list(l=10, r=10, b=0, t=0),
                      xaxis=list(showticklabels=FALSE, ticks=""),
                      yaxis=list(showticklabels=FALSE, ticks=""))
fig

Drawing Shapes on Images

You can create layout shapes programatically, but you can also draw shapes manually by setting the dragmode to one of the shape-drawing modes: drawline,drawopenpath, drawclosedpath, drawcircle, or drawrect. If you need to switch between different shape-drawing or other dragmodes (panning, selecting, etc.), modebar buttons can be added in the config of your figure to select the dragmode.

If you switch to a different dragmode such as pan or zoom, you will need to select the drawing tool in the modebar to go back to shape drawing.

This shape-drawing feature is particularly interesting for annotating graphs, in particular image traces.

Once you have drawn shapes, you can select and modify an existing shape by clicking on its boundary (note the arrow pointer). Its fillcolor turns to pink to highlight the activated shape and then you can

• drag and resize it for lines, rectangles and circles/ellipses
• drag and move individual vertices for closed paths
• move individual vertices for open paths.

An activated shape is deleted by cliking on the eraseshape button.

Drawing or modifying a shape triggers a relayout event, which can be captured by a callback inside a Dash For R application.

library(plotly)

library(plotly)
library(EBImage)

img = readImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Crab_Nebula.jpg/240px-Crab_Nebula.jpg')

fig <- plot_ly(type="image", z=img*255)

fig <- layout(fig, dragmode="drawrect", xaxis = list(title = 'Click and drag inside the figure to draw a rectangle or select another shape in the modebar'))

fig <- fig %>%
  config(modeBarButtonsToAdd = list("drawine", "drawopenpath", "drawclosedpath", "drawcircle", "drawrect", "eraseshape" ) )

fig

Reference

See https://plotly.com/r/reference/#image for more information and chart attribute options!

What About Dash?

Dash for R is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.

Learn about how to install Dash for R at https://dashr.plot.ly/installation.

Everywhere in this page that you see fig, you can display the same figure in a Dash for R application by passing it to the figure argument of the Graph component from the built-in dashCoreComponents package like this:

library(plotly)

fig <- plot_ly() 
# fig <- fig %>% add_trace( ... )
# fig <- fig %>% layout( ... ) 

library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)

app <- Dash$new()
app$layout(
    htmlDiv(
        list(
            dccGraph(figure=fig) 
        )
     )
)

app$run_server(debug=TRUE, dev_tools_hot_reload=FALSE)