title: How to make interactive leaflet clustered map with dc js and crossfilter?
body: <p>I would like to know a way to bind the leaflet clustering visualization with dc js charts. I have a code below which is very incomplete in which I found a way to group the data using crossfilter js. I can make a pie chart using dc js with grouping. But to bind it with leaflet I don't have a definite approach. I looked into <a href="https://github.com/yurukov/dc.leaflet.js" rel="nofollow">https://github.com/yurukov/dc.leaflet.js</a> </p>
  
  <p>However I have a realtime visualization which uses a set interval method to get the data at periodic intervals of time. Hence dc.leaflet.js wont work in this case because each time a new layer is added. My code so far is given below. Can someone share some light on how to do this? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;Leaflet Markercluster&lt;/title&gt;
  &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;
  &lt;script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'&gt;&lt;/script&gt;
  &lt;link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' /&gt;
  &lt;style&gt;
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"&gt;&lt;/script&gt;
  &lt;script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"&gt;&lt;/script&gt;
  &lt;link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' /&gt;
  &lt;link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' /&gt;
  
  &lt;!-- Example data. --&gt;
  
  
  &lt;div id='map'&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  (function() {
  L.mapbox.accessToken = 'pk.eyJ1IjoieWVkdXJhZyIsImEiOiJuTkZSOE9vIn0.RE94btqnc1LqnFzzEPZoHg';
      var map = L.mapbox.map('map', 'yedurag.km329i82')
          .setView([15, -15], 2);
  
      var markers = new L.MarkerClusterGroup();
  
  function foo() {
   d3.json("SB1.json", function(addressPoints) {
  
      var data = crossfilter(addressPoints); 
  
      var group1 = data.dimension(function (d) {
              return d[2]; // State is a column in the data
          });
      var statsBygroup1 = group1.group().reduce(
                  function (p, v) {
                      ++p.count
                      p.lat.push(parseFloat(v[0]))
                      p.longi.push(parseFloat(v[1]))
                      ;
  
  
                      return p;
                  }, // to calculate the stats by industries, var industries is grouped and raised is added 
                  function (p, v) {
                      --p.count
                      p.lat.pop()
                      p.longi.pop()
                      ;
                      return p; // when unclicked it is subtracted
                  },
                  function () {
                      return {count: 0, lat: [], longi: []} // initial state; although not mentioned as ReduceInitial
                  }
          )
  
  
      for (var i = 0; i &lt; addressPoints.length; i++) {
          var a = addressPoints[i];
          var title = a[2];
          var marker = L.marker(new L.LatLng(a[0], a[1]), {
              icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
              title: title
          });
          marker.bindPopup(title);
          markers.addLayer(marker);
      }
  
      map.addLayer(markers); })
  
      }
  
  var interval = setInterval(function(){foo()}, 10000); // Listens for the json from python every 10 seconds
  })();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>