beeswarm on square and circle path

Playing with the Beeswarm along a path approach, forked from 1wheel's block: beeswarm-path, which was suggested by Arman.

<!DOCTYPE html>
<meta charset='utf-8'>

body{
  font-family: monaco, Consolas, 'Lucida Console', monospace; 
  margin: 0px;
}
  
</style>

var w = 800, h = 800

var svg = d3.select('#graph')
  .html('')
  .append('svg')
  .attr("width", w)
	.attr("height", h)

//square
var squareNode = svg.append('path')
  .attr("d", 'M 50,50 L750,50 L750,750 50,750 z')

//circle
var circleNode = svg.append('path')
  .attr("d", 'M 400,400 m -150,0 a 150,150 0 1,0 300,0 a 150,150 0 1,0 -300,0')

var randomData = d3.range(300).map(x => {
  var val = Math.random() * 400
  return {val} 
})

addSwarm(squareNode, randomData)
addSwarm(circleNode, randomData)

function addSwarm(path, data) {
  
  var node = path.node()

var scaleLength = d3.scaleLinear()
    .domain([0, d3.max(data, function(d){ return d.val })])
    .range([0, node.getTotalLength()])

var scaleX = function(d){
    return node.getPointAtLength(scaleLength(d.val)).x
  }

var scaleY = function(d){
    return node.getPointAtLength(scaleLength(d.val)).y
  }

var simulation = d3.forceSimulation(data)
      .force('x', d3.forceX(d => scaleX(d)))
      .force('y', d3.forceY(d => scaleY(d)))
      .force('collide', d3.forceCollide(r + 1))
      .stop()

for (var i = 0; i < 120; ++i) simulation.tick()

svg.append("g").selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr("r", r)
    .attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")" })
  
}

</script>

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