custom tooltip/hovertext for choropleth created with plotly via R

Viewed 147

I'm an experienced R user venturing into plotly-r. (I am also new to working with geo data.) I'm trying to build an interactive choropleth and I've been able to get pretty close to what I want with ggplot() >> ggplotly(), but I also want to be able to do the same thing starting with plot_ly().

I'm having a problem with tooltips. I've been able to set up custom tooltips using the first workflow, but I can't figure out how to do it when starting with plot_ly(). My code is below. The tooltip shows values from the split argument to add_sf(). I want it to show the string contained in the tmp1$text.

tmp0 <-
    ct.covid.positivity.0 %>%
    select(Town, town.positivity, pop.2010, tests.10k)

tmp1 <-
    ct.shp %>%
    left_join(tmp0, by=c("NAME10" = "Town")) %>%
    mutate(text=paste0(NAME10,
            "\nTest Pos: ", formatC(town.positivity, format="f", digits=2), "%",
            "\nPopulation: ", formatC(pop.2010, format="d"),
            "\nTests/10k/day: ", formatC(tests.10k/10, format="f", digits=2)))

map.positivity.plotly  <-
    plot_ly(data=tmp1,                  # plot_ly and plot_geo both get coordinate system wrong in different ways (cf. ggplotly)
            hoverinfo='text',
            text=~text) %>%
    add_sf(
        split=~NAME10,                  # hover text seems determined by split variable
        color=~town.positivity,
        colors="magma",                 # set colorscale
        alpha=1,
        stroke=I("grey90")
    ) %>%
    config(displayModeBar = FALSE) %>%
    layout(hovermode = "closest",
           hoverlabel = list(bgcolor="darkgreen",
                             bordercolor="black",
                             font=list(color="white", family = "Roboto Condensed", size=15)
                             ),
           title = list(text = paste("<b>10 Day Average Covid-19 Test Positivity in Connecticut Towns\nfor period ending",
                                     format(max(ct.covid$Date), "%B %d, %Y"), "</b>"),
                        x = 0,
                        xanchor = "left",
                        yanchor = "top",
                        pad = list(b=10, l=10, r=10, t=10))) %>%
    colorbar(title = "<b>Test Positivity (%)</b>") %>%
    hide_legend()              

You can see the result here: https://davebraze.github.io/ct-covid-map-examples/#plot_ly , on the Plot_ly tab. (See the Ggplotly tab for an idea of something close to what I want to do.)

My question: How do I adapt my code, using plot_ly() to show the content of tmp1$text in the tooltip that pops up when the mouse is hovered over each town? Any help will be appreciated.

1 Answers

If you would have included a data sample, I'm guessing you would have had an answer within minutes of posting...

You were SO close. You are missing one parameter. In the plotly call add hoveron = "fills"

(map.positivity.plotly  <-
  plot_ly(data=tmp1,        
          hoverinfo='text',
          hoveron = "fills",     #################   <--- add me!!
          text=~text) %>%
  add_sf(
    split=~NAME10,           # hover text seems determined by split variable
    color=~town.positivity,
    colors="magma",          # set colorscale
    alpha=1,
    stroke=I("grey90")
  ) %>%
  config(displayModeBar = FALSE) %>%
  layout(hovermode = "closest",
         hoverlabel = list(bgcolor="darkgreen",
                           bordercolor="black",
                           font=list(color="white", 
                                     family = "Roboto Condensed", 
                                     size=15)
         ),
         title = list(text = paste("<b>10 Day Average Covid-19 Test Positivity in Connecticut Towns\nfor period ending",
                                   format(max(ct.covid$Date), "%B %d, %Y"), "</b>"),
                      x = 0,
                      xanchor = "left",
                      yanchor = "top",
                      pad = list(b=10, l=10, r=10, t=10))) %>%
  colorbar(title = "<b>Test Positivity (%)</b>") %>%
  hide_legend())

enter image description here

Related