D3 Examples - Filtered groups

xxxxxxxxxx
 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sanisphere</title>
    <link rel="stylesheet" href="dc.css">
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@2/dc.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
  
    <div class="container-fluid">
        <div class="row">           
    <div id="Districtname">
      <strong>District Name</strong>
      <span class="reset" style="display: none;">Selected: <span class="filter">    
      </span></span>
      <a class="reset" href="
      javascript:districtnamechart.filterAll();dc.redrawAll();" style="display:
         none;">reset</a>
        <div class="clearfix"></div>
​
​
    </div>
        <div id="pop">
          <strong>Coverage</strong>
          <span class="reset" style="display: none;">Selected: <span class="filter">    
          </span></span>
          <a class="reset" href="
          javascript:popnamechart.filterAll();dc.redrawAll();" style="display:
             none;">reset</a>
            <div class="clearfix"></div>
            </div>
​
​
    
    <script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
    <script src="https://unpkg.com/d3@3/d3.js"></script>
    <script src="https://unpkg.com/dc@2/dc.js"></script>
​
    <script>
​
​
        var districtnamechart = dc.rowChart("#Districtname"),
          popnamechart = dc.rowChart("#pop"),
          //visCount = dc.dataCount(".dc-data-count"),
          //visTable = dc.dataTable(".dc-data-table"),
          //yearchart = dc.pieChart("dateDim"),
      commonChartBarColor = '#0063c6';
​
          
         
​
        d3.csv("data.csv", function (err,data) {
​
               //,kmist,city,district,ward,Lat,Long
               //0,KTMPVN15707,Ho Chi Minh,Can Gio,Can Thanh,10.41525,106.97254
               //1,KTMPVN15706,Ho Chi Minh,Can Gio,Can Thanh,10.41392,106.9705
​
​
​
​
            if (err) throw err;
​
            data.forEach(function (d) {
                d.Timestamp = new Date(d.Timestamp);
            }); 
​
​
            var ndx = crossfilter(data);
            var all = ndx.groupAll();
            var allDim = ndx.dimension(function(d) {return d;});
            var dateDim = ndx.dimension(function (d) { return d.Timestamp; });
​
            var districtDIM = ndx.dimension(function (d) { return d["district"]; })
              ;
            var popDIM = ndx.dimension(function (d) { return d["pop"]; 
              });
​
            var districtgroup = districtDIM.group();
            var popgroup = popDIM.group();
            var dateGroup = dateDim.group();
       
      
      
      // For empty bins 
      var group = districtDIM.group();
            var filtered_group = remove_empty_bins(group)
      
      
      function remove_empty_bins(source_group) {
            return {
                all:function () {
                    return source_group.all().filter(function(d) {
​
                        return d.value !== 0; // if integers only
                    });
                }
            };
        }
        
​
            districtnamechart
                .height(350)
                .width(300)
        .colors(commonChartBarColor)
                .dimension(districtDIM)
                .group(filtered_group)
                .elasticX(true);
​
​
            popnamechart
                .dimension(popDIM)
                .height(100)
                .width(700)
                .group(popgroup)
                .elasticX(true)
​
​
​
​
​
        
   
                dc.renderAll();
            
            });
​
    </script>
</body>
</html>
    