CrossFilter D3 RT

by mr23

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://square.github.com/crossfilter/crossfilter.v1.min.js"></script>
<div style="padding: 10px">
  <div id="chart"></div>
  <div style="padding-top: 10px">
    <div style="width: 515px; clear:both;">
      <input id="slider" type="range" style="width:100%" min="0" value="0" max="60">
      <span style="float:left">Presidents starting after: <strong><span id="start-year">2010</span></span></strong>
    </div>
  </div>
</div>

CSS

body {
  font: 10px sans-serif;
}
.chart rect {
  stroke: white;
  fill: steelblue;
}
.chart text {
  fill: black;
  text-anchor: end;
}
.chart text.white-label {
  fill: white;
}

JavaScript

function demo(presidents) {

    var ymdFormat = d3.time.format("%m/%d/%Y");
    presidents.forEach(function(p) {
      p.Date = ymdFormat.parse(p.Date);
    });
    
    // Use the crossfilter force.
    var cf = crossfilter(presidents);
    
    // Create a dimension by political party
    var byParty = cf.dimension(function(p) { return p.PlatformPN; });
    
    console.log("-- group by party");
    var groupByParty = byParty.group();
    groupByParty.top(Infinity).forEach(function(p, i) {
      console.log(p.key + ": " + p.value);
    });
    console.log("");
    
    console.log("-- filter to Whig party presidents");
    byParty.filterExact("Whig");
    byParty.top(Infinity).forEach(function(p, i) {
      console.log(p.number + ". " + p.president);
    });
    console.log("");
    
    byParty.filterAll();
    
    // Create a dimension by the year a president took office.
    var byTookOffice = cf.dimension(function(p) { return p.Date; });
    console.log("Total # of presidents: " + byTookOffice.top(Infinity).length);
    
    // filter to presidents starting after 1900.
    byTookOffice.filter([new Date(2010, 1, 1), Infinity]);
    console.log("# of presidents starting after 1900: " + byTookOffice.top(Infinity).length);
    groupByParty.top(Infinity).forEach(function(p, i) {
      console.log(p.key + ": " + p.value);
    });
    
    byTookOffice.filterAll();
    
    function barchart(id, groupByParty) {
      var woff = 115;
      var hoff = 0;
      var w = 400 + woff;
      var h = 100 + hoff;
    
      var parties = groupByParty.top(Infinity);
    
      var chart = d3.select(id)
        .append("svg")
          .attr("class", "chart")
          .attr("width", w)
          .attr("height", h)
        .append("g")
          .attr("transform", "translate(" + woff + "," + hoff + ")");
    
      var x = d3.scale.linear()
        .domain([0, d3.max(parties, function(v) { return v.value; })])
        .range([0, w-woff]);
    
      var y =...