Results on screen are the same, but in the first method, circle and rect elements are only created for data instances that were "filtered in". The d3.filter() method creates circle and rect elements for all data, but these elements are "empty" for data that was "filtered out". Use your browsers' DOM inspector to see the difference...

This is using the JavaScript standard Array.filter():

data = [1, 2, 3, 4, 5, 6, 7, 8]
shapes = svg1.selectAll("circle")
   .data(data.filter(function(d){ return d < 5; }))
   .enter()
   .append("circle")
      ...etc...
shapes = svg1.selectAll("rect")
   .data(data.filter(function(d){ return d >= 5; }))
   .enter()
   .append("rect")
     ...etc...

This is using the d3.filter():

data = [1, 2, 3, 4, 5, 6, 7, 8]
shapes = svg1.selectAll("circle")
   .data(data).enter()
   .append("circle")
   .filter(function(d){ return d < 5; })       ...etc...
shapes = svg1.selectAll("rect")    .data(data).enter()
   .append("rect")
   .filter(function(d){ return d >= 5; })      ...etc...