There is a nue sunburst in town, and it is absolutely beautiful. The new charting library d2b provides us with this delightful sunburst. d2b also plays nicely with vuejs, so of course we will use that version in this quick example from R.
look at that breadcrumb! - it’s a separate component for use anywhere
check out resize - dang!!
jump in the console and change the data - pop!!
library(vueR)
library(d3r)
library(treemap)
library(htmltools)
hier_dat <- treemap::random.hierarchical.data()
hier_json <- d3r::d3_nest(
hier_dat,
value_cols = "x"
)
library(dplyr)
hier_json <- hier_dat %>%
treemap(index = c("index1", "index2", "index3"), vSize = "x") %>%
{.$tm} %>%
select(index1:index3,vSize, color) %>%
rename(size = vSize) %>%
d3_nest(value_cols = c("size", "color"))
browsable(tagList(
html_dependency_vue(),
tags$script(src = "https://unpkg.com/d3"),
tags$script(src = "https://unpkg.com/d2b@0.5.1/build/d2b.js"),
tags$script(src = "https://unpkg.com/vue-d2b"),
tags$div(
id = "app",
style = "height:400px",
tag(
"sunburst-chart",
list(":data" = "sunburstChartData", ":config" = "sunburstChartConfig")
)),
tags$script(HTML(
sprintf(
"
var app = new Vue({
el: '#app',
components: {
'sunburst-chart': vued2b.ChartSunburst
},
data: {
sunburstChartData: %s,
sunburstChartConfig: function(chart) {
var color = d3.scaleOrdinal(d3.schemeCategory20c);
chart.label(function(d){return d.name});
//chart.sunburst().size(function(d){return d.x});
//chart.color(function(d){return color(d.name);})
chart.color(function(d){return typeof(d.color) === 'undefined' ? '#BBB' : d.color; })
}
}
})
",
hier_json
)
))
))Thanks to the d2b author Kevin Warne for this fine piece of craftmanship and his pleasant responsiveness (see issue).
<!DOCTYPE html>
<html>
<head>
<p><meta charset="utf-8" /></p>
</head>
<body style="background-color:white;">
<script src = "https://unpkg.com/vue"></script>
<script src = "https://unpkg.com/d3"></script>
<script src = "https://unpkg.com/d2b@0.5.1/build/d2b.js"></script>
<script src = "https://unpkg.com/vue-d2b"></script>
<div id="app" style="height:400px">
<sunburst-chart :data="sunburstChartData" :config="sunburstChartConfig"></sunburst-chart>
</div>
<script>
var app = new Vue({
el: '#app',
components: {
'sunburst-chart': vued2b.ChartSunburst
},
data: {
sunburstChartData: {"children":[{"name":"A","children":[{"name":"A.1","children":[{"name":"A.1.a","size":0.6549,"color":"#9E6F00","colname":"index3"},{"name":"A.1.b","size":0.7817,"color":"#9A7000","colname":"index3"},{"name":"A.1.c","size":2.4955,"color":"#9C7000","colname":"index3"}],"size":3.932,"color":"#B58A2F","colname":"index2"},{"name":"A.2","children":[],"size":0.6041,"color":"#9D930E","colname":"index2"},{"name":"A.3","children":[{"name":"A.3.a","size":1.8818,"color":"#917500","colname":"index3"}],"size":1.8818,"color":"#AA8F1C","colname":"index2"},{"name":"A.4","children":[{"name":"A.4.a","size":0.6157,"color":"#747E00","colname":"index3"},{"name":"A.4.b","size":1.4473,"color":"#787D00","colname":"index3"}],"size":2.063,"color":"#8F9712","colname":"index2"}],"size":8.4809,"color":"#BDAC51","colname":"index1"},{"name":"B","children":[{"name":"B.1","children":[{"name":"B.1.a","size":2.0826,"color":"#6D6EC3","colname":"index3"},{"name":"B.1.b","size":0.9877,"color":"#776CC2","colname":"index3"},{"name":"B.1.c","size":1.3075,"color":"#726DC2","colname":"index3"},{"name":"B.1.d","size":2.666,"color":"#7B6AC2","colname":"index3"}],"size":7.0438,"color":"#8F87D7","colname":"index2"},{"name":"B.2","children":[{"name":"B.2.a","size":0.6,"color":"#007EBC","colname":"index3"},{"name":"B.2.b","size":0.7545,"color":"#0081B9","colname":"index3"},{"name":"B.2.c","size":1.8786,"color":"#0080BB","colname":"index3"}],"size":3.233,"color":"#3F98D0","colname":"index2"},{"name":"B.3","children":[{"name":"B.3.a","size":1.4512,"color":"#4478C0","colname":"index3"},{"name":"B.3.b","size":0.7881,"color":"#5375C1","colname":"index3"}],"size":2.2393,"color":"#6E90D6","colname":"index2"}],"size":12.5161,"color":"#8FAAEB","colname":"index1"},{"name":"C","children":[{"name":"C.1","children":[{"name":"C.1.a","size":0.8251,"color":"#008F5B","colname":"index3"},{"name":"C.1.b","size":1.6427,"color":"#009072","colname":"index3"},{"name":"C.1.c","size":0.5839,"color":"#008F67","colname":"index3"}],"size":3.0517,"color":"#00A883","colname":"index2"}],"size":3.0517,"color":"#00C19F","colname":"index1"},{"name":"D","children":[{"name":"D.1","children":[],"size":2.2862,"color":"#D47484","colname":"index2"},{"name":"D.2","children":[{"name":"D.2.a","size":0.1354,"color":"#BE4F89","colname":"index3"},{"name":"D.2.b","size":0.7189,"color":"#BE4F8D","colname":"index3"},{"name":"D.2.c","size":0.4149,"color":"#BE4F8B","colname":"index3"}],"size":1.2692,"color":"#D56FA3","colname":"index2"},{"name":"D.3","children":[{"name":"D.3.a","size":1.137,"color":"#BE5278","colname":"index3"},{"name":"D.3.b","size":0.3727,"color":"#BE5374","colname":"index3"},{"name":"D.3.c","size":0.8535,"color":"#BE5376","colname":"index3"}],"size":2.3632,"color":"#D6718F","colname":"index2"},{"name":"D.4","children":[{"name":"D.4.a","size":0.0414,"color":"#BD4E93","colname":"index3"},{"name":"D.4.b","size":1.748,"color":"#BD4E95","colname":"index3"},{"name":"D.4.c","size":3.7332,"color":"#BD4E94","colname":"index3"},{"name":"D.4.d","size":2.7943,"color":"#BC4E96","colname":"index3"}],"size":8.3168,"color":"#D36EAB","colname":"index2"},{"name":"D.5","children":[{"name":"D.5.a","size":6.9461,"color":"#BF5083","colname":"index3"},{"name":"D.5.b","size":0.3021,"color":"#BF5180","colname":"index3"},{"name":"D.5.c","size":1.8102,"color":"#BF5082","colname":"index3"},{"name":"D.5.d","size":0.6993,"color":"#BF517F","colname":"index3"},{"name":"D.5.e","size":0.1455,"color":"#BF5081","colname":"index3"},{"name":"D.5.f","size":1.1521,"color":"#BE517E","colname":"index3"}],"size":11.0553,"color":"#D67099","colname":"index2"},{"name":"D.6","children":[{"name":"D.6.a","size":1.5627,"color":"#BB4E9C","colname":"index3"},{"name":"D.6.b","size":1.9761,"color":"#BA4F9F","colname":"index3"},{"name":"D.6.c","size":0.3567,"color":"#BA4E9D","colname":"index3"},{"name":"D.6.d","size":2.78,"color":"#B94FA0","colname":"index3"}],"size":6.6756,"color":"#D06FB4","colname":"index2"}],"size":31.9664,"color":"#ED8EB7","colname":"index1"}],"name":"root"},
sunburstChartConfig: function(chart) {
var color = d3.scaleOrdinal(d3.schemeCategory20c);
chart.label(function(d){return d.name});
//chart.sunburst().size(function(d){return d.x});
//chart.color(function(d){return color(d.name);})
chart.color(function(d){return typeof(d.color) === 'undefined' ? '#BBB' : d.color; })
}
}
})
</script>
</body>
</html>