How would I change the filter in d3 circle pack?

Question

The problem is that the positions of all of the bubbles are determined when you create the layout, not when you append everything. If you want to create bubbles for only the 1800 points, you need to filter your data before applying the layout. It's not trying to load the bubbles, but they were part of the data that you passed to bubble.nodes. (Specifically, you passed them in classes(root).

You can do this by using the javascript .filter method inside the .classes() function from the bubble chart example.

Here's an example where I changed it to only display the classes in the layout package:

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  classes = classes.filter(function(thisClass){return thisClass.packageName == 'layout'}) 
  return {children: classes};
}

Also note that the filter function doesn't return the elements that I want, it returns a boolean for each element that says if I want it or not. It also doesn't modify the array it is used on, so classes == classes.filter() is required.

I built a working fiddle of the bubble chart example here.

In the original bubble chart, the filter removes some circles that appear behind the other circles.

EDIT (ANSWER TO YOUR QUESTION):

Store all of your data in a single data object. You can use a modified version of the classes function that contains an internal filter for a certain year. (Similar to what I did for filtering to a specific packageName in my example). To update, select all nodes and enter your new data in them with the following:

d3.selectAll('.node').data(bubble.nodes(modifiedClasses(root,year))

Note that this WILL NOT automatically update all of your nodes, just the data, just change the underlying data structure. You'll then use the standard d3 enter/exit/update pattern to change your visualization. The best example of this structure is this block. I'd further recommend using keyed data for this, to differentiate between locations. If you use

.data(bubble.nodes(modifiedClasses(root,year)),function(d){return d.locID})

Each element will correspond to a certain place. If you do this, instead of removing all data points and then rebuilding, you can remove all locations that don't exist at the new date (with some .exit() behavior), add any new locations (with .enter()), and update any locations that exist at both years. Check out the next two blocks in the general update series (the block I linked above) for a good example of how to do this. If you can figure it out, you'll have a good handle on the basic workings of data manipulation in d3.