replaceTransition

_.md

[ Launch: endTransition ] 4a75c47b7a5a87eade49 by radiodario
[ 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":"replaceTransition","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/kwwtVbD.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 = [];
  
function refreshData() {
  for (var i = 0; i < 25; i++) {
    data.push(2 + 10*Math.random())
  }
}

refreshData();

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

var zero = d3.svg.area()
  .x(function(d, i) {
    return xs(i);
  })
  .y0(height)
  .y1(height);

var line = d3.svg.area()
  .x(function(d, i) {
    return xs(i);
  })
  .y0(height)
  .y1(function(d, i) {
    return ys(d);
  });

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


  paths.enter()
    .append('path')
    .attr('stroke', 'lightblue')
    .attr('fill', 'steelblue')

function start() {
  refreshData();
  paths.data([data]);
  
  paths
    .attr('d', zero)
    .attr('opacity', 0)
    .transition()
    .duration(2047)
    .attr('opacity', 1)
    .attr('d', line)
    .each('end', exit);
}
  
function exit() {
  paths
    .attr('d', line)
    .attr('opacity', 1)
    .attr('stroke', 'lightblue')
    .attr('fill', 'steelblue')
    .transition()
    .duration(300)
    .attr('opacity', 0)
    .attr('d', zero)
    .each('end', start);
}

start()