D3 Examples - beeswarm + voronoi

xxxxxxxxxx
 
<!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};
​
  const data = [{date: '2018-01-01'},{date: '2018-01-01'}];
  const parsedData = data.map((d)=>{ 
    return {date: moment(d.date[0], "YYYYMMDD")};
                                   })
  const minDate =  moment.min(...parsedData.map((d)=> d.date)).toDate();
  const maxDate =  moment.max(...parsedData.map((d)=> d.date)).toDate();
  // columns: index, dateDimension, label
  const yScale = d3.scaleTime()
        .domain([d3.timeWeek.floor(minDate), d3.timeWeek.ceil(maxDate)])
      .range([height - margin.top- margin.bottom, 0]);
​
  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>
​
    