Skip to content

Instantly share code, notes, and snippets.

@seliopou
Last active Oct 26, 2015
Embed
What would you like to do?
Tributary inlet
{"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"}
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);
};
});
svg {
font: 12px 'Helvetica';
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.function path {
fill: none;
stroke: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment