Issues with generating real time line graphs

Question

I am trying to generate a real time line graph using the tutorials

http://www.janwillemtulp.com/2011/04/01/tutorial-line-chart-in-d3/ & http://bost.ocks.org/mike/path/

The first path works fine I get a svg line graph. Now when I do

data.push(random());

// pop the old data point off the front data.shift();

// transition the line path.transition().attr("d", line);

It doesn't work what could be the reason. The whole code is

        var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 1];
        var w = 400,
        h = 200,
        margin = 20,
        y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),
        x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])  

        var vis = d3.select("body")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h)

        var g = vis.append("svg:g")
                .attr("transform", "translate(0, 200)");    

        var line = d3.svg.line()
            .x(function(d,i) { return x(i); })
            .y(function(d) { return -1 * y(d); })       

        g.append("svg:path").attr("d", line(data));

        g.append("svg:line")
                .attr("x1", x(0))
                .attr("y1", -1 * y(0))
                .attr("x2", x(w))
                .attr("y2", -1 * y(0))

        g.append("svg:line")
                .attr("x1", x(0))
                .attr("y1", -1 * y(0))
                .attr("x2", x(0))
                .attr("y2", -1 * y(d3.max(data)))

        g.selectAll(".xLabel")
        .data(x.ticks(5))
        .enter().append("svg:text")
        .attr("class", "xLabel")
        .text(String)
        .attr("x", function(d) { return x(d) })
        .attr("y", 0)
        .attr("text-anchor", "middle")

        g.selectAll(".yLabel")
                .data(y.ticks(4))
                .enter().append("svg:text")
                .attr("class", "yLabel")
                .text(String)
                .attr("x", 0)
                .attr("y", function(d) { return -1 * y(d) })
                .attr("text-anchor", "right")
                .attr("dy", 4)

        g.selectAll(".xTicks")
        .data(x.ticks(5))
        .enter().append("svg:line")
        .attr("class", "xTicks")
        .attr("x1", function(d) { return x(d); })
        .attr("y1", -1 * y(0))
        .attr("x2", function(d) { return x(d); })
        .attr("y2", -1 * y(-0.3))

        g.selectAll(".yTicks")
                .data(y.ticks(4))
                .enter().append("svg:line")
                .attr("class", "yTicks")
                .attr("y1", function(d) { return -1 * y(d); })
                .attr("x1", x(-0.3))
                .attr("y2", function(d) { return -1 * y(d); })
                .attr("x2", x(0))

        setInterval(function() {
            data.push(10);
            data.shift();
            g.attr("d", line)
                .attr("transform", null)
                  .transition()
                    .ease("linear")
                    .attr("transform", "translate(" + x(-1) + ")");
            alert('yaho1');
        }, 2000);
    });

After updating the code with this new one

var data = [1, 2, 3, 4, 3, 4, 5, 8, 2, 3, 4, 10];
            var w = 400,
            h = 200,
            margin = 20,
            y = d3.scale.linear().domain([0, 10]).range([0 + margin, h - margin]),
            x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])  

            var vis = d3.select("body")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)

            var g = vis.append("svg:g")
                    .attr("transform", "translate(0, 200)");    

            var line = d3.svg.line()
                .x(function(d,i) { return x(i); })
                .y(function(d) { return -1 * y(d); })       

            g.append("svg:path").attr("d", line(data));

            g.append("svg:line")
                    .attr("x1", x(0))
                    .attr("y1", -1 * y(0))
                    .attr("x2", x(w))
                    .attr("y2", -1 * y(0))

            g.append("svg:line")
                    .attr("x1", x(0))
                    .attr("y1", -1 * y(0))
                    .attr("x2", x(0))
                    .attr("y2", -1 * y(d3.max(data)))

            g.selectAll(".xLabel")
            .data(x.ticks(5))
            .enter().append("svg:text")
            .attr("class", "xLabel")
            .text(String)
            .attr("x", function(d) { return x(d) })
            .attr("y", 0)
            .attr("text-anchor", "middle")

            g.selectAll(".yLabel")
                    .data(y.ticks(4))
                    .enter().append("svg:text")
                    .attr("class", "yLabel")
                    .text(String)
                    .attr("x", 0)
                    .attr("y", function(d) { return -1 * y(d) })
                    .attr("text-anchor", "right")
                    .attr("dy", 4)

            g.selectAll(".xTicks")
            .data(x.ticks(5))
            .enter().append("svg:line")
            .attr("class", "xTicks")
            .attr("x1", function(d) { return x(d); })
            .attr("y1", -1 * y(0))
            .attr("x2", function(d) { return x(d); })
            .attr("y2", -1 * y(-0.3))

            g.selectAll(".yTicks")
                    .data(y.ticks(4))
                    .enter().append("svg:line")
                    .attr("class", "yTicks")
                    .attr("y1", function(d) { return -1 * y(d); })
                    .attr("x1", x(-0.3))
                    .attr("y2", function(d) { return -1 * y(d); })
                    .attr("x2", x(0))

            setInterval(function() {
                    var number = Math.round(Math.random()*10) + 1;
                    data.push(number);
                    data.shift();
                    g.selectAll("path")
                    .attr("d", line(data))  // <-- line(data) instead of data
                    .attr("transform", null)
                        .transition()
                            .ease("linear")
                            .attr("transform", "translate(" + x(-1) + ")");
            },
            200);

I get the behavior almost similar as I want.However, I have some issues

As you can see when I randomly generate a new data and push it and pop the one at the front. And I draw the graphics, the line crosses the boundary that is the y axis at the left side. What is going wrong in the code? How can I fix this?

Answer 1

You have an error in your interval's .attr("d", ___ ) assignement. You need to specify some data the d3 line function can work on.

Try this:

setInterval(function() {
    data.push(10);
    data.shift();
    g.selectAll("path")
    .attr("d", line(data))  // <-- line(data) instead of data
    .attr("transform", null)
      .transition()
        .ease("linear")
        .attr("transform", "translate(" + x(-1) + ")");
},
2000);

I just tried your code with this fix and it worked.