Tree Map 2D
The Tree Map 2D chart is similar to the Tree Map chart. In addition to a group attribute (quantitative value) and a metric (positive quantitative value), the Tree Map 2D allows a second group attribute to build its second dimension. An example of a Tree Map 2D chart is shown below.
The following code was used to render the above Tree Map 2D chart:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 | let provider = cf.provider("Elastic Demo");
let source = provider.source('chicago_taxi_trips');
// Define metrics
let metric0 = cf.Metric("count");
// Define attributes to group by
let group1 = cf.Attribute("community_areas")
.limit(10)
.sort("desc", cf.Metric());
let group2 = cf.Attribute("company")
.limit(10)
.sort("desc", cf.Metric());
// Add metrics and groups to data source
let myData = source.groupby(group1,group2)
.metrics(metric0);
// Define Color Palette
let color = cf.Color()
.palette(["#0095b7", "#a0b774", "#f4c658",
"#fe8b3e", "#cf2f23", "#756c56",
"#007896", "#47a694", "#f9a94b",
"#ff6b30", "#e94d29", "#005b76"]);
let myChart = myData.graph("Tree Map 2D")
.set("color", color)
.set("breadcrumbs", {
show: true,
left: 'center',
top: 'top',
itemStyle: {
borderColor: "rgba(4, 4, 4, 0.82)",
borderType: "solid",
color: "rgba(188, 3, 15, 1)",
borderWidth: 2,
textStyle: {
fontStyle: "italic",
fontFamily: "monospace",
fontSize: 13
}
}
})
.execute();
|
Breadcrumbs
As can be seen in the previous code, it is possible to configure the breadcrumbs as specified in the Breadcrumbs section of the Tree Map.