JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script src="//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="1789" value="0" max="2012">
      <span style="float:left">Presidents starting after: <strong><span id="start-year">1789</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("%Y-%m-%d");
    presidents.forEach(function(p) {
      p.took_office = ymdFormat.parse(p.took_office);
      if (p.left_office) {
        p.left_office = ymdFormat.parse(p.left_office);
      }
    });
    
    // Use the crossfilter force.
    var cf = crossfilter(presidents);
    
    // Create a dimension by political party
    var byParty = cf.dimension(function(p) { return p.party; });
    
    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.took_office; });
    console.log("Total # of presidents: " + byTookOffice.top(Infinity).length);
    
    // filter to presidents starting after 1900.
    byTookOffice.filter([new Date(1900, 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,...