title: Returning mean/average for selected valued D3.js
body: <p>I have this json array which is returned in this format from a mySQL database using PHP: </p>
  
  <pre><code> [{"dateTimeTaken":"2013-02-28 05:04:16","reading":"10.7","parameterType":"Flouride"},
   {"dateTimeTaken":"2013-02-28 05:04:21","reading":"10.5","parameterType":"Flouride"},
   {"dateTimeTaken":"2013-02-28 05:04:26","reading":"15.1","parameterType":"pH"},
   {"dateTimeTaken":"2013-02-28 05:04:31","reading":"4.4","parameterType":"Temperature"}...
  </code></pre>
  
  <p>I  have two dropdown lists - where the user will select a) "parameterType" and then b)  "month".  I would like to return the mean/average reading for each day within the selected month for the selected parameterType. </p>
  
  <p>Not sure how I can do this in D3 - but thought it may be something along the lines of:</p>
  
  <ul>
  <li>filter data by parameterType and month of the values selected</li>
  <li>return mean "reading"</li>
  <li>update graph accordingly</li>
  </ul>
  
  <p>Not sure if I'm completely off the mark though - or how I can even achieve this?</p>
  
  <p><strong>UPDATE:</strong> </p>
  
  <pre><code>    d3.select("#parameterType").on("change", function() { filterData(); });
  
      d3.select("#dateTimeTaken").on("change", function() { filterData(); });
  
      function filterData()
      {
          var selectedParameter = document.getElementById("parameterType").value;
          var selectedMonth = document.getElementById("dateTimeTaken").value;
  
          var selectedData = data.filter(function(d) 
          {
              return d.parameterType == selectedParameter &amp;&amp;
                      d.dateTimeTaken.getMonth() == (selectedMonth-1);
          });
  
          console.log(selectedData);//RETURNING EMPTY ARRAY?
  
          mean = d3.mean(selectedData,function(d) { return d.reading})
  
          //UPDATE GRAPH
          x.domain(d3.extent(data, function(d) { return d.dateTimeTaken; }));
          y.domain(d3.extent(data, function(d) { return d.reading; }));
  
          svg.select("path.line")
              .attr("d", line(data));
  
          svg.select(".x.axis")
              .transition()
              .duration(750)
              .ease("linear")
              .call(xAxis);
  
          svg.select(".y.axis")
              .transition()
              .duration(750)
              .ease("linear")
              .call(yAxis);   
      }
      });
      });
  </code></pre>