Skip to content

Instantly share code, notes, and snippets.

@huytd
Created November 6, 2015 01:11
Show Gist options
  • Save huytd/4f0ba7e363fb66753c4a to your computer and use it in GitHub Desktop.
Save huytd/4f0ba7e363fb66753c4a to your computer and use it in GitHub Desktop.
Realtime Line Chart with D3
<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>
@tigercosmos
Copy link

Cool, I like it!

@ItsMeSousuke
Copy link

I've added fork for d3 v4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment