First, you should load recharts
:
library(recharts)
Treemap chart includes 1 basic type:
The keys are:
x
with at least 2 columns: x[,1] are the nodes of the trees, x[,2] are parent nodes of the tree nodes. For root nodes, parent should be NA.y
facet
is used to produce separate treemapsechartr(data, x, <y>, <series>, <facet>, <t>, <type>, <subtype>)
Arg | Requirement |
---|---|
data |
source data in the form of data.frame |
x |
character independent variable. Each level of |
y |
numeric dependent variable. Only the first one is accepted if multiple variables are provided. |
series |
series variable which will be coerced to factors. Each level of |
facet |
facetting variable which will be coerced to factors. Each level of |
t |
timeline variable which will be coerced to factors. Only the first one is accepted if multiple variables are provided. |
type |
‘treemap’. |
Let’s prepare a data.frame to show the typical structure.
data <- data.frame(
node=c('IOS', 'Android', 'Samsung', 'Apple', 'Huawei', 'Lenovo', 'Xiaomi',
'Others', 'LG', 'Oppo', 'Vivo', 'ZTE', 'Other'),
parent=c(rep(NA, 2), 'Android', 'IOS', rep('Android', 4), rep('Others', 5)),
series=(rep('Smartphone', 13)),
value=c(231.5, 1201.4, 324.8, 231.5, 106.6, 74, 70.8, 625.2, 51.7, 49.1,
42.6, 40, 243))
knitr::kable(data)
node | parent | series | value |
---|---|---|---|
IOS | NA | Smartphone | 231.5 |
Android | NA | Smartphone | 1201.4 |
Samsung | Android | Smartphone | 324.8 |
Apple | IOS | Smartphone | 231.5 |
Huawei | Android | Smartphone | 106.6 |
Lenovo | Android | Smartphone | 74.0 |
Xiaomi | Android | Smartphone | 70.8 |
Others | Android | Smartphone | 625.2 |
LG | Others | Smartphone | 51.7 |
Oppo | Others | Smartphone | 49.1 |
Vivo | Others | Smartphone | 42.6 |
ZTE | Others | Smartphone | 40.0 |
Other | Others | Smartphone | 243.0 |
The tree structure is defined by the mapping of nodes and parents.
You will see a breadcumb navigator under the treemap. The area of each tile is defined by value
.
type
is set ‘treemap’.
echartr(data, c(node, parent), value, facet=series, type='treemap') %>%
setTitle('Smartphone Sales 2015 (Million)', pos=5)
You can modify the data a little bit to yield multiple series
.
data1 <- data[3:13,]
data1$series <- c('Android', 'IOS', rep('Android', 9))
data1$parent[1:6] <- NA
knitr::kable(data1)
node | parent | series | value | |
---|---|---|---|---|
3 | Samsung | NA | Android | 324.8 |
4 | Apple | NA | IOS | 231.5 |
5 | Huawei | NA | Android | 106.6 |
6 | Lenovo | NA | Android | 74.0 |
7 | Xiaomi | NA | Android | 70.8 |
8 | Others | NA | Android | 625.2 |
9 | LG | Others | Android | 51.7 |
10 | Oppo | Others | Android | 49.1 |
11 | Vivo | Others | Android | 42.6 |
12 | ZTE | Others | Android | 40.0 |
13 | Other | Others | Android | 243.0 |
Thus we get two treemaps.
echartr(data1, c(node, parent), value, facet=series, type='treemap') %>%
setTitle('Smartphone Sales 2015 (Million)', pos=5)
Then you can configure the widgets, add markLines and/or markPoints, fortify the chart.
You can refer to related functions to play around on your own.