Bob's Your Uncle Bob's Your Uncle - 1 month ago 25
Javascript Question

R / d3heatmap / shiny - is there a way to embed images in d3 tooltip?

I'd like to embed images (rather than the default Row - Column - Value data) in the d3 tooltip when scrolling over a cell.

library(shiny)
library(d3heatmap)

ui <- shinyUI(fluidPage(

titlePanel("Old Faithful Geyser Data"),
mainPanel(
d3heatmapOutput("out")
)
)
)

server <- shinyServer(function(input, output) {

output$out <- renderD3heatmap({
d3heatmap(x = mtcars,
Colv = NULL,
scale= "column",
key = FALSE,
yaxis_font_size = "10pt",
xaxis_font_size = "10pt")
})

})

shinyApp(ui = ui, server = server)


Default Tooltip

1981 Toyota Carona

Answer

One way to do this is to encode your image in base64 and then pass a matrix of those images to d3heatmap(..., cellnote = )

    var tip = d3.tip()
    .attr('class', 'd3heatmap-tip')
    .html(function(d, i) {
        return ('<img src="' + d.label + '"/>');
    })