Open the URL post clicking on the block

General
1

Hi all,

I have a same data with treemap constructed. Everything is working as expected. But lacks one feature. There are links in the dataframe. When the user clicks on the respective blocks, the url should be opened

library(plotly)

dtd7 <- structure(
  list(
    topic = structure(
      c(9L, 8L, 4L, 7L, 2L, 6L, 1L, 3L,
        5L, 10L, 13L, 11L, 12L),
      .Label = c("Apple", "Avocado", "Banana", "Carrot", "Mango","Mushroom", "Onion", "Orange", "Pineapple", "Strawberry", "Sweet-lemon", "Watermelon", "Wildberry"),
      class = "factor"
    ),
    n = structure(
      c(4L, 3L, 9L, 11L, 12L, 2L, 1L, 6L, 10L, 5L,
        7L, 8L, 1L),
      .Label = c("23", "24", "36", "42", "43", "46", "48", "52", "56", "61", "82", "94"),
      class = "factor"
    ),
    link = structure(c("<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                       "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                       "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                       "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                       "<a href = 'https://www.amazon.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                       "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                       "<a href = 'https://www.google.co.in/'>google</a>"))
  ),
  class = "data.frame",
  row.names = c(NA,-13L)
)

p <- plot_ly(
  dtd7,
  labels = ~ topic,
  parents = NA,
  values = ~ n,
  type = 'treemap',
  hovertemplate = "Ingredient: %{label}<br>Count: %{value}<extra></extra>"
)

p
2

One way to do this is to add the argument of text to the plot_ly function.

p <- plot_ly(
   dtd7,
   labels = ~ topic,
   parents = NA,
   values = ~ n,
   type = 'treemap',
   text=~link,####
   hovertemplate = "Ingredient: %{label}<br>Count: %{value}<extra></extra>"
)
3

Very thanks for the quick solution. But wanted to check if there is a way to implement a feature where in just clicking on the link opens the url?

Right now, the link appears right below the text :slight_smile:

4

You could create a new URL with the topic as the keyword.

library(plotly)
#> Loading required package: ggplot2
#> 
#> Attaching package: 'plotly'
#> The following object is masked from 'package:ggplot2':
#> 
#>     last_plot
#> The following object is masked from 'package:stats':
#> 
#>     filter
#> The following object is masked from 'package:graphics':
#> 
#>     layout
library(tidyverse)
dtd7 <- structure(
   list(
      topic = structure(
         c(9L, 8L, 4L, 7L, 2L, 6L, 1L, 3L,
           5L, 10L, 13L, 11L, 12L),
         .Label = c("Apple", "Avocado", "Banana", "Carrot", "Mango","Mushroom", "Onion", "Orange", "Pineapple", "Strawberry", "Sweet-lemon", "Watermelon", "Wildberry"),
         class = "factor"
      ),
      n = structure(
         c(4L, 3L, 9L, 11L, 12L, 2L, 1L, 6L, 10L, 5L,
           7L, 8L, 1L),
         .Label = c("23", "24", "36", "42", "43", "46", "48", "52", "56", "61", "82", "94"),
         class = "factor"
      ),
      link = structure(c("<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                         "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                         "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                         "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                         "<a href = 'https://www.amazon.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                         "<a href = 'https://www.google.co.in/'>google</a>","<a href = 'https://www.google.co.in/'>google</a>",
                         "<a href = 'https://www.google.co.in/'>google</a>"))
   ),
   class = "data.frame",
   row.names = c(NA,-13L)
)

dtd7_link <- dtd7 %>%
   mutate(
      newlink=glue::glue("<a href = 'https://www.google.co.in/'>{topic}</a>")
   )
dtd7_link
#>          topic  n                                             link
#> 1    Pineapple 42 <a href = 'https://www.google.co.in/'>google</a>
#> 2       Orange 36 <a href = 'https://www.google.co.in/'>google</a>
#> 3       Carrot 56 <a href = 'https://www.google.co.in/'>google</a>
#> 4        Onion 82 <a href = 'https://www.google.co.in/'>google</a>
#> 5      Avocado 94 <a href = 'https://www.google.co.in/'>google</a>
#> 6     Mushroom 24 <a href = 'https://www.google.co.in/'>google</a>
#> 7        Apple 23 <a href = 'https://www.google.co.in/'>google</a>
#> 8       Banana 46 <a href = 'https://www.google.co.in/'>google</a>
#> 9        Mango 61 <a href = 'https://www.amazon.co.in/'>google</a>
#> 10  Strawberry 43 <a href = 'https://www.google.co.in/'>google</a>
#> 11   Wildberry 48 <a href = 'https://www.google.co.in/'>google</a>
#> 12 Sweet-lemon 52 <a href = 'https://www.google.co.in/'>google</a>
#> 13  Watermelon 23 <a href = 'https://www.google.co.in/'>google</a>
#>                                                  newlink
#> 1    <a href = 'https://www.google.co.in/'>Pineapple</a>
#> 2       <a href = 'https://www.google.co.in/'>Orange</a>
#> 3       <a href = 'https://www.google.co.in/'>Carrot</a>
#> 4        <a href = 'https://www.google.co.in/'>Onion</a>
#> 5      <a href = 'https://www.google.co.in/'>Avocado</a>
#> 6     <a href = 'https://www.google.co.in/'>Mushroom</a>
#> 7        <a href = 'https://www.google.co.in/'>Apple</a>
#> 8       <a href = 'https://www.google.co.in/'>Banana</a>
#> 9        <a href = 'https://www.google.co.in/'>Mango</a>
#> 10  <a href = 'https://www.google.co.in/'>Strawberry</a>
#> 11   <a href = 'https://www.google.co.in/'>Wildberry</a>
#> 12 <a href = 'https://www.google.co.in/'>Sweet-lemon</a>
#> 13  <a href = 'https://www.google.co.in/'>Watermelon</a>
p <- plot_ly(
   dtd7_link,
   labels = ~ newlink,
   parents = NA,
   values = ~ n,
   type = 'treemap',
   hovertemplate = "Ingredient: %{label}<br>Count: %{value}<extra></extra>"
)

Created on 2021-06-01 by the reprex package (v2.0.0)

5

Perfect thanks a lot...

6

In a shiny context you can do the following, note that I made link be just a url rather than a html tag

library(plotly)
library(shiny)

dtd7 <- structure(
  list(
    topic = structure(
      c(9L, 8L, 4L, 7L, 2L, 6L, 1L, 3L,
        5L, 10L, 13L, 11L, 12L),
      .Label = c("Apple", "Avocado", "Banana", "Carrot", "Mango","Mushroom", "Onion", "Orange", "Pineapple", "Strawberry", "Sweet-lemon", "Watermelon", "Wildberry"),
      class = "factor"
    ),
    n = structure(
      c(4L, 3L, 9L, 11L, 12L, 2L, 1L, 6L, 10L, 5L,
        7L, 8L, 1L),
      .Label = c("23", "24", "36", "42", "43", "46", "48", "52", "56", "61", "82", "94"),
      class = "factor"
    ),
    link = structure(c("https://www.google.co.in/", "https://www.google.co.in/", "https://www.google.co.in/", 
                         "https://www.google.co.in/", "https://www.google.co.in/", "https://www.google.co.in/", 
                         "https://www.google.co.in/", "https://www.google.co.in/", "https://www.amazon.co.in/", 
                         "https://www.google.co.in/", "https://www.google.co.in/", "https://www.google.co.in/", 
                         "https://www.google.co.in/"))
  ),
  class = "data.frame",
  row.names = c(NA,-13L)
)


library(shiny)

ui <- fluidPage(
  plotlyOutput("treeout")
)

server <- function(input, output, session) {
  
  p_obj <- reactive(
    plot_ly(
      dtd7,
      labels = ~ topic,
      parents = NA,
      values = ~ n,
      type = 'treemap',
      customdata = ~link,
      source = "treemap_click",
      hovertemplate = "<extra></extra>"
    ) %>% event_register("plotly_click")
  )
 output$treeout <- renderPlotly(
  req(p_obj()))
 
 
 observe({
   d <- event_data(event = "plotly_click",
                   source = "treemap_click")
   req(d)
   browseURL(d$customdata)
 })
}

shinyApp(ui, server)
7

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.