d3 v4 realtime line chart

.block

license: mit

README.md

Built with blockbuilder.org

index.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.v4.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.scaleLinear().domain([0, 500]).range([0, 500]);
    var y = d3.scaleLinear().domain([0, 500]).range([500, 0]);
    // -----------------------------------
    var line = d3.line()
					    .x(function(d){ return x(d.x); })
					    .y(function(d){ return y(d.y); });
    var smoothLine = d3.line().curve(d3.curveCardinal)
					    .x(function(d){ return x(d.x); })
					    .y(function(d){ return y(d.y); });
    var lineArea = d3.area()
					    .x(function(d){ return x(d.x); })
					    .y0(y(0))
					    .y1(function(d){ return y(d.y); })
					    .curve(d3.curveCardinal);
    // -----------------------------------
    // Draw the axis
    var xAxis = d3.axisBottom().scale(x);
    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(d3.easeLinear,2)
		     .call(xAxis);
	    path.attr('transform', null)
		    .transition()
		    .duration(duration)
		    .ease(d3.easeLinear,2)
		    .attr('transform', 'translate(' + x(globalX - max) + ')')
	    areaPath.attr('transform', null)
		    .transition()
		    .duration(duration)
		    .ease(d3.easeLinear,2)
		    .attr('transform', 'translate(' + x(globalX - max) + ')')
		    .on('end', tick)
	    // Remote old data (max 50 points)
	    if (data.length > 50) data.shift();
    }
    tick();
</script>