How do you animate axis transitions with d3 in r2d3?

Question

I'm trying to create a histogram using D3 which has nice animated transitions for both the bars and the axes. It's straightforward to get the bars working, but I'm struggling to see how to do the same thing with the axes. In the example below the transition looks like it is happening, but it's actually adding a new axis each time without removing the old one.

My ultimate goal is to do the development of widgets like this using R2D3 and then hand over the javascript to someone else to implement in an app in Java, so I need to make sure it is transferable and doesn't use R/shiny/R2D3 specific things in the javascript file.

This is the hist.js script

// !preview r2d3 data=data.frame(density = c(10,20,5), from = c(0, 1, 3), to = c(1, 3, 4))
//
// r2d3: https://rstudio.github.io/r2d3
//

var margin = {left:40, right:30, top:10, bottom:30, axis_offset:10};

var min_from = d3.min(data, function(d) {return d.from;});
var max_to = d3.max(data, function(d) {return d.to;});
var max_density = d3.max(data, function(d) { return d.density;});

svg.append('g')
  .attr('transform', 'translate('+(margin.left - margin.axis_offset)+', 0)')
  .attr("class", "y_axis");

svg.append('g')
  .attr('transform', 'translate(0, '+(height - margin.bottom + margin.axis_offset)+')')
  .attr("class", "x_axis");

var x = d3.scaleLinear()
  .domain([min_from, max_to])
  .range([margin.left, width-margin.right])
  .nice();

var y = d3.scaleLinear()
  .domain([0, max_density])
  .range([height-margin.bottom, margin.top])
  .nice();

svg.selectAll('.y_axis')
  .transition()
  .duration(500)
  .call(d3.axisLeft(y));

svg.selectAll('.x_axis')
  .transition()
  .duration(500)
  .call(d3.axisBottom(x));

var bars = svg.selectAll('rect').data(data);

bars.enter().append('rect')
  .attr('x', function(d) { return x(d.from); })
  .attr('width', function(d) { return x(d.to) - x(d.from)-1;})
  .attr('y', function(d) { return y(d.density); })
  .attr('height', function(d) { return y(0) - y(d.density); })
  .attr('fill', 'steelblue');

bars.exit().remove();

bars.transition()
  .duration(500)
  .attr('x', function(d) { return x(d.from); })
  .attr('width', function(d) { return x(d.to) - x(d.from)-1;})
  .attr('y', function(d) { return y(d.density); })
  .attr('height', function(d) { return y(0) - y(d.density); });

and this is my shiny app which runs it

library(shiny)
library(r2d3)
library(data.table)
library(jsonlite)

get_hist <- function(x) {
  buckets <- seq(0, mean(x)+3*sd(x), length.out = 21)
  h <- hist(x, breaks = c(buckets, Inf), plot = FALSE)
  y <- data.table(count = h$counts, from = head(h$breaks, -1), to = head(shift(h$breaks, -1), -1))[-.N]
  y[, density := count/(to-from)]
  y[]
}

new_data <- function() {
  sh <- 1
  rgamma(10, sh, 1/sh)
}

ui <- fluidPage(
  actionButton("add_data", "Add more data"),
  d3Output('d3_hist')
)

server <- function(input, output, session) {
  samp <- reactiveVal(new_data())
  observeEvent(input$add_data, {
    samp(c(samp(), new_data()))
  })
  output$d3_hist <- renderD3({
    y <- get_hist(samp())
    r2d3(data = toJSON(y), script = 'hist.js')
  })
}

shinyApp(ui, server)

user_7106086 · Answer

Every time you update the data, you create a new g element for each axis. This creates multiple g elements with the class x_axis / y_axis, all of which you call the axis generators on:

 svg.append('g') // append a new g every update for x axis
    .attr('transform', 'translate(0, '+(height - margin.bottom + margin.axis_offset)+')')
    .attr("class", "x_axis");    

svg.selectAll('.x_axis')  // call axis generator for every x axis g.
 .transition()
 .duration(500)
 .call(d3.axisBottom(x));

The setup with r2d3 is a bit different in that usually you'd create a single g for each axis and then use an update function to update the data and the axes. Here the entire javascript script runs every time, so we need to avoid appending a g for each axis once we have one:

For example:

  if(svg.select(".y_axis").empty()) {
    svg.append('g')
       .attr('transform', 'translate('+(margin.left - margin.axis_offset)+', 0)')
       .attr("class", "y_axis");
  }
  if(svg.select(".x_axis").empty()) {
     svg.append('g')
        .attr('transform', 'translate(0, '+(height - margin.bottom + margin.axis_offset)+')')
        .attr("class", "x_axis");    
  }

There are different approaches that could be taken here in the javascript, but this is probably the most straight forward. Ideally r2d3 would more easily allow you run an update function rather than the entire script every update.

How do you animate axis transitions with d3 in r2d3?

1 Answers