title: Filter data in d3 to draw either circle or square
body: <p>I'm having a bit of trouble understand selections and filtering in d3. Let's say I have a simple array:</p>
  
  <pre><code>data = [1, 2, 6, 3, 4]
  </code></pre>
  
  <p>I want to draw circles if the value &lt; 5 and squares if it's  >= 5. My code right now only draws circles and looks like this:</p>
  
  <pre><code>var svg = d3.select("body").append("svg")
  svg.selectAll("shapes")
      .data(data)
      .enter()
      .append("circle")
  </code></pre>
  
  <p>and other attributes for circles. I need to use the <code>.filter()</code> method, but I don't know where to put it. I tried doing something like:</p>
  
  <pre><code>var svg = d3.select("body").append("svg")
  svg.selectAll("shapes")
      .data(data)
      .enter()
      .filter(function(d){if (d&gt;5){console.log('working');})
      .append("circle")
  </code></pre>
  
  <p>but then I get an error with the <code>append</code> method. Can someone point me in the right direction on how I'd accomplish this?</p>