|
| 1 | +--- |
| 2 | +name: Treemap Charts |
| 3 | +permalink: r/treemaps/ |
| 4 | +description: How to make treemap charts in R with Plotly. |
| 5 | +layout: base |
| 6 | +thumbnail: thumbnail/treemap.png |
| 7 | +language: r |
| 8 | +display_as: basic |
| 9 | +order: 17 |
| 10 | +output: |
| 11 | + html_document: |
| 12 | + keep_md: true |
| 13 | +--- |
| 14 | + |
| 15 | +```{r, echo = FALSE, message=FALSE} |
| 16 | +knitr::opts_chunk$set(message = FALSE, warning = FALSE) |
| 17 | +``` |
| 18 | +[Treemap charts](https://en.wikipedia.org/wiki/Treemapping) visualize hierarchical data using nested rectangles. Just like with a [sunburst chart](https://plot.ly/r/sunburst-charts/), the hierarchy of a treemap is defined by using the [labels](https://plot.ly/r/reference/#treemap-labels), and [parents](https://plot.ly/r/reference/#treemap-parents) attributes. |
| 19 | + |
| 20 | +Treemaps created with Plotly's R graphing library are interactive by default! Click on individual sectors of the treemap chart to zoom in/out of that sector and to display a hierarchical pathbar at the top of the chart. You can use this pathbar to zoom in/out of chart sectors instead of clicking on the sectors directly. |
| 21 | + |
| 22 | +### Basic Treemap |
| 23 | + |
| 24 | +```{r} |
| 25 | +library(plotly) |
| 26 | +
|
| 27 | +fig <- plot_ly( |
| 28 | + type="treemap", |
| 29 | + labels=c("Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"), |
| 30 | + parents=c("", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve") |
| 31 | +) |
| 32 | +fig |
| 33 | +``` |
| 34 | +### Customize Treemap Attributes |
| 35 | + |
| 36 | +You can customize several attributes of the treemaps you create with Plotly for R, including: |
| 37 | + |
| 38 | +1. [values](https://plot.ly/r/reference/#treemap-values): a list of the values assigned to each chart sector. |
| 39 | +2. [textinfo](https://plot.ly/r/reference/#treemap-textinfo): determines the textual information that will appear in each chart sector. Valid values are 'text', 'value', 'current path', 'percent root', 'percent entry', 'percent parent', or any combination of the preceding. |
| 40 | +3. [pathbar](https://plot.ly/r/reference/#treemap-pathbar): determines whether the pathbar is visible when users zoom into chart sectors. |
| 41 | +4. [branchvalues](https://plot.ly/r/reference/#treemap-branchvalues): the method that has been used to calculate the `values` of chart sectors that have desendants. Valid values for this attribute are `total` and `remainder`; the default value is `remainder`. |
| 42 | + - When set to `remainder`, items in the `values` attribute which correspond to the root of the chart and the branches sectors are taken to be the extra part not part of the sum of the values at their leaves. |
| 43 | + - When set to `total`, a brach's value is taken to be equal to the sum of the `values` of each chart sector that is a descendant of that branch. This behavior is demonstrated in the second trace in the example figure below- the value of the `Eva` branch is 65, which is the sum of the values of each chart sector that is a descendant of that branch (14 + 12 + 10 + 2 + 6 + 6 + 1 + 4). |
| 44 | + |
| 45 | + |
| 46 | +```{r} |
| 47 | +library(plotly) |
| 48 | +
|
| 49 | +labels = c("Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura") |
| 50 | +parents = c("", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve") |
| 51 | +
|
| 52 | +fig <- plot_ly( |
| 53 | + type='treemap', |
| 54 | + labels=labels, |
| 55 | + parents=parents, |
| 56 | + values= c(10, 14, 12, 10, 2, 6, 6, 1, 4), |
| 57 | + textinfo="label+value+percent parent+percent entry+percent root", |
| 58 | + domain=list(column=0)) |
| 59 | +
|
| 60 | +fig <- fig %>% add_trace( |
| 61 | + type='treemap', |
| 62 | + branchvalues="total", |
| 63 | + labels=labels, |
| 64 | + parents=parents, |
| 65 | + values=c(65, 14, 12, 10, 2, 6, 6, 1, 4), |
| 66 | + textinfo="label+value+percent parent+percent entry", |
| 67 | + outsidetextfont=list(size=20, color= "darkblue"), |
| 68 | + marker=list(line= list(width=2)), |
| 69 | + pathbar=list(visible= FALSE), |
| 70 | + domain=list(column=1)) |
| 71 | +
|
| 72 | +fig <- fig %>% layout( |
| 73 | + grid=list(columns=2, rows=1), |
| 74 | + margin=list(l=0, r=0, b=0, t=0)) |
| 75 | +
|
| 76 | +fig |
| 77 | +``` |
| 78 | + |
| 79 | +### Set Color of Treemap Sectors |
| 80 | + |
| 81 | +There are three different attributes you can use to change the color of the sectors of treemaps you have created with Plotly for R: |
| 82 | + |
| 83 | +1. [marker.colors](https://plot.ly/r/reference/#treemap-marker-colors), |
| 84 | +2. [marker.colorscale](https://plot.ly/r/reference/#treemap-colorscale). |
| 85 | +3. [colorway](https://plot.ly/r/reference/#treemap-colorway), |
| 86 | + |
| 87 | +The following examples show how to use each attribute. To use `marker.colors`, pass a list of valid CSS colors or hexadecimal color codes. |
| 88 | + |
| 89 | +```{r} |
| 90 | +library(plotly) |
| 91 | +
|
| 92 | +labels = c("A1", "A2", "A3", "A4", "A5", "B1", "B2") |
| 93 | +parents = c("", "A1", "A2", "A3", "A4", "", "B1") |
| 94 | +
|
| 95 | +fig <- plot_ly( |
| 96 | + type="treemap", |
| 97 | + labels=labels, |
| 98 | + parents=parents, |
| 99 | + marker=list(colors=c("#000", "royalblue", "lightgray", "purple", "#FFF", "lightgray", "lightblue"))) |
| 100 | +fig |
| 101 | +``` |
| 102 | +The following example uses the `marker.colorsclae` attribute. Rather than using a list of colors, simply supply a colorscale. The built-in colorscales are: |
| 103 | + - `Greys`, `YlGnBu`, `Greens`, `YlOrRd`, `Bluered`, `RdBu`, `Reds` |
| 104 | + - `Blues`, `Picnic`, `Rainbow`, `Portland`, `Jet`, `Hot` |
| 105 | + - `Blackbody`, `Earth`, `Electric`, `Viridis`, `Cividis` |
| 106 | + |
| 107 | +```{r} |
| 108 | +library(plotly) |
| 109 | +
|
| 110 | +labels = c("A1", "A2", "A3", "A4", "A5", "B1", "B2") |
| 111 | +parents = c("", "A1", "A2", "A3", "A4", "", "B1") |
| 112 | +values = c("11", "12", "13", "14", "15", "20", "30") |
| 113 | +
|
| 114 | +fig <- plot_ly( |
| 115 | + type="treemap", |
| 116 | + labels=labels, |
| 117 | + parents=parents, |
| 118 | + values=values, |
| 119 | + marker=list(colorscale='Reds')) |
| 120 | +
|
| 121 | +fig |
| 122 | +``` |
| 123 | + |
| 124 | +The following example uses the `treemapcolorway` attribute, which should be set in the chart's layout. |
| 125 | + |
| 126 | +```{r} |
| 127 | +library(plotly) |
| 128 | +
|
| 129 | +labels = c("A1", "A2", "A3", "A4", "A5", "B1", "B2") |
| 130 | +parents = c("", "A1", "A2", "A3", "A4", "", "B1") |
| 131 | +
|
| 132 | +fig <- plot_ly( |
| 133 | + type="treemap", |
| 134 | + labels=labels, |
| 135 | + parents=parents) |
| 136 | +
|
| 137 | +fig <- fig %>% layout(treemapcolorway=c("pink","lightgray")) |
| 138 | +fig |
| 139 | +``` |
| 140 | +### Nested Layers in Treemap |
| 141 | + |
| 142 | +The following example demonstrates how treemap charts can be used to reveal insights into the structure of hierarchical data that includes information about layers and grouping. The [maxdepth](https://plot.ly/r/reference/#treemap-maxdepth) attribute can be used to control how many levels of data are rendered; the default value of `-1` renders all the levels in the hierarchy. |
| 143 | +```{r} |
| 144 | +library(plotly) |
| 145 | +
|
| 146 | +df1 = read.csv('https://raw.githubusercontent.com/plotly/datasets/718417069ead87650b90472464c7565dc8c2cb1c/sunburst-coffee-flavors-complete.csv') |
| 147 | +df2 = read.csv('https://raw.githubusercontent.com/plotly/datasets/718417069ead87650b90472464c7565dc8c2cb1c/coffee-flavors.csv') |
| 148 | +
|
| 149 | +fig <- plot_ly( |
| 150 | + type='treemap', |
| 151 | + ids=df1$ids, |
| 152 | + labels=df1$labels, |
| 153 | + parents=df1$parents, |
| 154 | + domain=list(column=0)) |
| 155 | +
|
| 156 | +fig <- fig %>% add_trace( |
| 157 | + type='treemap', |
| 158 | + ids=df2$ids, |
| 159 | + labels=df2$labels, |
| 160 | + parents=df2$parents, |
| 161 | + maxdepth=1, |
| 162 | + domain=list(column=1)) |
| 163 | +fig <- fig %>% layout(grid=list(columns=2, rows=1)) |
| 164 | +fig |
| 165 | +
|
| 166 | +
|
| 167 | +``` |
| 168 | +### Controlling Text Font Size with `uniformtext` |
| 169 | + |
| 170 | +By default, the font size of text labels in your treemap chart will vary to fit into the available space within a sector. However, if you want all the text labels in your treemap chart to have the same font size, you can use the `uniformtext` layout parameter. The `minsize` attribute sets the font size, and the `mode` attribute sets what happens to labels which cannot fit within a sector with the specified fontsize: either `hide` them or `show` them with overflow. |
| 171 | + |
| 172 | +```{r} |
| 173 | +library(plotly) |
| 174 | +df = read.csv('https://raw.githubusercontent.com/plotly/datasets/718417069ead87650b90472464c7565dc8c2cb1c/sunburst-coffee-flavors-complete.csv') |
| 175 | +fig <- plot_ly( |
| 176 | + type='treemap', |
| 177 | + ids=df$ids, |
| 178 | + labels=df$labels, |
| 179 | + parents=df$parents) |
| 180 | +
|
| 181 | +fig <- fig %>% layout(uniformtext=list(minsize=10, mode='hide')) |
| 182 | +fig |
| 183 | +``` |
| 184 | + |
| 185 | +#Reference |
| 186 | + |
| 187 | +See [https://plot.ly/r/reference/#treemap](https://plot.ly/r/reference/#treemap) for more information and chart attribute options! |
0 commit comments