How to get D3 force bubble chart to draw?

Question

I am having issues with my sorting d3 chart to draw. I am able to get the category text show when each button is selected.

Is my issue within the code for the nodes?

var nodes = svg.selectAll("circle")
      .data(data);

    nodes.enter().append("circle")
      .attr("Pclass", "node")
      .attr("cx", function (d) { return d.x; })
      .attr("cy", function (d) { return d.y; })
      .attr("r", function (d) { return d.radius; })
      .style("fill", function (d) { return fill(d.pclass); })
      .on("mouseover", function (d) { showPopover.call(this, d); })
      .on("mouseout", function (d) { removePopovers(); })

    var force = d3.layout.force();

    draw('Pclass');

My full Plunker is here: https://plnkr.co/edit/JFbPzy7nI1oAyO1Rb9wC?p=preview

Answer 1

I figured out this issue myself. I had a bad variable. I needed to change data[j].Nfare from data[j].comb

for (var j = 0; j < data.length; j++) {
       data[j].radius = +data[j].Nfare / 5;
       data[j].x = Math.random() * width;
       data[j].y = Math.random() * height;
     }