Beeswarm plot

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

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
     var svg = d3.select("body").append("svg")
      .attr("width", 960 )
      .attr("height", 500)

var roleScale = d3.scaleOrdinal()
  .range(["#75739F", "#41A368", "#FE9922"])

var sampleData = d3.range(300).map(() =>
({r: 3, value: 250 + d3.randomNormal()() * 50}))

var manyBody = d3.forceManyBody().strength(10)                       
var center = d3.forceCenter().x(430).y(250)

var force = d3.forceSimulation()
    .force("collision", d3.forceCollide(d => d.r))
    .force("x", d3.forceX(430))                                  
    .force("y", d3.forceY(d => d.value).strength(5))             
    .nodes(sampleData)
    .on("tick", updateNetwork)

d3.select("svg")
   .selectAll("circle")
   .data(sampleData)                                                 
   .enter()
   .append("circle")
   .style("fill", (d, i) => roleScale(i))
   .attr("r", d => d.r)

function updateNetwork() {
   d3.selectAll("circle")
     .attr("cx", d => d.x)                                           
     .attr("cy", d => d.y)
}
  
  </script>
</body>

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