D3.slider And Dates Filtered On A Timeline

I have this example where some points get spawned over time with a slider. My version is almost working but something that I cant get my head around is this problem: 1) Shows hot

Solution 1:

The slider is working perfectly and filtering it correctly.

Seems like the exit is identifying more data than it needs to remove., thus more points are not visible.

 sites.selectAll(".site")
        .data(data).exit()//remove the selection which are to be removed from dataset.transition().duration(200)
        .attr("r",0)
        .remove();

So I changed the displaySite function like this:

var displaySites = function(data) {
  //remove all the points 
  sites.selectAll(".site")
      .remove();
  //add all the filtered points    
  sites.selectAll(".site")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "site")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", 0)
      .transition().duration(40)
      .attr("r", 0.23);
};

Working code here

Another Way:

In the data pass the unique identifier for uniquely identifying object. Here below i am assuming each point will have a unique description please change it accordingly

var displaySites = function(data) {
  var sitedata = sites.selectAll(".site")
      .data(data, function(d){return d.properties.description});//uniquely identify each dataset point

  sitedata
      .enter()
      .append("circle")
      .attr("class", "site")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", 0)
      .transition().duration(40)
      .attr("r", 0.23);

    sitedata.exit()//remove the selection which are to be removed from dataset
      .transition().duration(200)
        .attr("r",0)
        .remove();

};

Working code here

Hope this helps