title: Remove multiple data depending on viewport flag in D3.js
body: <p>I have a map where I'm checking which zoom and translation the viewport has, so I can show the information. In my case circles are pooping up over the world/over germany/over syria. </p>
  
  <p><a href="https://i.stack.imgur.com/95o0C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/95o0C.png" alt="Firt interaction"></a></p>
  
  <p><a href="https://i.stack.imgur.com/lI81G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lI81G.png" alt="germany 2nd"></a></p>
  
  <p><a href="https://i.stack.imgur.com/jwO2c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jwO2c.png" alt="syria 3rd"></a></p>
  
  <p>The main part looks like this where I'm checking which part of the map is seen and how the zoom level is</p>
  
  <pre><code>var minZoomTresholdCountry = 15
  var minXG = -462,
      maxXG = -552
      minYG = -29,
      maxYG = -98;
  
  var minXS = -647,
      maxXS = -544,
      minYS = -104,
      maxYS = -164;
  
  var zoomCheck = 0, //zoomcheck which zoom level? Which country is focussed //0 = WORLD 1 = GER 2 = SYR
      filterCheck = 1; //how is POI diplayed? Per day or over TIME? 0 per day 1 over Time
  
  var tip = d3.tip()
    .attr('class', 'd3-tip')
    .html(function(d) { return d.properties.description })
    .offset([0, 3]);
  svg.call(tip)
  
  function zoomed() {
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    var translate = zoom.translate();
    var translateX = translate[0]/zoom.scale();
    var translateY = translate[1]/zoom.scale();
    // console.log(translate[0]/zoom.scale() + "   " + translate[1]/zoom.scale());
    // console.log(zoom.scale());
  
    if (zoom.scale()&lt;minZoomTresholdCountry) {
      //console.log("WELT");
      zoomCheck = 0;
      // if( siteDataG ){
      //   siteDateG.remove();
      // }
      // if(siteDataS){
      //   siteDataS.remove();
      // }
    }
    else if(zoom.scale() &gt;= minZoomTresholdCountry
      &amp;&amp; translateX&lt; minXG &amp;&amp; translateX &gt; maxXG
      &amp;&amp; translateY&lt;minYG &amp;&amp; translateY&gt;maxYG){
        //console.log("DE");
        zoomCheck = 1;
    }
    else if(zoom.scale() &gt;= minZoomTresholdCountry
      &amp;&amp; translateX&gt; minXS &amp;&amp; translateX &lt; maxXS
      &amp;&amp; translateY&lt;minYS &amp;&amp; translateY&gt;maxYS){
        //console.log("SYR");
        zoomCheck = 2;
    }
    else{
      zoomCheck = 0;
    }
    //console.log(zoomCheck)
  
  
  
    if(zoomCheck == 0){
      showSmth();
    }
  }
  
  d3.json("data/vorfaelle.json", function(error, data){
      window.site_dataG = data;
  });
  d3.json("data/syria_sorted.json", function(error, data){
      window.site_dataS = data;
  });
  
  d3.json("data/newtest.json", function(error, data){
      window.site_dataW = data;
  });
  
  d3.json("data/isil.en.json", function(error, data){
      window.site_dataB = data;
  });
  
  dpG = d3.time.format("%d.%m.%Y").parse;
  dpS = d3.time.format("%Y-%m-%d").parse;
  
  //
  // var minDate = dpG("01.01.2015");
  // var maxDate = dpG("31.12.2015");
  var minDate = moment.utc("2015-01-01").toDate();
  var maxDate = moment.utc("2016-01-01").toDate();
  var secondsInDay = 1000 * 60 * 60 * 24; //DAYS
  
  var slider = d3.slider()
      .axis(true).min(minDate).max(maxDate).step(secondsInDay)
      .on("slide", function(evt, value) {
  
      temp = moment(value,"x").utc().format("YYYY-MM-DD");
      tempVal = moment(temp).unix()*1000;
  
  
        if( filterCheck == 0 ){
  
          if( zoomCheck == 0 ){
  
            newDataW = site_dataW.features.filter(function(d){
  
              dataDate = moment(d.properties.date).utc().unix()*1000;
              // console.log("dataDate " + new Date(dataDate));
              // console.log("slidDate " + new Date(value));
              //console.log("-- " + moment(dataDate).toDate());
  
  
              if (dataDate == tempVal) {
                //console.log("Sucess");
                //console.log(moment(dataDate).toDate());
                return moment(dataDate).toDate();
              }
            });
            showWorldSite(newDataW)
  
          }
  
          else if( zoomCheck == 1 ){
  
            newDataG = site_dataG.features.filter(function(d){
              dataDate = moment(d.properties.date).utc().unix()*1000;
              //console.log(value);
              if (dataDate == tempVal) {
                //console.log("Sucess")
                return moment(dataDate).toDate();
              }
            })
            showGermanSite(newDataG);
          }
  
          else if( zoomCheck == 2 ){
  
            newDataS = site_dataS.features.filter(function(d){
              dataDate = d.properties.Date;
              if (dataDate == temp) {
                return moment(dataDate).toDate()
              }
            });
  
            showSyrianSite(newDataS);
          }
  
        }
  //================================================================================================
  //================================================================================================
  //================================================================================================
  
        else if( filterCheck == 1 ) {
        //
          if( zoomCheck == 0 ){
  
            newDataW = site_dataW.features.filter(function(d){
  
              dataDate = moment(d.properties.date).utc().unix()*1000;
  
                //console.log(new Date(dataDate) &lt; new Date(value));
                return moment(dataDate).toDate() &lt; moment(tempVal).toDate() ;
  
  
  
            });
            //console.log(newDataW.length);
            showWorldSite(newDataW)
  
          }
        //
          else if( zoomCheck == 1 ){
  
            newDataG = site_dataG.features.filter(function(d){
              dataDate = moment(d.properties.date).utc().unix()*1000;
              //console.log(moment(dataDate).toDate());
              return moment(dataDate).toDate() &lt; moment(tempVal).toDate() ;
            })
            // console.log(newDataG.length);
            // console.log(new Date(value));
            showGermanSite(newDataG);
          }
  
          else if( zoomCheck == 2 ){
  
            newDataS = site_dataS.features.filter(function(d){
              // dataDate = moment(d.properties.Date).utc().unix()*1000;
              dataDate = d.properties.Date;
              // return dpS(d.properties.Date) &lt; new Date(value);
              // return moment(dataDate).toDate() &lt; moment(tempVal).toDate() ;
              // return moment(dataDate).isBefore(tempVal);
              return new Date(dataDate) &lt; new Date(temp);
            });
  
            showSyrianSite(newDataS);
          }
  
        }
  
  
  
  
  
      });
  
  d3.select('#slider3').call(slider);
  
  function showWorldSite(data){
  
    var siteDataW = sites.selectAll(".siteW")
        .data(data);
  
  
    siteDataW
        .enter()
        .append("circle")
        .attr("class", "siteW")
        .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", 6)
        .transition().duration(70)
        .attr("r", 4);
  
      siteDataW.exit()//remove the selection which are to be removed from dataset
          .transition().duration(10)
          .attr("r",0)
          .remove();
  }
  
  
  function showGermanSite(data){
  
  
    var sitedataG = sites.selectAll(".siteG")
        .data(data);
    sitedataG
        .enter()
        .append("circle")
        .attr("class", "siteG")
        .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]
        })
        .on("click", tip.show)
        .on('mouseout', tip.hide)
        .attr("r", 1.25)
        .transition().duration(70)
        .attr("r", 0.25);
      sitedataG.exit()
        //.transition().duration(200)
          .attr("r",0)
          .remove();
  
  }
  
  function showSyrianSite(data){
    var radScale = d3.scale.linear()
      .domain(d3.extent(data, function(d){
        return d.properties.Value }))
      .range([0.1,.5]);
    var siteDataS = sites.selectAll(".siteS")
        .data(data);
    siteDataS
        .enter()
        .append("circle")
        .attr("class", "siteS")
        .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", function(d){
          return 1.75 * radScale(d.properties.Value)
        })
        .transition().duration(70)
        .attr("r", function(d){
          return radScale(d.properties.Value)
        });
  
      siteDataS.exit()
          //.transition().duration(10)
          .attr("r",0)
          .remove();
  
  
  }
  
  function showSmth(){
    console.log("Here will be something soon");
  }
  </code></pre>
  
  <p>Is there an effective way to remove data if it is not used (not in viewport/ not in the zoom view) in my case? I could remove the circles when the case of zoomCheck equals 0 etc is triggered when I do something like this in the zoom function:</p>
  
  <pre><code>var sitedataG, sitedataS, sitedataW;
  
  if (zoom.scale()&lt;minZoomTresholdCountry) {
    zoomCheck = 0;
    sitedataG.remove();
    sitedataS.remove();
  }
  else if(zoom.scale() &gt;= minZoomTresholdCountry
    &amp;&amp; translateX&lt; minXG &amp;&amp; translateX &gt; maxXG
    &amp;&amp; translateY&lt;minYG &amp;&amp; translateY&gt;maxYG){
      zoomCheck = 1;
      sitedataW.remove();
      sitedataS.remove();
  }
  else if(zoom.scale() &gt;= minZoomTresholdCountry
    &amp;&amp; translateX&gt; minXS &amp;&amp; translateX &lt; maxXS
    &amp;&amp; translateY&lt;minYS &amp;&amp; translateY&gt;maxYS){
      //console.log("SYR");
      zoomCheck = 2;
      sitedataW.remove();
      sitedataG.remove();
  }
  </code></pre>
  
  <p>But this is no proper solution and it is not really wroking either (error because of course not always siteData is created so it can't be removed)</p>
  
  <p>If you want to take a look at my full code, feel free to use <a href="https://github.com/RitterLean/remove-data-byzoom" rel="nofollow noreferrer">this</a></p>