Crossfilter Demo | es2015 d3v4 | original widths

this iteration converts the code to ES2015 in something like the airbnb style

forked from @alexmacy's block: Updated Crossfilter.js demo

this iteration retains the plot width and table width of the original Crossfilter example at http://square.github.io/crossfilter/

see also this later iteration with improved plot and table widths

commit history

This is an updated version of this demo of the crossfilter library. Crossfilter has been one of my favorite - and what I think to be on of the most underrated - JavaScript libraries. It hasn't seen much of any updates in quite a while, so I wanted to find out how it would work with version 4 of d3.js.

There were some issues that came up with how d3-brush has been updated for v4. Big thanks goes to Alastair Dant (@ajdant) for helping to figure out a couple of those issues!

Also worth reading, is this discussion started by Robert Monfera (@monfera).

<!DOCTYPE html>
<meta charset='utf-8'>
<title>Crossfilter</title>
<style>

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

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 {
    font-family: 'Yanone Kaffeesatz';
    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;
  }

.brush-handle {
    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;
  }

</style>
<head>
  <script src='//alexmacy.github.io/crossfilter/crossfilter.v1.min.js' defer></script>
  <script src='//d3js.org/d3.v4.min.js' defer></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js' defer></script>
  <script src='vis.js' defer></script>
</head>
<body>
  <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>
  <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>
</body>

https://alexmacy.github.io/crossfilter/crossfilter.v1.min.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js