Real time d3

No style but works fine.

HTML

<link rel="stylesheet" href="http://bost.ocks.org/mike/style.css?20120427">
<body>
    <h4>Asif's Chart (insert cool emoji)</h4>	
</body>

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: auto;
    }
	
    .line {
        fill: none;
        stroke: green;
        stroke-width: 1px;
    }

JavaScript

var t = -1;
    var n = 40;
    var v = 0;
    var data = d3.range(n).map(next);
	
    function next () {
        return {
            time: ++t,
            value: v = Math.floor(Math.random()*20)
        };
    }	
	 
    var margin = {top: 10, right: 10, bottom: 20, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
	 
    var x = d3.scale.linear()
        .domain([0, n - 1])
        .range([0, width]);
	 
    var y = d3.scale.linear()
        .domain([0, 20])
        .range([height, 0]);
	 
    var line = d3.svg.line()
        .x(function(d, i) { console.log(d.time); return x(d.time); })
        .y(function(d, i) { return y(d.value); });
		 
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
	
    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		
    var graph = g.append("svg")
        .attr("width", width)
        .attr("height", height + margin.top + margin.bottom);	
	 
    var xAxis = d3.svg.axis().scale(x).orient("bottom");
    var axis = graph.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(x.axis=xAxis);
	 
    g.append("g")
        .attr("class", "y axis")
        .call(d3.svg.axis().scale(y).orient("left"));

	var path = graph.append("g")
		.append("path")
		.data([data])
		.attr("class", "line")
		//.attr("d", line);
		
    tick();
		 
    function tick() 
	{ 
        // push a new data point onto the back
        data.push(next());

        // update domain
        x.domain([t - n, t]);
	
        // redraw path, shift path left
        graph.select(".line")
            .attr("d", line)
            .attr("transform", null)
            
        path.transition()
            .duration(500)
            .ease("linear")
            .attr("transform",...