Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

R collapsibleTree: add images dynamically in tooltip

Tags:

javascript

html

r

This is an excellent package to show hierarchy levels.

as per provided document of collapsibleTree Package

Here in below code he has used a image in tooltip.

org$tooltip <- paste0(
org$Employee,
"<br>Title:",
org$Title,
"<br><img src='https://source.unsplash.com/collection/385548/150x100'>"
)

collapsibleTreeNetwork(
org,
attribute = "Title",
fill = "Color",
nodeSize = "leafCount",
tooltipHtml = "tooltip"
)

Here a single image is shown at every bubble.

In my table i have a column of images per each Employee. enter image description here

Now for example A Employee --> Image A should be show. Likewise it should show for all the employees.

Is it possible.

Any suggestions will be appreciable.

Thanks Mohan V

like image 346
Bunny Avatar asked Oct 21 '25 19:10

Bunny


1 Answers

Here a single image is shown at every bubble. [...] Can we show dynamically those images to their respected employee bubble.

Based on the package author's example on GitHub, here's one with different pictures per node:

library(collapsibleTree)
org <- data.frame(
  Manager = c(
    NA, "Ana", "Ana", "Bill", "Bill", "Bill", "Claudette", "Claudette", "Danny",
    "Fred", "Fred", "Grace", "Larry", "Larry", "Nicholas", "Nicholas"
  ),
  Employee = c(
    "Ana", "Bill", "Larry", "Claudette", "Danny", "Erika", "Fred", "Grace",
    "Henri", "Ida", "Joaquin", "Kate", "Mindy", "Nicholas", "Odette", "Peter"
  ),
  Title = c(
    "President", "VP Operations", "VP Finance", "Director", "Director", "Scientist",
    "Manager", "Manager", "Jr Scientist", "Operator", "Operator", "Associate",
    "Analyst", "Director", "Accountant", "Accountant"
  )
)

# Add in colors and sizes
org$Color <- org$Title
levels(org$Color) <- colorspace::rainbow_hcl(11)

org$tooltip <- sprintf("
  %s<br>Title: %s<br><img src='%s'>", 
  org$Employee, 
  org$Title, 
  paste0("https://github.com/twitter/twemoji/blob/gh-pages/72x72/1f19", c(1, 1:9, letters[1:6]), ".png?raw=true")
)

collapsibleTreeNetwork(
  org,
  attribute = "Title",
  fill = "Color",
  nodeSize = "leafCount",
  tooltipHtml = "tooltip"
)

enter image description here

like image 151
lukeA Avatar answered Oct 24 '25 08:10

lukeA



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!