title: D3 filtering data points
body: <p>I'm implementing the classic mercator example (https://github.com/mbostock/d3/blob/master/examples/mercator/mercator.html), which I've changed to zoom into Afghanistan and to use only one custom slider. I'm reading in GeoJSON data of places where explosions have happened and the graph maps them all at load. I want to use the slider to view only a month of explosion points at a time but am having trouble filtering the results. I've tried several things based on posts in the Google group but fail to understand how to filter the data read in previously from 'explosions.json'. Thanks for the help!</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;title&gt;IED Attacks in Afghanistan (2004-2009)&lt;/title&gt;
  &lt;script type="text/javascript" src="../d3.v2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../lib/jquery-ui/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  
      @import url("../lib/jquery-ui/jquery-ui.css");
  
      body, .ui-widget {
      font: 14px Helvetica Neue;
      }
  
      svg {
      width: 960px;
      height: 600px;
      border: solid 1px #ccc;
      background: #eee;
      }
  
      line {
      stroke: brown;
      stroke-dasharray: 4,2;
      }
  
      path {
      fill: #ccc;
      stroke: #fff;
      }
  
      div {
      width: 960px;
      }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h3&gt;IED Attacks in Afghanistan (2004-2009)&lt;/h3&gt;
  &lt;script type="text/javascript"&gt;
  
          // Create the Mercator Projection (Map)
          var xy = d3.geo.mercator(),
              path = d3.geo.path().projection(xy);
  
  
          // Create the states variable
          var states = d3.select("body")
          .append("svg")
          .append("g")
              .attr("id", "states");
          // Create the equator variable
          var equator = d3.select("svg")
          .append("line")
              .attr("x1", "0%")
              .attr("x2", "100%");
          // Create the explosions variable
          var explosions = d3.select("svg")
          .append("g")
              .attr("id","explosions");
  
          // Load in the states &amp; equator data from the file 'world-countries.json'
          d3.json("world-countries.json", function(collection) {
              states
                  .selectAll("path")
                  .data(collection.features)
                  .enter().append("path")
                  .attr("d", path)
                  .append("title")
                  .text(function(d) { return d.properties.name; });
              equator
                  .attr("y1", xy([0, 0])[1])
                  .attr("y2", xy([0, 0])[1]);
          });
  
          // the variable that holds our translate, center on Afghanistan
          var translate = xy.translate(); //create translation to center gride in different area
          translate[0] = -1741;
          translate[1] = 1487;
          xy.translate(translate); // center
  
          xy.scale(12000); //zoom in
  
          // Load in the explosions data from the file 'explosions.json'
          d3.json("explosions.json", function(collection) {
              explosions
                  .selectAll("path") //make a path and attach data
                  .data(collection.features)
                  .enter().append("path")
                  .attr("d", path)
                  .style("stroke","red") //color the path points
                  .style("stroke-width",2) //size of point stroke
                  .attr("class","explosionpoint")
                  .append("title") //title is the 'name' field in the json file
                  .text(function(d) { return d.properties.name; });
          });
  
  
  
      &lt;/script&gt;
  
      &lt;p&gt;&lt;/p&gt;
      &lt;!-- Slider --&gt;
      &lt;div id="scale"&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
      &lt;script type="text/javascript"&gt;
  
          $("#scale").slider({
          min: 20040101, //min : 1/1/04
          max: 20100101, //max: 1/1/10
          value: 20060601, //default slider value
          step: 100, // step is the allow increments the slider can move. 100 = one month
          slide: function(event, ui) {
  
  
              /* REMOVE ALL EXPLOSION PATHS EXCEPT FOR A PARTICULAR MONTH OR RELOAD WITH FILTERED RESULTS */
          }
          });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>