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.

forked from tomshanley's block: beeswarm on square and circle path

<!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 randomData1 = d3.range(300).map(x => {
  var val = Math.random() * 400
  return {val} 
})

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

addSwarm(squareNode, randomData1)
addSwarm(circleNode, randomData2)

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))
  		.on("tick", ticked);

}
  
  
</script>

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