D3OG

All examples By author By category About

boeric

Full window Github gist

Adding Day Filter to Crossfilter Example

Adding Day Filter to Crossfilter

This visualization is a slightly expanded version of the excellent original Crossfilter demo here

The visualization adds four items to the original example:

Ability to filter on days (for example "Mon, Thu, Fri") or day types (for example "Weekend"), in addition to the existing dimensions/filters
A dataset View, that allows all of the 230K records to be viewed in an interactive canvas element below the visualization
A timer function/object that can be used to determine the performance of various aspects of the the crossfilter operation
Expanded and more detailed comments, perhaps helpful when trying to understand the original example

Note: added comments and code blocks are marked "BoE".

To see the visualization in action, go here. The project on Github is here, and Github Gist here

<!DOCTYPE html>
<meta charset="utf-8">
<!--
  This visualization is a slightly expanded version of the excellent crossfilter demo at https://square.github.io/crossfilter/
  The viz adds four items to the original example:
  - ability to filter on days and day types
  - a dataset view, that allows all of the 230K records to be viewed in a canvas element
  - a timer function/object that can be used to measure crossfilter performance
  - expanded and more detailed comments

Please see the README.md for additional information

Note: added comments and code blocks are marked "BoE"
  Author of added features: Bo Ericsson, bo@boe.net
-->
<title>Crossfilter with Day Filter</title>
  <style>
  body {
    font-family: "Helvetica Neue";
    /*margin: 40px auto;*/
    width: 960px;
    min-height: 2000px;
  }
  #body {
    position: relative;
  }
  footer {
    padding: 2em 0 1em 0;
    font-size: 12px;
  }
  h1 {
    font-size: 96px;
    margin-top: .3em;
    margin-bottom: 0;
  }
  h1 + h2 {
    margin-top: 0;
  }
  h2 {
    font-weight: 400;
    font-size: 28px;
  }
  h1, h2 {
    text-rendering: optimizeLegibility;
  }
  #body > p {
    line-height: 1.5em;
    width: 640px;
    text-rendering: optimizeLegibility;
  }
  #charts {
    padding: 10px 0;
  }
  .chart {
    display: inline-block;
    height: 151px;
    margin-bottom: 20px;
  }
  .reset {
    padding-left: 1em;
    font-size: smaller;
    color: #ccc;
  }
  .background.bar {
    fill: #ccc;
  }
  .foreground.bar {
    fill: steelblue;
  }
  .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .axis text {
    font: 10px sans-serif;
  }
  .brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
  }
  .brush .resize path {
    fill: #eee;
    stroke: #666;
  }
  #hour-chart {
    width: 260px;
  }
  #delay-chart {
    width: 230px;
  }
  #distance-chart {
    width: 420px;
  }
  #date-chart {
    width: 920px;
  }
  #flight-list {
    min-height: 1024px;
  }
  #flight-list .date,
  #flight-list .day {
    margin-bottom: .4em;
  }
  #flight-list .flight {
    line-height: 1.5em;
    background: #eee;
    width: 640px;
    margin-bottom: 1px;
  }
  #flight-list .time {
    color: #999;
  }
  #flight-list .flight div {
    display: inline-block;
    width: 100px;
  }
  #flight-list div.distance,
  #flight-list div.delay {
    width: 160px;
    padding-right: 10px;
    text-align: right;
  }
  #flight-list .early {
    color: green;
  }
  aside {
    position: absolute;
    left: 740px;
    font-size: smaller;
    width: 220px;
  }
  fieldset {
    margin-bottom: 20px;
    border: 1px solid lightgray;
  }
  fieldset > label,
  span > label {
    margin-right: 10px;
    font-size: 12px;
  }
  label.selected {
    color: black;
  }
  label.notSelected {
    color: lightgray;
  }
  </style>
<body>
  <div id="body">
    <div>
      <a href="javascript:resetAll()" class="reset" style="margin-left: -10px; margin-bottom: 20px">Reset all</a>
    </div>
    <div id="charts">
      <div id="hour-chart" class="chart">
        <div class="title">Time of Day</div>
      </div>
      <div id="delay-chart" class="chart">
        <div class="title">Arrival Delay (min.)</div>
      </div>
      <div id="distance-chart" class="chart">
        <div class="title">Distance (mi.)</div>
      </div>
      <div id="date-chart" class="chart">
        <div class="title">Date</div>
      </div>
    </div>
    <div id="daySelectionDiv"></div>
    <div id="canvasDiv"></div>
    <aside id="totals"><span id="active">-</span> of <span id="total">-</span> flights selected.</aside>
    <div id="lists">
      <div id="flight-list" class="list"></div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.min.js"></script>
<script>
"use strict";

// ensure at least 790px height if running in an iframe (bl.ocks)
// https://bl.ocks.org/mbostock/1093025
d3.select(self.frameElement).transition().duration(500).style("height", "790px");

// BoE: add time logger function
function timeLogger() {
  if (timeLogger.id == undefined) timeLogger.id = 0;
  else ++timeLogger.id;

var events = [];
  var initTs = new Date().getTime();
  var currTs = initTs;

return {
    log: function (event) {
      var ts = new Date().getTime();
      var duration = ts - currTs;
      events.push({ event: event, duration: duration })
      currTs = ts;
    },
    reset: function() {
      currTs = new Date().getTime();
    },
    results: function () {
      var results = events.concat([{ event: "total elapsed", duration: new Date().getTime() - initTs }]);
      results.forEach(function(d) { console.log(d.event, " --> ", d.duration)})
      return results;
    }
  };
};

// BoE: start two time loggers
var tl = timeLogger();
var tl2 = timeLogger();

// BoE: get the data
d3.csv("xFlights-3m.csv", function(error, flights) {

// BoE: add usage example of time logger
  tl2.log("data load");
  tl2.results();

// BoE: add array that holds the currently selected "in-filter" selected records
  var selected = [];

// Various formatters.
  var formatNumber = d3.format(",d"),
      formatChange = d3.format("+,d"),
      formatDate = d3.time.format("%B %d, %Y"),
      formatDateWithDay = d3.time.format("%a %B %d, %Y"),
      formatTime = d3.time.format("%I:%M %p");

// A nest operator, for grouping the flight list.
  var nestByDate = d3.nest()
      .key(function(d) { return d3.time.day(d.date); });

// A little coercion, since the CSV is untyped.
  flights.forEach(function(d, i) {
    d.index = i;
    d.date = parseDate(d.date);
    d.delay = +d.delay;
    d.distance = +d.distance;
    d.selected = false; // BoE add
  });

// Create the crossfilter for the relevant dimensions and groups.
  // BoE: the "tl" stuff below are adds to the original example, to compute time consumed at various steps
  tl.reset();
  var flight = crossfilter(flights);
  tl.log("crossfilter constructor");
  var all = flight.groupAll();
  tl.log("flight.groupAll")

// date dimension
  tl.reset();
  var date = flight.dimension(function(d) { return d.date; }); // date dim
  tl.log("date dimension");
  var dates = date.group(d3.time.day); // date group
  tl.log("date.group")
  dates.groupId = "dates";

// hour dimension
  tl.reset();
  var hour = flight.dimension(function(d) { return d.date.getHours() + d.date.getMinutes() / 60; }); // hour dim
  tl.log("hour dimension")
  var hours = hour.group(Math.floor); // hour group
  tl.log("hour.group()");
  hours.groupId = "hours";

// delay dimension
  tl.reset();
  var delay = flight.dimension(function(d) { return Math.max(-60, Math.min(149, d.delay)); }); // delay dim
  tl.log("delay dimension");
  var delays = delay.group(function(d) { return Math.floor(d / 10) * 10; }); // delay group
  tl.log("delay.group")
  delays.groupId = "delays";

// distances dimension
  tl.reset()
  var distance = flight.dimension(function(d) { return Math.min(1999, d.distance); }); // distance dim
  tl.log("distance dimension")
  var distances = distance.group(function(d) { return Math.floor(d / 50) * 50; }); // distance group
  tl.log("distance.group")
  distances.groupId = "distances";

// BoE: add new day dimension
  tl.reset();
  var dayNumber = flight.dimension(function(d) { return d.date.getDay(); });
  tl.log("dayNumber dimension");
  var dayNumbers = dayNumber.group(function(d) { return d; });
  tl.log("dayNumber.group")
  console.log("--", tl.results())

// BoE: add day selection variables
  var days = {
        mon: { state: true, name: "days", text: "Monday", type: "workDay", dayNumber: 1, order: 0 },
        tue: { state: true, name: "days", text: "Tuesday", type: "workDay", dayNumber: 2, order: 1 },
        wed: { state: true, name: "days", text: "Wednesday", type: "workDay", dayNumber: 3, order: 2 },
        thu: { state: true, name: "days", text: "Thursday", type: "workDay", dayNumber: 4, order: 3 },
        fri: { state: true, name: "days", text: "Friday", type: "workDay", dayNumber: 5, order: 4 },
        sat: { state: true, name: "days", text: "Saturday", type: "weekendDay", dayNumber: 6, order: 5 },
        sun: { state: true, name: "days", text: "Sunday", type: "weekendDay", dayNumber: 0, order: 6 }
      },
      workDays = Object.keys(days).filter(function(d) { if (days[d].type == "workDay") return true; }).map(function(d) { return d; }),
      weekendDays = Object.keys(days).filter(function(d) { if (days[d].type == "weekendDay") return true; }).map(function(d) { return d; }),
      dayNumbers = (function() { var obj = {}; Object.keys(days).forEach(function(d) { var key = days[d].dayNumber; var value = d; obj[key] = value }); return obj; })(),
      dayTypes =  {
        weekendDays: { state: false, name: "dayType", text: "Weekend Days", order: 2 },
        allDays: { state: true, name: "dayType", text: "All Days", order: 0 },
        workDays: { state: false, name: "dayType", text: "Work Days", order: 1 },
        someDays: { state: false, name: "dayType", text: "Some Days", order: 3, last: true }
      };

/*
  // BoE: uncomment this to see the day related variables
  console.log("workDays", workDays)
  console.log("weekendDays", weekendDays)
  console.log("dayNumbers", dayNumbers)
  */

// BoE: prep add radio buttons and checkbox data
  var radioData = Object.keys(dayTypes).map(function(d) { dayTypes[d].value = d; return dayTypes[d]; }).sort(function(a, b) { return (a.order > b.order ? 1 : (a.order < b.order) ? -1 : 0) })
  var checkboxData = Object.keys(days).map(function(d) { days[d].value = d; return days[d]; }).sort(function(a, b) { return (a.order > b.order ? 1 : (a.order < b.order) ? -1 : 0) })

// BoE: create radio buttons
  //https://stackoverflow.com/questions/19302318/radio-buttons-in-d3-how-to-align-text-correctly-and-select-a-default
  var fieldset = d3.select("#daySelectionDiv").append("fieldset")
  fieldset.append("legend").text("Day of Week");

// BoE: add spans to hold radio buttons
  var radioSpan = fieldset.selectAll(".radio")
        .data(radioData)
      .enter().append("span")
        .attr("class", "radio")
        .style("margin-right", function(d) { return d.last == true ? "30px" : "0px" });

// BoE: add radio button to each span
  radioSpan.append("input")
      .attr({
        type: "radio",
        name: function(d) { return d.name },
      })
      .property({
        checked: function(d) { return d.state },
        value: function(d) { return d.value }
      });

// BoE: add radio button label
  radioSpan.append("label")
      .text(function(d) { return d.text });

// BoE: add spans to hold checkboxes
  var checkboxSpan = fieldset.selectAll(".checkbox")
      .data(checkboxData)
    .enter().append("span")
      .attr("class", "checkbox")
      //.style("margin-right", "10px")

// BoE: add checkbox to each span
  checkboxSpan
    .append("input")
      //.attr("type", "checkbox")
      //.attr("name", function(d) { return d.name })
      .attr({
        type: "checkbox",
        name: function(d) { return d.name }
      })
      //.property("value", function(d) { return d.value })
      //.property("checked", function(d) { return d.state })
      .property({
        value: function(d) { return d.value },
        checked: function(d) { return d.state }
      })

// BoE: add checkbox label
  checkboxSpan
    .append("label")
      .text(function(d) { return d.text })

// BoE: add radio button event handler
  d3.selectAll("input[type=radio][name=dayType]")
    .on("change", function() {
      var elem = d3.select(this);
      var dayType = elem.property("value");
      switch (dayType) {
        case "allDays":
        case "someDays":
          workDays.forEach(function(day) { days[day].state = true; })
          weekendDays.forEach(function(day) { days[day].state = true; })
          break;
        case "workDays":
          workDays.forEach(function(day) { days[day].state = true; })
          weekendDays.forEach(function(day) { days[day].state = false; })
          break;
        case "weekendDays":
          workDays.forEach(function(day) { days[day].state = false; })
          weekendDays.forEach(function(day) { days[day].state = true; })
          break;
      }

updateDaySelection();
      renderAll();
    });

// BoE: init checkboxes and add event handler
  d3.selectAll("input[type=checkbox][name=days]")
    .property("checked", function(d, i, a) {
      var elem = d3.select(this);
      var day = elem.property("value");
      //console.log("elem", elem, "day", day, days[day])
      return days[day].state;
    })
    .on("change", function() {
      var elem = d3.select(this);
      var checked = elem.property("checked");
      var day = elem.property("value");
      days[day].state = checked;

updateDaySelection();
      renderAll();
    })

// BoE: update the state of the day selection radio buttons and checkboxes (called after "change" events from those elements)
  function updateDaySelection() {
    // BoE: update checkboxes
    d3.selectAll("input[type=checkbox][name=days]")
      .property("checked", function(d, i, a) {
        var elem = d3.select(this);
        var day = elem.property("value");
        return days[day].state;
      })

// BoE: process selected days
    var workDayCount = workDays.reduce(function(p, c) { return (days[c].state) ? p + 1 : p }, 0);
    var weekendDayCount = weekendDays.reduce(function(p, c) { return (days[c].state) ? p + 1 : p }, 0);

// BoE: determine day type
    var dayType = "someDays";
    if ((workDayCount + weekendDayCount) == 7) dayType = "allDays"
    else if (workDayCount == 5 && weekendDayCount == 0) dayType = "workDays"
    else if (workDayCount == 0 && weekendDayCount == 2) dayType = "weekendDays"

// BoE: set the selected radio button
    d3.selectAll("input[type=radio][value=" + dayType + "]").property("checked", true);

// BoE: create/update day number filter
    dayNumber.filter(function(d) { return days[dayNumbers[d]].state; })
  }

// BoE: create canvas element that holds one record per canvas pixel
  var canvasWidth = d3.select("body").property("clientWidth") - 10,
      canvasHeight = Math.ceil(flight.size() / canvasWidth),
      canvas,
      ctx,
      canvasDiv,
      currentLabel;

selected = date.top(Infinity);

// BoE: get reference to canvas div
  canvasDiv = d3.select("#canvasDiv")
      .style("padding", "2px")
      .style("width", "100%")
      .style("margin-bottom", "20px")

// BoE: add div to hold description of canvas content
  canvasDiv
    .append("div")
      .attr("class", "title")
      .style("margin-bottom", "20px")
      .style("margin-bottom", "10px")
      .html("<span>Dataset View – Each of the " + formatNumber(flight.size()) + " pixels represents a data record (White = Selected, Black = Not Selected, Red = Out of Bounds)</span><br><span style='font-style: italic; font-size: 14px; color: red;'>Move the mouse over the canvas below to see individual data records</span>");

// BoE: add canvas element and mouse handler
  canvas = canvasDiv
    .append("canvas")
      .attr("width", canvasWidth)
      .attr("height", canvasHeight)
      .style("width", canvasWidth + "px")
      .style("height", canvasHeight + "px")
      .style("border", "1px solid lightgray")
      .style("display", "block")
      .style("cursor", "crosshair")
      .on("mousemove", function() {
        var mouse = d3.mouse(canvas.node()),
            x = Math.round(mouse[0]),
            y = Math.round(mouse[1]),
            index = y * canvasWidth + x;

// BoE: event handler delivers mouse mousemove events outside the canvas sometimes (don't know why);
        //     therefore, ensure that only valid x and y values are processed
        if (x < 0 || x > canvasWidth - 1 || y < 0 || y > canvasHeight -1) {
          currentLabel.html("&nbsp;");
          return;
        }
        // then check if the index is out of bounds (the right part of the last row is NOT part of the dataset)
        if (index > flight.size() - 1) {
          currentLabel.html("&nbsp;");
          return;
        }

var item = flights[index],
            dateText = formatDateWithDay(item.date),
            timeText = formatTime(item.date);

var labelText = labelText = "Selected: " + item.selected + ", Date: " + dateText + " " + timeText + ", Delay: ";
        labelText += item.delay + ", Distance: " + item.distance + ", Route: " + item.origin + "-->" + item.destination + " (idx: " + index + ")";
        currentLabel
          .attr("class", function(d) { return item.selected ? "selected" : "notSelected" })
          .text(labelText);
      })
      .on("mouseleave", function() {
        currentLabel.html("&nbsp;");
      })

// BoE: create label for mousemove
  currentLabel = canvasDiv.append("label").html("&nbsp;");

// BoE: get context to canvas elem
  ctx = canvas.node().getContext('2d');

// BoE: this code defines the four charts in an array
  var charts = [

barChart()
        .dimension(hour)
        .group(hours)
      .x(d3.scale.linear()
        .domain([0, 24])
        .rangeRound([0, 10 * 24])) // 10 pixels per bar, 240 pixels total
        .filter([8, 18]), // added by BoE

barChart()
        .dimension(delay)
        .group(delays)
      .x(d3.scale.linear()
        .domain([-60, 150])
        .rangeRound([0, 10 * 21])), // 21 delay groups, 210 pixels total

barChart()
        .dimension(distance)
        .group(distances)
      .x(d3.scale.linear()
        .domain([0, 2000])
        .rangeRound([0, 10 * 40])), // 40 distance groups

barChart()
        .dimension(date)
        .group(dates)
        .round(d3.time.day.round) // ensures whole days
      .x(d3.time.scale()
        .domain([new Date(2001, 0, 1), new Date(2001, 3, 1)])
        .rangeRound([0, 10 * 90]))
        .filter([new Date(2001, 1, 1), new Date(2001, 2, 1)])
  ];

// Given our array of charts, which we assume are in the same order as the
  // .chart elements in the DOM, bind the charts to the DOM and render them.
  // We also listen to the chart's brush events to update the display.
  var chart = d3.selectAll(".chart")
      // BoE: the charts array defined above are provided as data to the d3 selection of ".charts"
      .data(charts)
      .each(function(chart) {
        chart
          .on("brush", function() {
            renderAll();
          })
          .on("brushend", function() {
            renderAll();
          });
      });

// Render the initial lists.
  var list = d3.selectAll(".list")
      .data([flightList]);

// Render the total.
  d3.selectAll("#total")
      .text(formatNumber(flight.size()));

// BoE: initial render
  renderAll();

// BoE debug...
  var sum = dates.all().reduce(function(p, c, i, a) {
    return { value: p.value + c.value };
  })
  //console.log("sum", sum.value);

// BoE debug...
  var groups = [dates, hours, delays, distances]
  groups.forEach(function(group) {
    var grp = group.group;
    var sum = group.all().reduce(function(p, c, i, a) { return { value: p.value + c.value } })
    //console.log("sum: ", sum, "grp", grp)
  })

// Renders the specified chart or list.
  function render(method) {
      // BoE: "method" is the "d" value of data binding to chart above, which happens to be the chart function from barChart
    d3.select(this).call(method);
  }

// Whenever the brush moves, re-rendering everything.
  function renderAll() {
    // BoE: uncomment the next lines to see the what's being rendered
    //console.log("renderAll", chart[0].length, list[0].length, all.value())
    //chart.each(function(d, i) { console.log("this", this, "d", d, "i", i) })
    chart.each(render); // render is called with this set to div and d set to the chart function from barChart
    list.each(render);
    d3.select("#active").text(formatNumber(all.value()));

var tl3 = timeLogger();
    // BoE: update the "selected" array, which holds the currently selected (in-filter) items
    selected = date.top(Infinity);
    tl3.log("date.top(Infinity)")

// BoE: set the selected status in "flights" ("flights" is the data source)
    flights.forEach(function(d) { d.selected = false; }); // first clear all
    selected.forEach(function(d) { flights[d.index].selected = true; }) // then set some

// BoE: clear canvas
    tl3.reset();
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect (0, 0, canvasWidth, canvasHeight);
    tl3.log("filling canvas background")

// BoE: add red out of bounds pixels
    tl3.reset();
    var xSpan = (canvasWidth * canvasHeight) % flight.size();
    var x = canvasWidth - xSpan;
    var y = canvasHeight - 1;
    ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fillRect(x, y, xSpan, 1);
    tl3.log("setting red pixels")

// BoE add: draw white pixel for each active element
    tl3.reset();
    ctx.fillStyle = "rgb(255,255,255)";
    selected.forEach(function(d) {
      var x = d.index % canvasWidth;
      var y = Math.floor(d.index / canvasWidth)
      ctx.fillRect(x, y, 1, 1 );
    })
    tl3.log("setting canvas pixels");
    tl3.results();
  }

// Like d3.time.format, but faster.
  function parseDate(d) {
    return new Date(2001,
        d.substring(0, 2) - 1,
        d.substring(2, 4),
        d.substring(4, 6),
        d.substring(6, 8));
  }

// BoE: this (window.resetAll) isn't used, therefore
  //    repurposed this to reset all filters by javascript triggered by a new "a" tag in the DOM
  window.resetAll = function() {
    var filters = [null, null, null, null];
    filters.forEach(function(d, i) { charts[i].filter(d); });
    Object.keys(days).forEach(function(d) { days[d].state = true });
    updateDaySelection();
    renderAll();
  };

// BoE: resets the filter for a particular dimension
  window.reset = function(i) {
    charts[i].filter(null);
    renderAll();
  };

// BoE: this looks really wasteful – every cell is a div, why not just use a html5 table?
  function flightList(div) {

var flightsByDate = nestByDate.entries(date.top(10));

div.each(function() {
      var date = d3.select(this).selectAll(".date")
          .data(flightsByDate, function(d) { return d.key; });

date.enter().append("div")
          .attr("class", "date")
        .append("div")
          .attr("class", "day")
          .text(function(d) { return formatDate(d.values[0].date); });

date.exit().remove();

var flight = date.order().selectAll(".flight")
          .data(function(d) { return d.values; }, function(d) { return d.index; });

var flightEnter = flight.enter().append("div")
          .attr("class", "flight");

flightEnter.append("div")
          .attr("class", "time")
          .text(function(d) { return formatTime(d.date); });

flightEnter.append("div")
          .attr("class", "origin")
          .text(function(d) { return d.origin; });

flightEnter.append("div")
          .attr("class", "destination")
          .text(function(d) { return d.destination; });

flightEnter.append("div")
          .attr("class", "distance")
          .text(function(d) { return formatNumber(d.distance) + " mi."; });

flightEnter.append("div")
          .attr("class", "delay")
          .classed("early", function(d) { return d.delay < 0; })
          .text(function(d) { return formatChange(d.delay) + " min."; });

flight.exit().remove();

flight.order();
    });
  }

function barChart() {
    // BoE: barChart.id is shared by all instances of barChart's chart, effectively an instance counter
    if (!barChart.id) barChart.id = 0;

var margin = {top: 10, right: 10, bottom: 20, left: 10},
        x,
        y = d3.scale.linear().range([100, 0]), // 100 pixels height
        id = barChart.id++,
        axis = d3.svg.axis().orient("bottom"),
        brush = d3.svg.brush(),
        brushDirty,
        dimension,
        group,
        round,
        yMax;

function chart(div) {
      /*
      // BoE: uncomment this to see how the domain and ranges change as the filters are modified
      console.log("margin", margin);
      console.log("x.range()", x.range())
      console.log("x.domain()", x.domain())
      console.log("y.range()", y.range())
      console.log("y.domain()", y.domain())
      */

var width = x.range()[1],
          height = y.range()[0];

yMax = 0;
      y.domain([0, yMax == 0 ? group.top(1)[0].value : yMax]); // set y domain to max value in this group

// BoE: why is this done using "each"? There is only one div per chart; therefore the construct "div.each" will
      //    only be executed once
      div.each(function() {
        var div = d3.select(this),
            g = div.select("g");

// Create the skeletal chart.
        // BoE: this is only executed once, at init, when there is nothing in the group
        if (g.empty()) {
          div.select(".title").append("a")
              .attr("href", "javascript:reset(" + id + ")")
              .attr("class", "reset")
              .text("reset")
              .style("display", "none");

g = div.append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
            .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// BoE: reset the clip path to full width
          g.append("clipPath")
              .attr("id", "clip-" + id)
            .append("rect")
              .attr("width", width)
              .attr("height", height);

// BoE: generate two paths, one background, one foreground
          g.selectAll(".bar")
              .data(["background", "foreground"])
            .enter().append("path")
              .attr("class", function(d) { return d + " bar"; })
              // assign all the data in the group to the path
              .datum(group.all());

// BoE: assign the clip path to the foreground bars
          g.selectAll(".foreground.bar")
              .attr("clip-path", "url(#clip-" + id + ")");

// BoE: add the x-axis to the svg group
          g.append("g")
              .attr("class", "axis")
              .attr("transform", "translate(0," + height + ")")
              .call(axis);

// Initialize the brush component with pretty resize handles.
          var gBrush = g.append("g").attr("class", "brush").call(brush);
          gBrush.selectAll("rect").attr("height", height);
          gBrush.selectAll(".resize").append("path").attr("d", resizePath);
        }

// Only redraw the brush if set externally.
        // BoE: at init, the **Date** chart has an externally set brush;
        // in this extended example, the **Time of Day** chart also has an externally set brush
        if (brushDirty) {
          brushDirty = false;
          g.selectAll(".brush").call(brush);
          div.select(".title a").style("display", brush.empty() ? "none" : null);
          if (brush.empty()) {
            g.selectAll("#clip-" + id + " rect")
                .attr("x", 0)
                .attr("width", width);
          } else {
            var extent = brush.extent();
            g.selectAll("#clip-" + id + " rect")
                .attr("x", x(extent[0]))
                .attr("width", x(extent[1]) - x(extent[0]));
          }
        }

// BoE: this sets the **d** attribute on the path
        g.selectAll(".bar").attr("d", barPath);
      });

// BoE: the barPath function is called as usual with the d, i, a arguments
      //   (d being called **groups** here, the other args not used)
      function barPath(groups) {
        var path = [],
            i = -1,
            n = groups.length,
            d;
        while (++i < n) {
          d = groups[i];
          path.push("M", x(d.key), ",", height, "V", y(d.value), "h9V", height);
        }
        // BoE: uncomment the next line to see the neat path array that has been generated
        //console.log("path", path)
        return path.join("");
      }

// BoE: the resizePath function defines the look of the brush "handles" on the left and right side of the brush
      function resizePath(d) {
        var e = +(d == "e"),
            x = e ? 1 : -1,
            y = height / 3;
        return "M" + (.5 * x) + "," + y
            + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6)
            + "V" + (2 * y - 6)
            + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y)
            + "Z"
            + "M" + (2.5 * x) + "," + (y + 8)
            + "V" + (2 * y - 8)
            + "M" + (4.5 * x) + "," + (y + 8)
            + "V" + (2 * y - 8);
      }
    }

// BoE: the .chart below threw me for a loop at first; turns out the app is registering multiple brush handlers;
    //   see above for the first instance of brush handlers; to allow multiple handlers to be registered on the same event,
    //   d3 requires a "namespace identifier" on the subsequent event handlers; here "chart" is used as a namespace indicator
    //   alse see: https://stackoverflow.com/questions/32459420/what-does-d3-brush-onbrush-chat-means
    brush.on("brushstart.chart", function() {
      var div = d3.select(this.parentNode.parentNode.parentNode);
      div.select(".title a").style("display", null);
    });

// BoE: uncomment the next like to see another brush handler in action using a dummy namespace
    //brush.on("brush.whatever", function() { console.log("brush.whatever") })

// BoE: this "brush.chart" event handler fires before the "brush" handler fires above;
    //    this particular handler just sets the filter;
    //    the other handler updates all charts
    brush.on("brush.chart", function() {
      var g = d3.select(this.parentNode),
          extent = brush.extent(); // extent contains the domain (x.invert) of the brush

// BoE: handle rounding of extent (allow only integers)
      if (round) g.select(".brush")
          .call(brush.extent(extent = extent.map(round)))
        .selectAll(".resize")
          .style("display", null); // remove the resize a element
      g.select("#clip-" + id + " rect")
          .attr("x", x(extent[0])) // set clip rect x pos
          .attr("width", x(extent[1]) - x(extent[0])); // set clip rect width

// BoE: set a new filter range
      dimension.filterRange(extent);
    });

brush.on("brushend.chart", function() {
      if (brush.empty()) {
        // BoE: if brush is empty, invalidate the clip rect (show all foreground bars), and remove the dimension filter
        var div = d3.select(this.parentNode.parentNode.parentNode);

// BoE: remove the reset "a" element
        div.select(".title a").style("display", "none");

// BoE: invalidate the clip rect (thereby show all foreground blue bars)
        div.select("#clip-" + id + " rect")
            .attr("x", null) // remove the x attribute which will render the clipRect invalid
            .attr("width", "100%");

// BoE: remove the dimension's filter
        dimension.filterAll();
      }
    });

chart.margin = function(_) {
      if (!arguments.length) return margin;
      margin = _;
      return chart;
    };

chart.x = function(_) {
      if (!arguments.length) return x;
      x = _;
      axis.scale(x);
      brush.x(x);
      return chart;
    };

chart.y = function(_) {
      if (!arguments.length) return y;
      y = _;
      return chart;
    };

chart.dimension = function(_) {
      //console.log("chart.dimension..." + _)
      if (!arguments.length) return dimension;
      dimension = _;
      return chart;
    };

chart.filter = function(_) {
      if (_) {
        brush.extent(_);
        dimension.filterRange(_);
      } else {
        brush.clear();
        dimension.filterAll();
      }
      brushDirty = true;
      return chart;
    };

chart.group = function(_) {
      if (!arguments.length) return group;
      group = _;
      // added by BoE
      yMax = group.top(1)[0].value;
      return chart;
    };

chart.round = function(_) {
      if (!arguments.length) return round;
      round = _;
      return chart;
    };

// BoE: the d3 rebind function moves the "on" method from the "brush" object/function to the "chart" object/function;
    // it then returns the "chart" function/object
    return d3.rebind(chart, brush, "on");
  }
});
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.min.js