force-directed beeswarm plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
		const width = 1000
    const height = 600
    const svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

const colorScale = d3.scaleOrdinal()
    	.range(['#FCFCFC', '#F7567C', '#FFFAE3', '#99E1D9', '#5D576B'])
    
		const sampleData = d3.range(300).map(() => ({r: 7,
                                                value: 200 + d3.randomNormal(0,2.5)()*50}))
    
    // set params for force layout
    const manyBody = d3.forceManyBody().strength(2)
    const center = d3.forceCenter().x((width/2)).y((height/2))
    
    // define force
    let force = d3.forceSimulation()
    	.force('charge', manyBody)
    	.force('center', center)
    	.force('collision', d3.forceCollide(d => d.r))
    	.velocityDecay(.48)
    	.force('x', d3.forceX(d => d.value).strength(3))
    	.force('y', d3.forceY(100))
    	.nodes(sampleData)
    	.on('tick', changeNetwork)
    
    svg.selectAll('circle')
    	.data(sampleData)
    	.enter()
    	.append('circle')
    	.style('fill', (d,i) => colorScale(i))
    	.attr('r', d => d.r)
    	.attr('stroke', 'black')
    	.attr('stroke-width', .1)
    
   	function changeNetwork() {
      d3.selectAll('circle')
      	.attr('cx', d => d.x)
      	.attr('cy', d => d.y)
    }
    
    
  </script>
</body>

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