D3 Examples - Crossfilter Demo

Crossfilter Demo | es2015 d3v4

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

see also an earlier iteration that retains the plot width and table width of the original Crossfilter example at http://square.github.io/crossfilter/

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).

xxxxxxxxxx
 
​
<!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: 430px;
  }
​
  #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: 925px;
    margin-bottom: 1px;
  }
​
  #flight-list .time {
    color: #999;
  }
​
  #flight-list .flight div {
    display: inline-block;
  }
​
  #flight-list div.time {
    width: 100px;
    text-align: left;
  }
​
  #flight-list div.origin {
    width: 50px;
    text-align: right;
    padding-right: 15px;
  }
​
  #flight-list div.destination {
    width: 100px;
    text-align: left;
    padding-left: 15px;
  }
​
  #flight-list div.distance {
    width: 100px;
    text-align: left;
  }
​
  #flight-list div.delay {
    width: 120px;
    padding-right: 0px;
    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>
​
​
​
    