beeswarm + voronoi

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/d3-delaunay@4"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
</head>

<body>
  <h2>Beeswarm + Voronoi</h2>
  <div id="chart">
  </div>
  <script>
  const height = 300;
  const width = 500;
  const margin = {top: 20, bottom: 20, left: 20, right: 20};
  const svgHeight = height - margin.top - margin.bottom;
  const svgWidth = width - margin.left - margin.right

const timelineSvg = svg
      .append('svg')
      .attr('width', width - margin.left - margin.right)
      .attr('height', height - margin.top - margin.bottom)
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

timelineSvg
      .append('line')
      .attr('x1', (width - margin.left - margin.right)/2)
      .attr('x2', (width - margin.left - margin.right)/2)
      .attr('y1', height  - margin.top - margin.bottom)
      .attr('y2', 0)
      .attr('stroke', 'black');
    
 
    
  timelineSvg
      .append('g')
      .selectAll('circle')
      .data(points)
      .enter()
      .append('circle')
      .attr('cx', (d) => d.x)
      .attr('cy', (d)=> d.y)
      .attr('r', 5);

console.log(points);
  
  </script>
</body>

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

https://unpkg.com/d3-delaunay@4

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js