D3 filtering data points

Question

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

Answer 1

You'll need to post part or all of your explosions.json object for a concrete answer. However, something like this will filter a JSON if it's structured like {explosion1:{data1:true, data2:true}, explosion2:{data1:true, data2:false}}:

function filterJSON(json, key, value) {
  var result = {};
  for (var explosionIndex in json) {
    if (json[explosionIndex][key] === value) {
      result[explosionIndex] = json[explosionIndex];
    }
  }
  return result;
}

(e.g. filterJSON(myjson, "data1", true) will give all explosions with data1:true)

This is not specific to d3.

Then you could use something like this for the d3-side of things:

explosions.data(myFilteredData).exit().remove(); // remove ones you don't want
explosions.enter().append("path")... // add back ones you do want

---

If I understand your application, it would actually be better to just toggle the visiblity attribute of the SVG elements.

var sliderrange = [20040101, 20040201]; //replace with code based on your slider
explosions.selectAll(".explosionpoint").attr("visibility", function(d) {
  //Replace with the correct date comparison logic
  return d.date < sliderrange[1] && d.date > sliderrange[0] ? "visible" : "hidden";
});

Answer 2

D3 does have a very natural way of doing this. I'll assume your data looks something like this:

[{name: explosion1name, day: 20040110,...}, {name: explosion2name, day: 20040111,...}]

...and that you've got some variable, we'll call it explosionsData, to reference the data.

You can then draw your explosions with a function that takes the values from your slider. See the .filter I've added below.

function drawExplosions(startDay, endDay) {
    explosions.selectAll("path") //make a path and attach data
            .data(collection.features)
            .enter().append("path")
            .filter( function (d) { return ( (d.day > startDay) && (d.day < endDay) )})
            .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; });

Just call this function whenever your slider values changes.