-
-
Save bjorngi/00be6a13e1bede83cbef to your computer and use it in GitHub Desktop.
(function() { | |
var n = 243, | |
duration = 750, | |
now = new Date(Date.now() - duration), | |
count = 0, | |
data = d3.range(n).map(function() { return 0; }); | |
var margin = {top: 6, right: 0, bottom: 20, left: 40}, | |
width = 960 - margin.right, | |
height = 120 - margin.top - margin.bottom; | |
var x = d3.time.scale() | |
.domain([now - (n - 2) * duration, now - duration]) | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var line = d3.svg.line() | |
.interpolate("basis") | |
.x(function(d, i) { return x(now - (n - 1 - i) * duration); }) | |
.y(function(d, i) { return y(d); }); | |
var svg = d3.select("body").append("p").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.style("margin-left", -margin.left + "px") | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("defs").append("clipPath") | |
.attr("id", "clip") | |
.append("rect") | |
.attr("width", width) | |
.attr("height", height); | |
var axis = svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(x.axis = d3.svg.axis().scale(x).orient("bottom")); | |
var path = svg.append("g") | |
.attr("clip-path", "url(#clip)") | |
.append("path") | |
.datum(data) | |
.attr("class", "line"); | |
var transition = d3.select({}).transition() | |
.duration(750) | |
.ease("linear"); | |
d3.select(window) | |
.on("scroll", function() { ++count; }); | |
(function tick() { | |
transition = transition.each(function() { | |
// update the domains | |
now = new Date(); | |
x.domain([now - (n - 2) * duration, now - duration]); | |
y.domain([0, d3.max(data)]); | |
// push the accumulated count onto the back, and reset the count | |
data.push(Math.min(30, count)); | |
count = 0; | |
// redraw the line | |
svg.select(".line") | |
.attr("d", line) | |
.attr("transform", null); | |
// slide the x-axis left | |
axis.call(x.axis); | |
// slide the line left | |
path.transition() | |
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")"); | |
// pop the old data point off the front | |
data.shift(); | |
}).transition().each("start", tick); | |
})(); |
There is a error in your code, i fixed it here: http://codepen.io/atticweb/pen/GZKvgv
I don't know how i can do a pull request in gist, so that's why i did it in codepen ;)
@Atticweb Try changing the line fill, in your code-pen example, you get some strange results.
Any ideas how to fix?
.line{
fill: #ff0;
stroke: #000;
}
doesn't work with v4 :(
I forked the code pen from @Atticweb and updated to v4. Everything seems to be working properly, but I'm a little unhappy with the transition of the axis text, it doesn't respect the easing (jumpy), but the ticks transition smoothly. Any ideas?
https://codepen.io/sampaioletti/pen/eREyQZ
I'm pretty new to d3, but wanted to use this same idea in a similar project that requires v4.
Hey guys, thanks for the code.
I am trying to connect this to a webocket. I thought I'll start with random values coming through a timer:
setInterval(function(){ tick(); }, 500);
as a start . Instead of the method used in the example:
.transition().each("start", tick);
But I can't get to run smoothly: See: https://codepen.io/dtroyz/pen/YYOvEN
Any idea what I am missing ? I've tried everything I could think of/find online.
Any help would be greatly appreciated !
For anyone out there wondering what the answer is about @daniel-cohen 's issue.
I think there is a default duration when using duration()
, so your code 'updates' every X ms, hence the jumpy behaviour.
Simply replace your code by .transition().duration(1).each("start",tick)
🚀
Last example in http://bost.ocks.org/mike/path/