Built with blockbuilder.org
Last active
May 29, 2020 07:18
-
-
Save tompi/5611c1ab8d1fbed2a87120bd6921a533 to your computer and use it in GitHub Desktop.
D3 moving realtime data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
.axis { | |
font-family: sans-serif; | |
fill: #d35400; | |
font-size: 12px; | |
} | |
.line { | |
fill: none; | |
stroke: #FB4AA4; | |
stroke-width: 1px; | |
} | |
circle { | |
stroke: #FB4AA4; | |
stroke-width: 1px; | |
fill: #FB4AA4; | |
} | |
.line2 { | |
fill: none; | |
stroke: #FEDB6D; | |
stroke-width: 1px; | |
} | |
circle2 { | |
stroke: #FEDB6D; | |
stroke-width: 1px; | |
fill: #FEDB6D; | |
} | |
</style> | |
<svg id="chart"></svg> | |
<script src="http://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var data = []; | |
var data2 = []; | |
var width = 500; | |
var height = 500; | |
var globalX = 0; | |
var duration = 500; | |
var max = 500; | |
var step = 10; | |
var updateFrequency = 5; | |
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); }); | |
// ----------------------------------- | |
// 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); | |
// Append the holder for line chart and circles | |
var g = chart.append('g'); | |
// Append path | |
var path = g.append('path'); | |
var path2 = g.append('path'); | |
setInterval(function() { | |
// Generate new data cirka every fourth tick | |
if (Math.round(Math.random() * 100) % 4) { | |
var point = { | |
x: globalX, | |
y: ((Math.random() * 450 + 50) >> 0) | |
}; | |
data.push(point); | |
// Remote old data (max 50 points) | |
if (data.length > 50) data.shift(); | |
} | |
if (Math.round(Math.random() * 100) % 4) { | |
var point = { | |
x: globalX, | |
y: ((Math.random() * 450 + 50) >> 0) | |
}; | |
data2.push(point); | |
// Remote old data (max 50 points) | |
if (data2.length > 50) data2.shift(); | |
} | |
}, duration); | |
// Main loop | |
function tick() { | |
globalX += step; | |
// Draw new line | |
path.datum(data) | |
.attr('class', 'line') | |
.attr('d', line); | |
path2.datum(data2) | |
.attr('class', 'line2') | |
.attr('d', line); | |
// Update circles | |
// Update circles | |
var circles = g.selectAll('circle') | |
circles.data(data).enter().append('circle') | |
.merge(circles) | |
.attr('r',5) | |
.attr('cx',(function(d){ return x(d.x); })) | |
.attr('cy',(function(d){ return y(d.y); })); | |
circles.exit().remove(); | |
// Shift the chart left | |
x.domain([globalX - (max - step), globalX]); | |
axisX.transition() | |
.duration(duration) | |
.ease(d3.easeLinear) | |
.call(xAxis); | |
g.attr('transform', null) | |
.transition() | |
.duration(duration) | |
.ease(d3.easeLinear) | |
.attr('transform', 'translate(' + x(globalX - max) + ')') | |
.on('end', tick) | |
} | |
tick(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment