Line chart D3.js v5

This fiddle is basically the same as the Scaled Lines fiddle, however, this one includes X and Y axis as well as circles at data points. I also added an optional glow effect for the line.

by mamounothman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<div id="demo"></div>
<svg width="500" height="500"></svg>

CSS

body {
  padding: 0;
  margin: 0;
}

.axis line {
  stroke: #C1A1DF;
}

.axis path {
  stroke: #C1A1DF;
}

.axis text {
  stroke: #C1A1DF;
  font-family: verdana;
}

JavaScript

var numberOfPoints = 50;
var max = 100;
var radius = 75;

const svg = d3.select('svg')
var width = +svg.attr("width")
var height = +svg.attr("height")
var margin = {top: (.1*width), right: (.1*width), bottom: (.1*width), left: (.1*width)};

width = .8 * width;
height = .8 * height;

// create a clipping region 
svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);

// create axis scales
var xScale = d3.scaleLinear()
    .domain([0, max])
    .range([0, width]);

var yScale = d3.scaleLinear()
    .domain([0, max])
    .range([height, 0]);


// create axis objects
var xAxis = d3.axisBottom(xScale)
    .ticks(20, "s");
var yAxis = d3.axisLeft(yScale)
    .ticks(20, "s");

// Draw Axis
var gX = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + (margin.top + height) + ')')
  .call(xAxis);

  var gY = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  .call(yAxis);

// Draw Datapoints
var points_g = svg.append("g")
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .attr("clip-path", "url(#clip)")
    .classed("points_g", true);

data = genRandomData (numberOfPoints, max);
var points = points_g.selectAll("circle").data(data);
points = points.enter().append("circle")
    .attr('cx', function(d) {return xScale(d.x)})
    .attr('cy', function(d) {return yScale(d.y)})
    .attr('r', 5);


  
// set up the zoom
var zoom = d3.zoom()
    .scaleExtent([.5, 20])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);

// "target" for the zoom
svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .call(zoom);
    
    
// draw the circle
circle = drawCircle();
function drawCircle() {
  return d3.select('rect')
    .append('circle')
   ...