Real time d3

No style but works fine.

HTML

<link rel="stylesheet" href="http://bost.ocks.org/mike/style.css?20120427">

CSS

body {
        font-family: Verdana, sans-serif;
        font-size: 8pt;
        line-height: 12pt;
        background: #ffffff;
        color: #555555;
    }
    
     .axis path, .axis line {
        fill: none;
        stroke: #555555;
        shape-rendering: crispEdges;
    }
	
    .line {
        fill: steelblue;
        stroke: orange;
        stroke-width: 2px;
    }

JavaScript

var t = -1
    var n = 40,
        duration = 750
        data = d3.range(n).map(next);

    function next(){
        return {time: ++t, value: Math.random()*10}
    }

    var margin = {
        top: 6,
        right: 0,
        bottom: 20,
        left: 40
    },
    width = 100,
        height = 120 - margin.top - margin.bottom;

    var x = d3.scale.linear()
        .domain([t-n+1, t])
        .range([0, width]);

    var y = d3.time.scale()
        .range([height, 0])
        .domain([0, 10]);;

    var line = d3.svg.area()
        .interpolate("basis")
        .x(function (d, i) {return x(d.time);})
        .y0(height)
        .y1(function (d, i) {return y(d.value);});

    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 xAxis = d3.svg.axis().scale(x).orient("bottom");
    var axis = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(x.axis=xAxis);

    var path = svg.append("g")
        .attr("clip-path", "url(#clip)")
        .append("path")
        .data([data])
        .attr("class", "line");

    tick();

    function tick() {

        // update the domains
        x.domain([t - n + 2 , t]);
        
        // push the accumulated count onto the back, and reset the count
        data.push(next());

        // redraw the line
        svg.select(".line")
            .attr("d", line)
            .attr("transform", null);

        // slide the x-axis left
        axis.transition()
            .duration(duration)
            .ease("linear")
         ...