Forked from Ajay Patel's Pen D3 REaltime chart .
A Pen by A Non Ymous on CodePen.
Forked from Ajay Patel's Pen D3 REaltime chart .
A Pen by A Non Ymous on CodePen.
Array.prototype.max = function() { | |
return Math.max.apply(null, this); | |
}; | |
Array.prototype.min = function() { | |
return Math.min.apply(null, this); | |
}; | |
var n = 40, | |
random = d3.random.normal(0, .2), | |
data = d3.range(n).map(random); | |
var margin = {top: 20, right: 20, bottom: 20, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.linear() | |
.domain([0, n - 1]) | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.domain([-1, 1]) | |
.range([height, 0]); | |
var line = d3.svg.line() | |
.x(function(d, i) { return x(i); }) | |
.y(function(d, i) { return y(d); }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("defs").append("clipPath") | |
.attr("id", "clip") | |
.append("rect") | |
.attr("width", width) | |
.attr("height", height); | |
var xAxisBase = svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + y(0) + ")"); | |
xAxisBase.call(d3.svg.axis().scale(x).orient("bottom")); | |
var yAxisBase = svg.append("g") | |
.attr("class", "y axis"); | |
yAxisBase.call(d3.svg.axis().scale(y).orient("left")); | |
var path = svg.append("g") | |
.attr("clip-path", "url(#clip)") | |
.append("path") | |
.datum(data) | |
.attr("class", "line") | |
.attr("d", line); | |
tick(); | |
function tick() { | |
// push a new data point onto the back | |
data.push(random() * 50 + 1); | |
// redraw the line, and slide it to the left | |
path | |
.attr("d", line) | |
.attr("transform", null) | |
.transition() | |
.duration(500) | |
.ease("linear") | |
.attr("transform", "translate(" + x(-1) + ",0)") | |
.each("end", tick); | |
x = d3.scale.linear() | |
.domain([0, n - 1]) | |
.range([0, width]); | |
y = d3.scale.linear() | |
.domain([data.min(), data.max()]) | |
.range([height, 0]); | |
xAxisBase.call(d3.svg.axis().scale(x).orient("bottom")) | |
yAxisBase.call(d3.svg.axis().scale(y).orient("left")); | |
// pop the old data point off the front | |
data.shift(); | |
} |
svg { | |
font: 10px sans-serif; | |
} | |
.line { | |
fill: none; | |
stroke: #000; | |
stroke-width: 1.5px; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} |