All examples By author By category About

timelyportfolio

flubberized sunburst to icicle (faster)


spinoff of timelyportfolio's block: flubberized US states to/from hex
This is a combination of quite a few numerous generous open-source contributions. Thanks especially to [Mike Bostock](https://bost.ocks.org/mike/) and [Noah Veltman](https://noahveltman.com/).

Code in R

library(sunburstR)
library(htmltools)

# d3 source tree from Mike Bostock
# https://gist.githubusercontent.com/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec/
d3_src <- read.csv(
  "https://gist.githubusercontent.com/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec/raw/122aa364ef1b0134455654f446e15dbfd1c95f86/d3.csv",
  stringsAsFactors = FALSE
)

d3_tree <- sunburstR:::csv_to_hier(
  d3_src[,2:1],
  delim = "/"
)

sb <- sunburst(d3_tree, withD3 = TRUE)
sb$x$tasks <- list(htmlwidgets::JS("
function(){
  var chart = this.instance.chart;
  var data = this.instance.json;
  var el = this.el;
  var svg = d3.select(el).select('.sunburst-chart>svg');

  var btn = d3.select('#convert-btn')
  btn.on('click.tree', function() {
    var paths = svg.selectAll('path');
    paths.each(function(d,i) {
    debugger
      var interpolate = flubber.interpolate(
        d3.select(this).attr('d'),
        [
          [d.x0*90, Math.pow(d.y0,1/2)],
          [d.x0*90, Math.pow(d.y1,1/2)],
          [d.x1*90, Math.pow(d.y1,1/2)],
          [d.x1*90, Math.pow(d.y0,1/2)],
          [d.x0*90, Math.pow(d.y0,1/2)]
        ]
      );
      d3.select(this)
        .transition()
        .delay(i * 20)
        .duration(200)
        .attr('transform','translate(-400,-200)')
        .attrTween('d', function(d) {return interpolate});
    })
  })
}
"))



browsable(
  tagList(
    tags$head(tags$script(src="https://unpkg.com/flubber")),
    tags$button(id='convert-btn',"icicl-ize"),
    sb
  )
)

forked from timelyportfolio's block: flubberized sunburst

forked from timelyportfolio's block: flubberized sunburst to icicle