Skip to content

Instantly share code, notes, and snippets.

@ZoeLeBlanc

ZoeLeBlanc/.block

Created September 10, 2018 12:33
Show Gist options
  • Save ZoeLeBlanc/d0b5b20aed7184606fd78a98b894366c to your computer and use it in GitHub Desktop.
Save ZoeLeBlanc/d0b5b20aed7184606fd78a98b894366c 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).

forked from timelyportfolio's block: vue d2b sunburst from R

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment