Q:

d3.js dynamic time series like shifting effect

I am trying to achieve time series shifting effect with circles like in this classical example.
However, look at jsFiddle and see that I was not able to achieve a shifting effect. 
Instead, something seems to be wrong with the indexes of the dataset. Looks like indexes are stuck with their (should be previous) values!?
Can anyone help, pleas?
Here is the js code in the jsFiddle.
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <svg width="800" height="500"></svg>
    <script type="text/javascript">
        var x = d3.scale.linear()
            .domain([0, 1])
            .range([0, 800]);
        var data = [];
        setInterval(function(){
            if (data.length < 3) {
                data.push({value:Math.random(), date:new Date()});
            }
            else {
                data.shift();
                data.push({value:Math.random(), date:new Date()});
            }
            draw();
        }, 1000);
        function draw() {
            var svg = d3.select('svg');
            var circles = svg.selectAll('circle')
                    .data(data, function(d, i) { return d.value; });
            circles.attr('fill', 'orange');
            circles.exit()
                    .attr('fill', 'black')
                    .transition()
                    .duration(500)
                    .remove();
            circles.enter()
                    .append('circle')
                    .attr('fill', 'red')
                    .attr('r', 40)
                    .attr('cx', function(d, i) {
                        console.log("i: " + i);
                        return i*100 + 50;
                    })
                    .attr('cy', 50)
                    .transition()
                    .duration(500)
                    .attr('fill', 'blue');
            circles.style('stroke', 'black');
        }
    </script>
</body>

A:

The reason it isn't working in your example is because the new value is always enter()ing at index 2 and you don't have a .transition() for the circles, you just have transitions on exit and enter, which means that nothing will happen when the data changes (in this case, the index is updated). Here's a working jsfiddle of what I think you're trying to do. I changed your .shift() and .push()'s to .pop() and .unshift()'s to get the circles to move from left to right instead of right to left because it looked like that was what you were attempting. I also decreased the width of your svg so the exit()ing circle is no longer visible when .remove() is called on it.
NEW JSFIDDLE: jsfiddle
Here's the updated js code:
var data = [];

setInterval(function(){
    if (data.length < 3) {
        data.push(Math.random());
    }
    else {
        data.shift();
        data.push(Math.random());
    }
    draw();
}, 1000);

function draw() {
    var svg = d3.select('svg');
    var circles = svg.selectAll('circle')
            .data(data, function(d, i) { return d; });

    circles.attr('fill', 'orange');
    circles.style('stroke', 'black');

    circles.enter()
            .append('circle')
            .attr('fill', 'red')
            .style('stroke', 'black')
            .attr('r', 40)
            .attr('cy', 50)
            .attr('cx', function(d, i) { return (data.length)*100 + 50; })
        .transition()
            .duration(500)
            .attr('cx', function(d, i) { return i*100 + 50; });

    circles.exit()
            .attr('fill', 'black')
        .transition()
            .duration(500)
            .attr('cx', function(d, i) { return (i - 1)*100 + 50; })
            .remove();

    circles.transition()
            .duration(500)
            .attr('cx', function(d, i) { return i*100 + 50; });
}

