Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/.block

Last active June 19, 2018 18:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/be8412a07b00de20e725e3757605c63f to your computer and use it in GitHub Desktop.
Save timelyportfolio/be8412a07b00de20e725e3757605c63f to your computer and use it in GitHub Desktop.
Download ZIP
vue d2b sunburst from R
Raw
.block
license: mit
Raw
README.md

New Sunburst in Town

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!!

Code

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

Thanks to the d2b author Kevin Warne for this fine piece of craftmanship and his pleasant responsiveness (see issue).

Raw
index.html
<!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>
@Dekermanjian
Copy link

Is there a way to sort the arcs by size? I have tried
var root = d3.hierarchy(root)
.sum(function (d) { return d.size; })
.sort(function (a,b){console.log(a); return b.size - a.size;});
but that didn't work for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment