Crossfilter Demo | es2015 d3v4

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

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

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

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

forked from micahstubbs's block: Crossfilter Demo | es2015 d3v4

<!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>

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