javascript - How to plot points on a map projection in D3.js and filter the data using range sliders? -

here current status of code i'm trying work with. http://jaskirat.me/uploads/datavis/map_projection/ points mapped earthquakes occurred in past month. want slider on top filter points based on range of dates.

how that? following function creates points.

function createpoints() {     svg.selectall(".symbol")         .data(centroid.features.sort(function(d) {             return d.properties.mag;         }))         .enter().append("path")         .attr("fill", "rgba(0, 140, 200, 0.5)")         //interaction         .on("mouseover", function(d, i) {             d3.select(this)                 .attr("fill", "red");             // tooltip             var tooltipx = parsefloat(d3.select(this).attr("x")) + 10;             var tooltipy = parsefloat(d3.select(this).attr("y")) + 10;             svg.append("text")                 .attr("fill", "rgba(0, 140, 200, 1)")                 .attr("x", 100)                 .attr("y", height - 200)                 .text("place : " + d.properties.place)                 .attr("id", "tooltip")                 .append("tspan")                 .attr("x", 100)                 .attr("dy", 20)                 .text("lat : " + d.geometry.coordinates[0])                 .append("tspan")                 .attr("x", 100)                 .attr("dy", 20)                 .text("lon : " + d.geometry.coordinates[1]);         })         .on("mouseout", function(d) {             d3.select(this)                 .attr("fill", "rgba(0, 140, 200, 0.5)")             d3.select("#tooltip").remove();         })         .attr("d", path.pointradius(function(d) { // xy coordinates calculated .pointradius             return radius(d.properties.mag);         })); } 

i've modified code follows

queue() .defer(d3.json, "world-110m.json") .defer(d3.json, "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson") .await(ready);  function ready(error, world, centroid) { var minval = 0; var maxval = 0;  d3.select('#slider1').call(d3.slider().axis(true).min(0).max(30).step(1).value([5, 10]).on("slide", function(evt, value) {     d3.select('#slider1textmin').text(value[0]);     d3.select('#slider1textmax').text(value[1]);     minval = value[0];     maxval = value[1];     refreshpoints(); }));  function refreshpoints() {     svg.selectall("g.symbol").remove();      console.log("remove");     // createpoints(); } 

i need figure out how remove points whenever slider moves. syntax incorrect.