Realtime Line Chart with D3

d3_realtime_linechart.html

<style>

.axis {
	font-family: sans-serif;
	fill: #d35400;
	font-size: 12px;
}

.line {
	fill: none;
	stroke: #f1c40f;
	stroke-width: 3px;
}

.smoothLine {
	fill: none;
	stroke: #e74c3c;
	stroke-width: 3px;
}

.area {
	fill: #e74c3c;
	opacity: 0.5;
}

.circle {
	stroke: #e74c3c;
	stroke-width: 3px;
	fill: #FFF;
}

.grid {
	stroke: #DDD;
	stroke-width: 1px;
	fill: none;
}
</style>
<svg id="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [
];

var width = 500;
var height = 500;
var globalX = 0;

var duration = 500;
var max = 500;
var step = 10;

var chart = d3.select('#chart')
.attr('width', width + 50)
.attr('height', height + 50);

var x = d3.scale.linear().domain([0, 500]).range([0, 500]);
var y = d3.scale.linear().domain([0, 500]).range([500, 0]);

// -----------------------------------

var line = d3.svg.line()
					.x(function(d){ return x(d.x); })
					.y(function(d){ return y(d.y); });

var smoothLine = d3.svg.line().interpolate('cardinal')
					.x(function(d){ return x(d.x); })
					.y(function(d){ return y(d.y); });


var lineArea = d3.svg.area()
					.x(function(d){ return x(d.x); })
					.y0(y(0))
					.y1(function(d){ return y(d.y); })
					.interpolate('cardinal');

// -----------------------------------

// Draw the axis
var xAxis = d3.svg.axis().scale(x).orient('bottom');

var axisX = chart.append('g').attr('class', 'x axis')
			 .attr('transform', 'translate(0, 500)')
			 .call(xAxis);

// Draw the grid
chart.append('path').datum([{x: 0, y: 150}, {x: 500, y: 150}])
					.attr('class', 'grid')
					.attr('d', line);
chart.append('path').datum([{x: 0, y: 300}, {x: 500, y: 300}])
					.attr('class', 'grid')
					.attr('d', line);
chart.append('path').datum([{x: 0, y: 450}, {x: 500, y: 450}])
					.attr('class', 'grid')
					.attr('d', line);
chart.append('path').datum([{x: 50, y: 0}, {x: 50, y: 500}])
					.attr('class', 'grid')
					.attr('d', line);
chart.append('path').datum([{x: 250, y: 0}, {x: 250, y: 500}])
					.attr('class', 'grid')
					.attr('d', line);
chart.append('path').datum([{x: 450, y: 0}, {x: 450, y: 500}])
					.attr('class', 'grid')
					.attr('d', line);

// Append the holder for line chart and fill area
var path = chart.append('path');
var areaPath = chart.append('path');

// Main loop
function tick() {
	// Generate new data
	var point = {
	    x: globalX,
	    y: ((Math.random() * 450 + 50) >> 0)
	};

	data.push(point);
	globalX += step;

	// Draw new line
 	path.datum(data)
 		.attr('class', 'smoothline')
 		.attr('d', smoothLine);
	// Draw new fill area
	areaPath.datum(data)
 		.attr('class', 'area')
 		.attr('d', lineArea);

	// Shift the chart left
	x.domain([globalX - (max - step), globalX]);

	axisX.transition()
		 .duration(duration)
		 .ease('linear')
		 .call(xAxis);

	path.attr('transform', null)
		.transition()
		.duration(duration)
		.ease('linear')
		.attr('transform', 'translate(' + x(globalX - max) + ')')

	areaPath.attr('transform', null)
		.transition()
		.duration(duration)
		.ease('linear')
		.attr('transform', 'translate(' + x(globalX - max) + ')')
		.each('end', tick)

	// Remote old data (max 50 points)
	if (data.length > 50) data.shift();
}

tick();

</script>

Cool, I like it!

I've added fork for d3 v4.