Delta

Delta is the starting point for exploring time and transitions in your visualization code.

##Getting Started You can create a new Delta tributary at:
http://enjalot.com/delta

Basic Example: http://enjalot.com/delta/2958511/
Try clicking the "Play" button, and then try the "BV" button. Then play with some of the variables at the top of the code to see the possibilities!

##Assumptions
The main assumption in Delta 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, Delta 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 (you must follow this structure for Delta to work):

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 (don't do d3.select("svg"), Delta'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" 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 wich 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(...)
}

An example which utilizes this can be found here: http://enjalot.com/delta/2958295/

###Useful built-ins You always have access to the tributary object within the scope of your code, this object has some useful functions and attributes:

tributary.loop = "period"; //sets the looping mode. other values are "off" and "pingpong"
tributary.duration = 3000; //time in milliseconds for the slider to go from one end to the other

tributary.ease = d3.ease("linear"); //see list of d3 easing functions linked above
tributary.n_clones = 10; //number of clones to use for BV button
tributary.clone_opacity = 0.4; //opacity of each clone


//same as basic tributary:
tributary.sw //current width of the svg element (always fills the window)
tributary.sh //current height of the svg element (always fills the window)
tributary.trace = true; //turns on the logging of error messages (off by default because every key-stroke can set off an error)

//datGUI (only supports numbers for now)
trib.x = 5; //adds x to the datGUI window
trib_options.x = { min: 0, max: 10 }; //sets the options for the datGUI slider

##List of Examples A gallery: http://newhive.com/enjalot/delta
basics: http://enjalot.com/delta/2958511/
pie arcs: http://enjalot.com/delta/2958485/
rotating about: http://enjalot.com/delta/3202512/
dancing dots: http://enjalot.com/delta/2958513/
text on path: http://enjalot.com/delta/2958295/
spinning squares: http://enjalot.com/delta/3107064/
moving pattern: http://enjalot.com/delta/3191074/