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

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.