Crossfilter & Chiasm

An example set of coordinated views that use Crossfilter and Chiasm.

The idea with this is to introduce a general Crossfilter component that can be set up to work with any visualization components in Chiasm.

Draws from:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chiasm Crossfilter Integration</title>
    
    
    <script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>
    
    
    <script src="https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js"></script>

<script src="barChart.js"> </script>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
    <script src="chiasm-crossfilter.js"></script>

<script src="chiasm-csv-loader.js"></script>

<script src="flights-preprocessor.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    
    
    <script src="https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js"></script>

<style>

body {
        background-color: black;
      }

#chiasm-container {
        background-color: white;
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }

/* Style the brush. Draws from https://bl.ocks.org/mbostock/4343214 */
      .brush .extent {
        stroke: black;
        fill-opacity: .2;
        shape-rendering: crispEdges;
      }

</style>
  </head>
  <body>

<div id="chiasm-container"></div>
    
    
    <script>

// Create a new Chiasm instance.
      var chiasm = new Chiasm();

// Register plugins that the configuration can access.
      chiasm.plugins.layout = ChiasmLayout;
      chiasm.plugins.links = ChiasmLinks;
      chiasm.plugins.barChart = BarChart;
      chiasm.plugins.csvLoader = ChiasmCSVLoader;
      chiasm.plugins.flightsPreprocessor = FlightsPreprocessor;
      chiasm.plugins.crossfilter = ChiasmCrossfilter;

// Set the Chaism configuration.
      chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "vertical",
              "children": [
                {
                  "orientation": "horizontal",
                  "children": [
                    "hour-chart",
                    "delay-chart",
                    "distance-chart"
                  ]
                },
                "date-chart"
              ]
            },
            "sizes": {
              "distance-chart": {
                "size": 1.5
              }
            }
          }
        },
        "hour-chart": {
          "plugin": "barChart",
          "state": {
            "title": "Time of Day",
            "yColumn": "value",
            "xColumn": "key"
          }
        },
        "delay-chart": {
          "plugin": "barChart",
          "state": {
            "title": "Arrival Delay (min.)",
            "yColumn": "value",
            "xColumn": "key"
          }
        },
        "distance-chart": {
          "plugin": "barChart",
          "state": {
            "title": "Distance (mi.)",
            "yColumn": "value",
            "xColumn": "key"
          }
        },
        "date-chart": {
          "plugin": "barChart",
          "state": {
            "title": "Date",
            "yColumn": "value",
            "xColumn": "key"
          }
        },
        "flights-dataset": {
          "plugin": "csvLoader",
          "state": {
            // for development
            //"path": "../ca04856ca6afbc563957/flights-3m" 
            // for production
            "path": "https://bl.ocks.org/curran/raw/ca04856ca6afbc563957/flights-3m"
          }
        },
        "flights-preprocessor": {
          "plugin": "flightsPreprocessor"
        },
        "flights-crossfilter": {
          "plugin": "crossfilter",
          "state": {
            "groups": {
              "dates": {
                "dimension": "date",
                "aggregation": "day"
              },
              "hours": {
                "dimension": "hour",
                "aggregation": "floor 1"
              },
              "delays": {
                "dimension": "delay",
                "aggregation": "floor 10"
              },
              "distances": {
                "dimension": "distance",
                "aggregation": "floor 50"
              }
            }
          }
        },
        "links": {
          "plugin": "links",
          "state": {
            "bindings": [
              "flights-dataset.data -> flights-preprocessor.dataIn",
              "flights-preprocessor.dataOut -> flights-crossfilter.data",

"flights-crossfilter.hours -> hour-chart.data",
              "flights-crossfilter.delays -> delay-chart.data",
              "flights-crossfilter.distances -> distance-chart.data",
              "flights-crossfilter.dates -> date-chart.data",

"hour-chart.brushIntervalX -> flights-crossfilter.hourFilter",
              "delay-chart.brushIntervalX -> flights-crossfilter.delayFilter",
              "distance-chart.brushIntervalX -> flights-crossfilter.distanceFilter",
              "date-chart.brushIntervalX -> flights-crossfilter.dateFilter"
            ]
          }
        }
      });
    </script>
  </body>
</html>

Modified http://curran.github.io/model/cdn/model-v0.2.4.js to a secure url

Modified http://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js to a secure url

Modified http://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js to a secure url

Modified http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js to a secure url

Modified http://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js to a secure url

https://curran.github.io/model/cdn/model-v0.2.4.js

https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

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

https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js

https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js

https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js