Tree map and labels in Plotly

Question

I am creating Treemap with Plotly. Below you can see my data and my code

    df1<-structure(list(manuf = c("AMC", "Cadillac", "Camaro", "Chrysler", 
                                  "Datsun", "Dodge", "Duster", "Ferrari", "Fiat", "Ford", "Honda", 
                                  "Hornet", "Lincoln", "Lotus", "Maserati", "Mazda", "Merc", "Pontiac", 
                                  "Porsche", "Toyota", "Valiant", "Volvo"), count = c(1L, 1L, 1L, 
                                                                                      1L, 1L, 1L, 1L, 1L, 2L, 1L, 1L, 2L, 1L, 1L, 1L, 2L, 7L, 1L, 1L, 
                                                                                      2L, 1L, 1L)), row.names = c(NA, -22L), class = c("tbl_df", "tbl", 
                                                                                                                                       "data.frame"))

treemap<-plot_ly(data = df1,
                 type= "treemap",
                 values= ~count,
                 labels= ~manuf,
                 parents=  ~test,
                 domain= list(column=0),
                 name = " ",
                 textinfo="label+value+percent parent")  %>%
  layout(title="", 
         annotations =
           list(x = 0, y = -0.1,
                title = "", 
                text = " ",
                showarrow = F,
                xref='paper',
                yref='paper'))

treemap

This code produces Treemap as the map shown below. In this plot, Merc has the largest share of 22 % and is the blue color.

So far, so good. But problem arise when I change some values in the data, as shown in the data below. Now instead of Merc in the first place is AMC with 44.6 %. Below you can see the data and code

df2<-structure(list(manuf = c("AMC", "Cadillac", "Camaro", "Chrysler", 
                              "Datsun", "Dodge", "Duster", "Ferrari", "Fiat", "Ford", "Honda", 
                              "Hornet", "Lincoln", "Lotus", "Maserati", "Mazda", "Merc", "Pontiac", 
                              "Porsche", "Toyota", "Valiant", "Volvo"), count = c(25L, 1L, 1L, 
                                                                                  1L, 1L, 1L, 1L, 1L, 2L, 1L, 1L, 2L, 1L, 1L, 1L, 2L, 7L, 1L, 1L, 
                                                                                  2L, 1L, 1L)), row.names = c(NA, -22L), class = c("tbl_df", "tbl", 
                                                                                                                                   "data.frame"))

df2$test<-1

treemap<-plot_ly(data = df2,
                 type= "treemap",
                 values= ~count,
                 labels= ~manuf,
                 parents=  ~test,
                 domain= list(column=0),
                 name = " ",
                 #marker = list(colors = ~colr),
                 textinfo="label+value+percent parent")  %>%
  layout(title="", font = t,
         annotations =
           list(x = 0, y = -0.1,
                title = "", 
                text = " ",
                showarrow = F,
                xref='paper',
                yref='paper'))

treemap

This code produces Treemap as shown below.

Now in this Treemap, colors are different compared to the first Treemap. Namely Merc in the first plot is blue in color while in the second plot is orange.

So can anybody help me how to produce Donut plots with the same colors for the same names. I prefer to have this color as is showed in this Treemaps.

Answer 1

Update based on your additional request -- keep the original color scheme

To obtain the original colors, I used htmlwidgets::onRender. (I used the second treemap here.)

After rendering the treemap in my browser, I copied the array of hex codes into R.

treemap %>% 
  htmlwidgets::onRender("
  function(el, x) {
    cd = el.calcdata[0];
    cols = [];
    for(i = 1; i < cd.length; i++){
      cols.push(cd[i].color)
    }
    console.log(cols);
  }")

colr = c('#1f77b4', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#57a9e2', 
         '#ffb574', '#5fd35f', '#2ca02c', '#e77c7c', '#c6aedc', '#d62728', 
         '#bc8b81', '#f4cce8', '#b2b2b2', '#9467bd', '#ff7f0e', '#e2e362', 
         '#5fe0ed', '#8c564b', '#103d5d', '#a74e00')

Now you can use these colors instead of viridis in your treemaps.

Your treemaps as originally designed with the exception of inducing consistent colors:

plot_ly(data = df2, type = "treemap", values = ~count, labels = ~manuf,
        parents = ~test, name = " ",
        marker = list(colors = setNames(colr, unique(df2$manuf))), # <- mod here!
        textinfo="label+value+percent parent")  %>%
  layout(title="")

plot_ly(data = df1, type = "treemap", values = ~count, labels = ~manuf,
        parents = ~test, name = " ", 
        marker = list(colors = setNames(colr, unique(df1$manuf))),
        textinfo="label+value+percent parent")  %>%
  layout(title="")

Original Answer

You want to use marker.colors to define a specific color for each label.

I used viridisLite::viridis to create a color palette. This assumes that the manufacturers are in the same order in the two data sets.

The first treemap.

(treemap<-plot_ly(data = df1,
                 type= "treemap",
                 values= ~count,
                 labels= ~manuf,
                 parents=  ~test,
                 domain= list(column=0),
                 name = " ",
                 marker = list(                # I'm new!
                   colors = setNames(viridisLite::viridis(length(unique(df1$manuf))),
                                     unique(df1$manuf))),
                 textinfo="label+value+percent parent")  %>%
  layout(title="", 
         annotations =
           list(x = 0, y = -0.1,
                title = "", 
                text = " ",
                showarrow = F,
                xref='paper',
                yref='paper')))

The second treemap.

treemap<-plot_ly(data = df2,
                 type= "treemap",
                 values= ~count,
                 labels= ~manuf,
                 parents=  ~test,
                 domain= list(column=0),
                 name = " ",
                 marker = list(                # I'm new!
                   colors = setNames(viridisLite::viridis(length(unique(df2$manuf))),
                                     unique(df2$manuf))),
                 textinfo="label+value+percent parent")  %>%
  layout(title="", font = t,
         annotations =
           list(x = 0, y = -0.1,
                title = "", 
                text = " ",
                showarrow = F,
                xref='paper',
                yref='paper'))