<svg viewBox="0 0 960 600"></svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
body {
  overflow: hidden;
  text-align: center;
  
  background-color: black;
  
}

svg {
  stroke-linejoin: round;
  stroke-linecap: round;
  max-height: 100vh;
  outline: solid 1px black;
}

path, line {
  stroke: white;
}

text {
  stroke: none;
  fill: white;
}

.data path {
  stroke: steelblue;
}
const root = d3.select("svg"),
  width = +root.attr("viewBox").split(" ")[2],
  height = +root.attr("viewBox").split(" ")[3];
    
const M = {T: 10, B: 35, L: 40, R: 10}
  let index = 0

const y = d3.scaleLinear()
  .range([height - M.T - M.B, 0])
const x = d3.scaleLinear()
  .range([0, width - M.L - M.R])
const xAxis = d3.axisBottom()
  .scale(x)
const yAxis = d3.axisLeft()
  .scale(y)
const line = d3.line()
  .x((d, i) => x(i + index))
  .y(y)
  
root.append('g')
  .attr('class', 'x axis')
  .attr('transform', `translate(${[M.L, height - M.B + 10]})`)
root.append('g')
  .attr('class', 'y axis')
  .attr('transform', `translate(${[M.L - 10, M.T]})`)
root.append('g')
  .attr('class', 'data')
  .attr('transform', `translate(${[M.L, M.T]})`)
  .append('path')
  .attr('stroke', 'steelblue')
  .attr('fill', 'none')


let data = [0]

function loop () {
  index++
  data.push(Math.floor(Math.random() * 3) -1 + data.slice(-1)[0])
  if(data.length > 100) {
    data.shift()
  }
  x.domain([index, index + data.length - 1])
  y.domain(d3.extent(data))

  root.select('.x.axis').call(xAxis)
  root.select('.y.axis').call(yAxis.tickValues(y.domain()))
  root.select('.data path').datum(data).attr('d', line)
  
  setTimeout(loop, 100)
}

loop()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.