Skip to content

Instantly share code, notes, and snippets.

@denisemauldin

denisemauldin/.block

Created October 4, 2017 18:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denisemauldin/ceb7065687c125223339a26a47d58a28 to your computer and use it in GitHub Desktop.
Save denisemauldin/ceb7065687c125223339a26a47d58a28 to your computer and use it in GitHub Desktop.
Download ZIP
d3 v4 realtime line chart
Raw
.block
license: mit
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment