Example of use of echarts4r to make a treemap

echarts4r-treemap-example.R

# based on the example at: https://echarts4r.john-coene.com/articles/chart_types.html#treemap
# the JS example at: https://echarts.apache.org/examples/en/editor.html?c=treemap-show-parent
# and the documentation at: https://echarts.apache.org/en/option.html#series-treemap.type
library(tidyverse)
library(echarts4r)

# this data structure does not work with the changed function

# set.seed(13579)
# 
# tm <- tribble(
#   ~parent, ~child,
#   "Earth", "Forest",
#   "Earth", "Ocean",
#   "Earth", "Iceberg",
#   "Mars", "Elon",
#   "Mars", "Curiosity",
#   "Discworld", "The Rim",
#   "Discworld", "Ankh-Morpork",
#   "Discworld", "A'Tuin"
# ) %>% add_column(
#   value = ceiling(rnorm(8, 10, 2))
# )


# the new version of the e_treemap() function in echarts4r 0.4.2
# expects hierarchical data, here I am creating it stepwise so it
# is clear how it should be structured

earth <- tribble(
  ~name, ~value,
  "Forest", 40,
  "Ocean", 40,
  "Iceberg", 20
)

mars <- tribble(
  ~name, ~value,
  "Elon", 20,
  "Curiosity", 80
)

discworld <- tribble(
  ~name, ~value,
  "The Rim", 15,
  "Ankh-Morpork", 12,
  "A'Tuin", 11
)


tm <- tribble(
  ~name, ~value, ~children,
  "Earth", 26, earth,
  "Mars", 20, mars,
  "Discworld", 38, discworld
)

tm %>%
  e_charts() %>%
  e_treemap(
            leafDepth = 1,  #drilldown
            #breadcrumb = FALSE, #remove it
            backgroundColor = "red",
            itemStyle = list(
              normal = list(
                borderWidth = 0,
                gapWidth = 2,
                backgroundColor = "gray70"
              )
            ),
            name = "Having fun with treemaps",
            upperLabel = list(
              normal = list(
                show = TRUE,
                height = 30,
                formatter = "{b}",
                color = "black",
                fontSize = 24
              )
            )
  )%>%
  e_tooltip() %>%
  e_labels(show = TRUE,
           verticalAlign = "top",
           fontSize = 24,
           formatter = "{b}\n{@value} Thaums"
  ) %>%
  e_title("Treemap charts",
          textStyle = list(fontSize = 36),
          textVerticalAlign = "top",
          left = "center",
          backgroundColor = "#CD853F64") %>%
  e_theme("dark")

If you need a more complex formatter, you'll need to use JS as documented in: https://echarts4r.john-coene.com/articles/tooltip.html

Full examples of treemaps made with echarts4r are relatively hard to come by. Thank you very much for sharing this. It seems; however, that the recent update to the package has made this code obsolete. The e_treemap() function does not currently have arguments, which will accept the column names of the data frame. I am looking forward to an update of your code if this is something that you plan to do.

HI @gueyenono, it would seem that the data needs to be hierarchical now. I'll see if can take a look at this on the weekend and come up with a new example using the same (or similar) data. Thanks for the heads up on the change in {echarts4r::e_treemap()}.

Hi @gueyenono, looks like it was a simple change in data structure. Updated the gist

@jmcastagnetto This is very much appreciated. I will study your code and learn from it.