real time gauge

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
  <link rel="stylesheet" href="style.css">
  <style>
    body { margin:0; padding: 30px; position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<div class="gauge">
        <div class="guage-info">
            <h3 class="gauge-title"><span class="guage-title-em">Clicks</span> this year</h3>
            <small class="gauge-text gauge-text-sm">Compared to last year</small>
            <h1 class="gauge-stats">
              <span class="gauge-stats-value">120</span>
            </h1>
            <p class="gauge-delta">
              <i class="gauge-delta-icon"></i>
              <span class="gauge-delta-value">1.420 (+12%)</span>
            </p>
        </div>
    
        <div class="gauge-chart js-sparkline"></div>
      </div>
    
    </div>

var data = [
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
  {x: 10, y: 10, z: 10},
];

var width = 200;
var height = 100;
var globalX = 0;
var duration = 500;
var step = 10;
var chart = d3.select('.js-sparkline')
  .append('svg')
	.attr('width', width + 10)
	.attr('height', height + 10);

var x = d3.scaleLinear().domain([0, width]).range([0, width]);
var y = d3.scaleLinear().domain([0, height]).range([height, 0]);

var defs = chart.append('defs');

var gradient = defs.append("linearGradient")
   .attr("id", "areaGradient")
   .attr("x1", "100%")
   .attr("x2", "100%")
   .attr("y1", "0%")
   .attr("y2", "100%");

gradient.append("stop")
   .attr('class', 'start')
   .attr("offset", "0%")
   .attr("stop-color", "#5b85c9")
   .attr("stop-opacity", 1);

gradient.append("stop")
   .attr('class', 'end')
   .attr("offset", "100%")
   .attr("stop-color", "#5b85c9")
   .attr("stop-opacity", 0);

var line = d3.line()
  .x(d => x(d.x))
  .y(d => y(d.y))
  .curve(d3.curveCatmullRom.alpha(0.5));

var targetLine = d3.line()
	.x(d => x(d.x))
	.y(d => y(d.z))
	.curve(d3.curveCatmullRom.alpha(0.5));
	
var areaLine = d3.area()
  .x(d => x(d.x))
  .y0(height)
  .y1(d => y(d.y));

// Append the holder for line chart and fill area
var path = chart.append('path');
var targetPath = chart.append('path');
var areaPath = chart.append('path');

var rand = (min, max) => Math.random() * (max - min) + min;

// Draw
function draw(value, target) {
	var point = {
	    x: globalX,
	    y: value,
	    z: target,
	};
	
	data.push(point);
	globalX += step;
	
	// Draw new line
 	path.datum(data)
 		.attr('class', 'line')
 		.attr('d', line);
 		
	targetPath.datum(data)
		.attr('class', 'line-default')
		.attr('d', targetLine);
		
	areaPath.datum(data)
		.attr('class', 'area')
		.attr('fill', 'url(#areaGradient)')
		.attr('d', areaLine);

// Shift the chart left
	if (globalX > width) {
	  x.domain([globalX - (width - step), globalX]);
	}

path.attr('transform', null)
		.transition()
		.duration(duration)
		.attr('transform', 'translate(' + x(globalX - max) + ')');

targetPath.attr('transform', null)
		.transition()
		.duration(duration)
		.attr('transform', 'translate(' + x(globalX - max) + ')');
  
  areaPath.attr('transform', null)
		.transition()
		.duration(duration)
		.attr('transform', 'translate(' + x(globalX - max) + ')');
		
	if (data.length > 50) data.shift();
}

setInterval(function() {
  console.log('adding new value');
  draw(rand(50, 100), rand(40, 80));
}, 1000);

// (function() {
//       var data = document.getElementById("fileData");
//       var conn = new WebSocket("ws://{{.Host}}/ws");
//       conn.onclose = function(evt) {
//           console.log('Connection closed');
//       }
//       conn.onmessage = function(evt) {
//           draw(JSON.parse(evt.data).value)
//       }
//   })();

</script>
</body>

https://d3js.org/d3.v4.min.js