flubberized sunburst

• sunburst from R htmlwidget sunburstR
• using d3.js and flubber
• d3.js source tree from Mike Bostock block D3 Source Treemap
• assembled with blockbuilder.org

  ---

  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 el = this.el;
  var svg = d3.select(el).select('.sunburst-chart>svg');

  chart.on('click.tree', function(d) {
    svg.selectAll('.tree')
      .transition()
      .style('opacity', 0.001)
      .remove();

    // interpolate to rect
    var cloned = d3.select(event.target.cloneNode(true));
    cloned
      .classed('tree', true)
      .attr('transform', svg.select('g').attr('transform'));
    svg.node().appendChild(cloned.node());


    var interpolator = flubber.interpolate(
      d3.select(event.target).attr('d'),
      [[0,0],[0,100],[100,100],[100,0],[0,0]]
    );
    cloned
      .transition()
      .duration(1500)
      .attrTween('d', function(){ return interpolator; })
      .attr('transform', 'translate(0,0)');

    //interpolate rect to tree with separate
    var hier = d3.hierarchy(d3.select(event.target).datum())
      .sum(function(d) {return d.data.size});
    if(hier.children) {
      var tree = d3.treemap().size([100,100])(hier);
      tree.children.map(function(d) {
        svg.append('rect')
          .classed('tree', true)
          .attr('transform', 'translate(' + d.x0 + ',' + d.y0 + ')')
          .attr('width', d.x1 - d.x0)
          .attr('height', d.y1 - d.y0)
          .style('stroke', 'white')
          .style('fill','none')
          .style('opacity',0.00001)
          .transition()
          .delay(100)
          .style('opacity',1)
      });
    }
  })
}
"))



browsable(
  tagList(
    tags$head(tags$script(src="https://unpkg.com/flubber")),
    sb
  )
)