JSFiddle - React, Tailwind, and code Playground

HTML

<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

CSS

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;
	}

JavaScript

var n = 40,
			random = function(min, max) {
				return Math.random() * (max - min) + min;
			},
			data = [];

		for (var i = 0; i < n; i += 1) {
			data[i] = 0;
		}
		var margin = {
				top: 20,
				right: 20,
				bottom: 20,
				left: 40
			},
			width = 560 - margin.left - margin.right,
			height = 300 - margin.top - margin.bottom;

		var x = d3.scale.linear()
			.domain([1, n - 2])
			.range([0, width]);
		var y = d3.scale.linear()
			.domain([-1, 1])
			.range([height, 0]);
		var line = d3.svg.line()
			.interpolate("basis")
			.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 path = svg.append("g")
			.attr("clip-path", "url(#clip)")
			.append("path")
			.datum(data)
			.attr("class", "line")
			.attr("d", line);

		tick();

		var gr = 0;
		function tick() {

			var r = random(-2, 2);		
			var n = 0;
			if(typeof gr != 'undefined') {
				gr += 0.3;
				n = gr + r;
			} else {
				n = r;	
			}
			data.push(n);
			
			var sum = 0;
			for (var i = 0; i < data.length; i += 1) {
				sum += data[i];
			}
			var avg = sum / data.length;

			y.domain([avg - 10, avg + 10])

			path
				.attr("d", line)
				.attr("transform", null)
				.transition()
				.duration(100)
				.ease("linear")
				.attr("transform", "translate(" + x(0) + ",0)")
				.each("end", tick);


			data.shift();
		}