How to get Swarmplot toggle working in d3.js

I have a swarmplot which I need to transition between two groups:https://jsfiddle.net/j299c94s/#&togetherjs=rLhMxCGRft

And this is the main part of the code that's supposed to update when toggled:

data = [
  {"id":1, 
  "value":20,
  "group":"a"},
  {"id":1, 
  "value":10,
  "group":"a"},
  {"id":1, 
  "value":30,
  "group":"a"},
  {"id":1, 
  "value":40,
  "group":"a"},
  {"id":1, 
  "value":42,
  "group":"a"},
   {"id":1, 
  "value":10,
  "group":"b"},
  {"id":1, 
  "value":12,
  "group":"b"},
  {"id":1, 
  "value":15,
  "group":"b"},
  {"id":1, 
  "value":23,
  "group":"b"},
  {"id":1, 
  "value":22,
  "group":"b"}
]



  //default
  draw(data.filter(d=> d.group=="a"));

  d3.selectAll("input")
  .on("change", selectDataset);

  function selectDataset()
{
  var value = this.value;
  if (value == "a")
  {
    draw(data.filter(d=> d.group=="a"));
  }
  else if (value == "b")
  {
    draw(data.filter(d=> d.group=="b"));
  }

}  

function draw(data) {

  // transition
  var t = d3.transition()
          .duration(750);


  x.domain(d3.extent(data, function(d) { return d.value; }));

  var simulation = d3.forceSimulation(data)
      .force("x", d3.forceX(function(d) { return x(d.value); }).strength(1))
      .force("y", d3.forceY(height / 3))
      .force("collide", d3.forceCollide(18))
      .stop();

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

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

  var cell = g.append("g")
      .attr("class", "cells")
    .selectAll("g").data(d3.voronoi()
        .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
      .polygons(data)).enter().append("g");



  circles=cell.append("circle");

  circles.exit().remove();

  circles
        .transition(t)
      .attr("r", 16)
      .attr("cx", function(d) { return d.data.x; })
      .attr("cy", function(d) { return d.data.y; })
      .attr("fill", d => (d.data.Food_Sub_Group))
      .attr("opacity", 0.1);


} 

When select a, the chart will be filtered to a, and when select b, the chart will be filtered to b. The two selections have the same items with different value. It was taken from mbostock’s original swarmplot where a voronoi is included for mouse over.

One thing I’m puzzled about is the toggle is not working, it’s overlaying each selection on top of another. Another I don’t understand is after line 136 where “g” element is created, why .enter().append("g”) again in line 142?

Any advice appreciated. Thanks.