title: Counting data items in d3.js
body: <p>I have some data. It looks like this (but with several hundred objects in the array rather than three):</p>
  
  <pre><code>var data = [
  {
      id: "1",
      name: "Name1",
      color: "Color1"
  },
  {
      id: "2",
      name: "Name2",
      color: "Color2"
  },
  {
      id: "1",
      name: "Name3",
      color: "Color3"
  }
  </code></pre>
  
  <p>What I want to do is draw a rectangle which has a height that corresponds to the number of items in the data which have a certain <code>id</code> value. So, for example, if there were 300 items in the data array with an <code>id</code> of "1", then the rectangle would be 300 pixels tall.</p>
  
  <p>Obviously I could loop through the array and count them up, but I want to know if there's an easier/shorter way in d3.js.</p>
  
  <p>What I have in mind might look like this:</p>
  
  <pre><code>svg.selectAll('rect').data(data).enter()
      .append('rect')
          .attr('x', 800)
          .attr('y', 800)
          .attr('height', //SOME CODE HERE)
          .attr('width', 5)
          .attr('fill', 'red')
  </code></pre>