Skip to content

Instantly share code, notes, and snippets.

@bjorngi bjorngi/source.js
Last active Jan 16, 2018

Embed
What would you like to do?
Moving xAxis along with line
(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);
})();
@bjorngi

This comment has been minimized.

Copy link
Owner Author

commented Dec 9, 2015

@Atticweb

This comment has been minimized.

Copy link

commented Feb 26, 2016

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 ;)

@CharlesOkwuagwu

This comment has been minimized.

Copy link

commented Jun 3, 2016

@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;
}

@maslick

This comment has been minimized.

Copy link

commented Apr 27, 2017

doesn't work with v4 :(

@sampaioletti

This comment has been minimized.

Copy link

commented Jun 23, 2017

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.

@daniel-cohen

This comment has been minimized.

Copy link

commented Jan 16, 2018

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 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.