Tributary inlet

_.md

[ Launch: Tributary inlet ] 779ac8390111bed1b5d2 by seliopou

config.json

{"description":"Tributary inlet","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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/7HWltym.png"}

inlet.js

var svg = d3.select('svg')
  .append('g')
  .attr('transform', 'translate(20, 20)')

var ts = d3.range(0, 1, 0.02);

var xscale = d3.scale.linear().domain([0, 1]).range([0, 200]),
    yscale = d3.scale.linear().domain([0, 1]).range([150, 0]);

var xaxis = d3.svg.axis()
  .orient('bottom')
  .ticks([])
  .scale(xscale);

var yaxis = d3.svg.axis()
  .orient('left')
  .ticks([])
  .tickValues([0, 0.5, 1])
  .scale(yscale);

function io_cubic(t) {
  var ts = t * t,
      tc = ts * t;
  return Math.min(-2*tc + 3 * ts, 1);
}

function io_quintic(t) {
  var ts = t * t,
      tc = ts * t;
  return 6*tc*ts + -15*ts*ts + 10*tc;
}

function oi_cubic(t) {
  var ts = t * t,
      tc = ts * t;
  return Math.min((2*tc*ts + -5*ts*ts + 8*tc + -7*ts + 3*t), 1);
}

function oi_custom(t) {
  var ts = t * t,
      tc = ts * t;
  return Math.min(2*tc*ts + -5*ts*ts + 8*tc + -7*ts + 3*t, 1);
}

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(10, 150)')
  .call(xaxis);

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(10, 0)')
  .call(yaxis);

var path = svg.append('g')
    .attr('class', 'function')
    .attr('transform', 'translate(10, 0)')
  .append('path')
    .datum(ts);

path
  .transition()
    .duration(1500)
    .ease(oi_custom)
    .attrTween('d', function(d, i, a) {
      return function(t) {
        return d3.svg.line()
        .x(function(d) { return xscale(d); })
        .y(function(d) { return t < 0.5 ? yscale(t * (1 - io_quintic(d))) : yscale(t + (1 - t) * io_quintic(d)); })
        .interpolate('linear')(d);
      };
    });

style.css

svg {
  font: 12px 'Helvetica';
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.function path {
 fill: none;
 stroke: black;
}