Force collision for y position in bubble chart - d3.js

Question

I am using attempting to use d3.forceSimulation that applies a force to the y position of the chart circles to keep them from overlapping.
the final chart would look something like this -
I have been following some examples but am unable to get the y positions to adjust in the right way. Unfortunately, I have no idea where this is going wrong. Any hint in the right direction would be greatly appreciated!
So far, this is my code:
//ADDING SKELETON FOR THE CHART//
let width = 900;
let height = 300;
let margin = {x: 50, y:20};
let chartDiv = d3.select('body').append('div').attr('id', 'bubble-chart');
let svg = chartDiv.append('svg');
svg.attr('height', height).attr('width', width + margin.x);
//SCALES FOR X POSITION//
let posScale = d3.scaleLinear().domain([(0-overallMax), overallMax]);
posScale.range([0, width]);
//SCALES FOR COLOR//
let colorScale = d3.scaleOrdinal().domain(groupData.map(g=> g[0])).range(d3.schemeSet3);
//SCALE FOR CIRCLE SIZE//
let circleScale = d3.scaleLinear().domain([d3.min(data.map(d=> +d.total)), d3.max(data.map(d=> +d.total))])
.range([3, 10]);
//SIMULATION PART
let simulation = d3.forceSimulation().nodes(data)
.force('center', d=> d3.forceCenter(posScale(d.position), height/2))
//.force('charge', d3.forceManyBody().strength(.1))
.force('collision', d3.forceCollide().radius( d => circleScale(+d.total)))
.on('tick',ticked)
let circleGroup = svg.append('g').attr('transform', `translate(${margin.x / 2})`);
let circles = circleGroup.selectAll('circle').data(data).join('circle');
circles.attr('r', (d)=> circleScale(+d.total))//.attr('cx', (d) => posScale(d.position)).attr('cy', 50);
.attr("cx", d=> posScale(d.position))
.attr("cy", height / 2)
circles.attr('fill', (d)=> colorScale(d.category));
circles.style('opacity', '0.5');
// Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
function ticked(){
circles.attr("cy", d=> d.y).attr('cx', d=> posScale(d.position));
}
This is what my chart looks like with the above code:
Thank you in advance!

Answer 1

This is not how one creates a beeswarm chart (the technical name of this kind of data visualisation). You should use forceX and forceY in the simulation to set the positions. In your case:
let simulation = d3.forceSimulation().nodes(data)
.force("x", d3.forceX(function(d) {
return posScale(d.position);
}).strength(foo))
.force("y", d3.forceY(50).strength(bar))
.force('collision', d3.forceCollide().radius( d => circleScale(d.total)))
.on('tick',ticked)
Then, adjust the strengths (foo and bar) according to your needs, and change the ticked function to use the x and y properties provided by the simulation.