AdeelK93 / collapsibleTree

Create Interactive Collapsible Tree Diagrams in R using D3.js
https://adeelk93.github.io/collapsibleTree/
158 stars 41 forks source link

[Feature Request] Character columns in tooltips #16

Closed alexlach closed 7 years ago

alexlach commented 7 years ago

Firstly, I want to say this is a fantastic package! Thanks for releasing this!

Is it possible to use a character field in tooltips? If this is not possible, is there a way to make multi-line labels on nodes?

The reason I ask is I'm testing out having an organization chart with this. It's helpful to have both employee name and job title visible.

AdeelK93 commented 7 years ago

Thank you, and happy you're finding the package useful!

I imagine your org chart can be represented as a series of parent-child relations, in which case you can help use data.tree to help turn your table into a hierarchal structure. As for multi-line labels, just use an html <br/> tag, and use the identity function for aggregation.

How does this look?

# Using a flat relationship-style data frame with tooltips
Relationships <- data.frame(
  Parent=c("Alice","Alice","Bob", "Bob", "Bob", "B", "B", "C", "E", "E", "F", "Susan", "Susan", "M", "M"),
  Child=c("Bob","Susan","B", "C", "D", "E", "F", "G", "H", "I", "J", "L", "M", "N", "O"),
  Title=c("Senior<br/>Manager","Manager","B", "C", "D", "E", "F", "G", "H", "I", "J", "L", "M", "N", "O")
)
tree <- data.tree::FromDataFrameNetwork(Relationships, "Title")

# Define root node value as 0
tree$Title <- "Director"

# Create tree diagram with the aggregation function of identity
collapsibleTree(
  tree,
  tooltip = TRUE,
  attribute = "Title",
  aggFun = identity,
  collapsed = FALSE,
  fill = colorspace::terrain_hcl(16)
)
AdeelK93 commented 7 years ago

I decided to create a convenience function for this sort of data structure, and implemented better tooltip support for it. It's in the github version, let me know what you think!

# devtools::install_github("AdeelK93/collapsibleTree")

# Create a simple org chart
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"
  )
)
collapsibleTreeNetwork(org, attribute = "Title")

# Add in colors and sizes
org$Color <- org$Title
levels(org$Color) <- colorspace::rainbow_hcl(11)
collapsibleTreeNetwork(
  org,
  attribute = "Title",
  fill = "Color",
  nodeSize = "leafCount",
  collapsed = FALSE
)

# Use unsplash api to add in random photos to 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",
  collapsed = FALSE
)