Beeswarm Plot, Split "swarm" Y Value Based On Boolean

I have been trying to get a modified beeswarm plot up and running. What is 'special' about it is I'm trying to split the y values based on a boolean. So you can imagine a kind of d

Solution 1:

I have absolutely no idea what's your purpose using a voronoi here, so I just got rid of it.

You need just two things. First, you determine the y position on the simulation:

.force("y", d3.forceY(function(d) {
    return d.inlf ? height - 100 : height + 100
}))

Then, you set the circles' positions:

.attr("cx", function(d) {
    return d.x;
})
.attr("cy", function(d) {
    return d.y;
});

Finally, have in mind that there is a shorthand for how many times a simulation's tick must run, so this...

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

... can be just:

simulation.tick(120);

Here is the demo:

var margins = {
  top: 0,
  bottom: 200,
  left: 30,
  right: 100
};

var height = 150;
var width = 900;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', totalWidth)
  .attr('height', totalHeight);

var graphGroup = svg.append('g')
  .attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var formatValue = d3.format(",d");

var xScale = d3.scaleLinear()
  .range([0, width]);

var data = [{
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 10.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 13.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 13.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 10.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 8.0,
    'inlf': 1
  },
  {
    'educ': 10.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 8.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 8.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 10.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 15.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 6.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 15.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 10,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 10,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 10.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 10,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 8.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 11.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  }
];

xScale.domain(d3.extent(data, function(d) {
  return d.educ;
}));

var simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(function(d) {
    returnxScale(d.educ);
  }).strength(1))
  .force("y", d3.forceY(function(d) {
    return d.inlf ? height - 100 : height + 100
  }))
  .force("collide", d3.forceCollide(4))
  .stop();

simulation.tick(120);

graphGroup.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale).ticks(20, ".0s"));

var circles = graphGroup.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 3)
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  });

.cells path {
  fill: none;
  pointer-events: all;
}

.cells:hover circle {
  fill: red;
}

<scriptsrc="https://d3js.org/d3.v5.min.js"></script>