endTransition

_.md

[ Launch: startTransition ] 3736f1631ff1fe10e9e9 by radiodario
[ Launch: startTransition ] 8e3b067bc3fcfa478861 by radiodario
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"endTransition","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/q8xe85U.gif","fullscreen":false,"ajax-caching":true,"inline-console":true}

inlet.js

var svg = d3.select("svg");

var height = tributary.sh;
var width = tributary.sw;

var data = [
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random(),
  10*Math.random()
];
  
var xs = d3.scale.linear()
  .domain([0, data.length])
  .range([0, width]);
 
var ys = d3.scale.linear()
.domain([0, 10])
.range([height, 0]);

var zero = d3.svg.line()
  .x(function(d, i) {
    return xs(i);
  })
  .y(function(d, i) {
    return height;
  });

var line = d3.svg.line()
  .x(function(d, i) {
    return xs(i);
  })
  .y(function(d, i) {
    return ys(d);
  });

var paths = svg.selectAll('path')
  .data([data]);


  paths.enter()
    .append('path')

function transition() {
  paths
    .attr('d', line)
    .attr('opacity', 1)
    .attr('stroke', 'steelblue')
    .attr('fill', 'none')
    .transition()
    .duration(2047)
    .attr('opacity', 0)
    .attr('d', zero)
    .each('end', transition);
}

transition()