D3 Crossfilter Brush

by Colin White

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<div id="histogram1"></div>
<div id="histogram2"></div>

CSS

/*** d3-tip styles */
.d3-tip {
  line-height: 1.5;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0px;
  text-align: center;
}
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
.d3-tip.n:after {
  top: 100%;
  left: 0;
  margin: -1px 0 0;
}
/*** D3 brush */
.brush .extent {
  stroke: #222;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

var data = [
{"yr":1940,"type":"E","rate":40},{"yr":1947,"type":"A","rate":20},{"yr":1943,"type":"B","rate":30},{"yr":1950,"type":"B","rate":25}, 
{"yr":1943,"type":"C","rate":20},{"yr":1941,"type":"A","rate":30},{"yr":1945,"type":"E","rate":40},{"yr":1948,"type":"A","rate":20},
{"yr":1947,"type":"B","rate":30},{"yr":1950,"type":"B","rate":25},{"yr":1945,"type":"C","rate":20},{"yr":1941,"type":"A","rate":30}, 
{"yr":1944,"type":"B","rate":10},{"yr":1949,"type":"C","rate":20},{"yr":1940,"type":"E","rate":10},{"yr":1940,"type":"E","rate":40},
{"yr":1940,"type":"E","rate":40},{"yr":1947,"type":"A","rate":20},{"yr":1943,"type":"B","rate":30},{"yr":1950,"type":"B","rate":25}, 
{"yr":1943,"type":"C","rate":20},{"yr":1941,"type":"A","rate":30},{"yr":1945,"type":"E","rate":40},{"yr":1948,"type":"A","rate":20},
{"yr":1947,"type":"B","rate":30},{"yr":1950,"type":"D","rate":25},{"yr":1945,"type":"C","rate":20},{"yr":1941,"type":"A","rate":30}, 
{"yr":1944,"type":"B","rate":10},{"yr":1949,"type":"C","rate":20},{"yr":1940,"type":"E","rate":10},{"yr":1947,"type":"E","rate":40}
];

// CROSSFILTER Dimensions //
var cfdata = crossfilter(data)
  , all = cfdata.groupAll()
  , year = cfdata.dimension(function(d) {return d.yr;})
  , type = cfdata.dimension(function(d) {return d.type;})
  , years= year.group()
  , types= type.group().reduceCount()
  , typeKeys = types.all()
  , keyMap = typeKeys.map (function(d) {return d.key}) ;

// General CHART Dimensions //
var margin = {top: 10, right: 20, bottom: 10, left: 10}
  , height = 200 - margin.top - margin.bottom
  , width = 400 - margin.left - margin.right
  , barPadding = 5 ;

// Setup TOOLTIPS //
var tip = d3.tip()
       .attr('class', 'd3-tip')
       .html(function(d){return d.value});
    
// HISTOGRAM 1 : TOTAL BY YEAR //
var min1 = d3.min(years.all(), function(d) {return d.key;})
  , max1 = d3.max(years.all(), function(d) {return d.key;})
  , range1 = max1 - min1 ;
  
var xScale1 = d3.scale.linear()
        .domain([min1,...