beeswarm + voronoi

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
  const height = 300;
  const width = 500;
  const margin = {top: 100, bottom: 50, left: 20, right: 50};

var svg = d3
      .select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height - margin.top - margin.bottom);

var 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');

</script>
</body>

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

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