D3 Examples - dc/crossfilter simple

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Number Display Example</title>
    <meta charset="UTF-8">
​
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
    <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
    <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  
​
    <style>
      #number-box {
        background: white;
        width: 300px;
        font-size: 35px;
        text-align: center;
        padding-top: 50px;
        padding-bottom: 50px;
        height: 50px;
        border: solid 0.5px;
    
        line-height: normal;
      }
    </style>
</head>
<body>
​
​
​
​
​
​
  
<div class="container">
<script type="text/javascript" src="header.js"></script>
<div id="test" style="float: none">
Inline Number Display. We have <span class="number-display"></span> jumping on the bed.
</div>
​
​
​
<div id="number-box"></div>
​
​
​
<script type="text/javascript">
var inlineND = dc.numberDisplay("#test"),
    boxND    = dc.numberDisplay("#number-box"),
    meanND   = dc.numberDisplay("#mean"),
    expnND   = dc.numberDisplay("#expn");
d3.csv("data.csv", function(error, data) {
  data.forEach(function(x) {
    x.Speed = +x.Speed * 100;
  });
  var ndx            = crossfilter(data),
      runDimension   = ndx.dimension(function(d) {return +d.Run;})
      meanSpeedGroup = ndx.groupAll().reduce(
          function (p, v) {
              ++p.n;
              p.tot += v.Speed;
              return p;
          },
          function (p, v) {
              --p.n;
              p.tot -= v.Speed;
              return p;
          },
          function () { return {n:0,tot:0}; }
      );
  var average = function(d) {
      return d.n ? d.tot / d.n : 0;
  };
  var expCount = function(d) {
      return d.n;
  };
  inlineND
      .valueAccessor(average)
      .html({
        one:"<span style=\"color:steelblue; font-size: 26px;\">%number</span> Monkey",
        some:"<span style=\"color:steelblue; font-size: 26px;\">%number</span> Total Monkeys",
        none:"<span style=\"color:steelblue; font-size: 26px;\">No</span> Monkeys"
      })
      .group(meanSpeedGroup);
  boxND
      .formatNumber(d3.format(".3s"))
      .valueAccessor(average)
      .group(meanSpeedGroup);
  meanND.group(meanSpeedGroup).valueAccessor(average).formatNumber(d3.format(".3g"));
  expnND.group(meanSpeedGroup).valueAccessor(expCount);
  var i=18;
  setInterval(function() {
      runDimension.filter(i++ % 20);
      dc.redrawAll();
  }, 3000);
  dc.renderAll();
});
 
</script>
​
</div>
</body>
</html>
    