Plugins: Play

The Play plugin enables you to play with time.

#Usage When this plugin is instantiated, it adds Play, Loop and Restart buttons to the Config panel.
When a user enables them they will see some buttons and a slider control appear in the display area.

##Examples

• Simple SVG animation: http://tributary.io/inlet/5131097
• Canvas based animation: http://tributary.io/inlet/5105423

##Assumptions
The main assumption is that you want to explore transitions. If you try to do a transition in Tributary and then play with the variables in your code, you will notice that you can't see whats going on because the transition resets every time the code changes. To avoid this, the Play plugin provides you a way to structure your code so that the state of your transition is maintained. This just means that if the time slider at the top is half-way across, you will see the transition half-way completed as you change variables.
The structure is as follows

tributary.init = function(g) {
  //initialize things here
  g.append(...)
}
tributary.run = function(g, t) {
  //do time related code here
  g.selectAll(...)
}

The important things to note are the g and t variables.
g is where you want to append things to. Do not use d3.select("svg"), the plugin's assumptions won't work!. Delta sets up a group element for you to do all of your visualizing inside of, this is actually good practice in general when writing d3 code so might as well get used to it ;)

t is your time variable, it will be a number between 0 and 1, this is what happens internally in d3 transitions. t is set by the slider, so when you click Play and the slider moves, the run function will be called with the current value of the slider. The exception to this is if you set an easing function (see Useful built-ins), the slider will move from 0 to 1 linearly, but the value of t will be affected by the easing function.

###Bret Victor "clones" If you are using the SVG display context, when you click the BV button, you will notice that you can see the past, present and future of your transition. This is done by creating a group element for 10 slices in time and calling the run function with each distinct group at its time value. The number of clones and their opacity can be set with some built-ins described in the Useful built-ins section below.
You can have an optional i variable in the Delta structure:

tributary.init = function(g, i) {
  //initialize things here
  g.append(...)
  .style("fill", d3.scale.category20()(i)); //color by clone
}
tributary.run = function(g, t, i) {
  //do time related code here
  g.selectAll(...)
}

##Code Browse the code