Built with blockbuilder.org
forked from denisemauldin's block: d3 v4 realtime line chart
forked from KevinGutowski's block: d3 v4 realtime line chart
Last active
May 28, 2020 10:45
-
-
Save Sohalt/9715be30ba57e00f2275d49247fa7118 to your computer and use it in GitHub Desktop.
d3 v4 realtime line chart
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: #f1c40f; | |
| stroke-width: 3px; | |
| } | |
| .circle { | |
| stroke: #e74c3c; | |
| stroke-width: 3px; | |
| fill: #FFF; | |
| } | |
| </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 = 250; | |
| 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); }); | |
| // ----------------------------------- | |
| // 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'); | |
| // 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', 'line') | |
| .attr('d', line); | |
| // 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,.1) | |
| .call(xAxis); | |
| g.attr('transform', null) | |
| .transition() | |
| .duration(duration) | |
| .ease(d3.easeLinear,.1) | |
| .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