How to use crossfilter2 - 7 common examples

if (!Array.isArray(query.data.result)){
        if (query.data.query && query.data.query.analysis_type !== 'extraction') {
          throw 'Local Query can use only result of an Extraction';
          return;
        }
        throw 'query.data should be an Array';
        return;
      }

      sharedData = query.data.result;
      // don't copy this huge array - just make a reference to it
      // so queries with Intervals don't overload the browser
    }

    const rows = crossfilter(sharedData);

    if (query.debug) {
      console.log('! Welcome to the Local Query Experimental Feature !');
      console.log('* Running a local query with:');
      console.log('--', 'Number of events before filtering:', sharedData.length);
      const keysToPrint = [
        'analysis_type',
        'filters',
        'timeframe',
        'interval',
        'group_by',
        'order_by',
        'limit'
      ];
      keysToPrint.forEach(key => {
        console.log('--', key, query[key]);

componentDidUpdate (prevProps) {
    const { refSpeedComparisonEnabled, refSpeedEnabled, percentDiffsBinnedByHour, speedsBinnedByHour, refSpeedsBinnedByHour } = this.props
    const chartData = (refSpeedComparisonEnabled) ? crossfilter(percentDiffsBinnedByHour) : (refSpeedEnabled) ? crossfilter(refSpeedsBinnedByHour) : crossfilter(speedsBinnedByHour)

    this.makeDailyChart(chartData)
    this.makeHourlyChart(chartData)

    // All of this is necessary because after setting a brush programatically,
    // it doesn't re-render them. We have to manually re-call the brush
    // to render. See: https://groups.google.com/forum/#!topic/d3-js/vNaR-vJ9hMg
    // There's more repetitive code here than I like, but we'll have to
    // figure out how to refactor this later.
    dc.renderAll()
    if (this.props.dayFilter) {
      this.dailyChart.brush().extent(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // update brush
      this.dailyDimension.filter(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // apply filter
    }
    if (this.props.hourFilter) {
      this.hourlyChart.brush().extent(this.props.hourFilter.map(i => i + HOURLY_X_SHIFT)) // update brush

componentDidUpdate () {
    const chartData = crossfilter(this.props.speedsBinnedByHour)

    this.makeDailyChart(chartData)
    this.makeHourlyChart(chartData)

    // All of this is necessary because after setting a brush programatically,
    // it doesn't re-render them. We have to manually re-call the brush
    // to render. See: https://groups.google.com/forum/#!topic/d3-js/vNaR-vJ9hMg
    // There's more repetitive code here than I like, but we'll have to
    // figure out how to refactor this later.
    dc.renderAll()
    if (this.props.dayFilter) {
      this.dailyChart.brush().extent(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // update brush
      this.dailyDimension.filter(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // apply filter
    }
    if (this.props.hourFilter) {
      this.hourlyChart.brush().extent(this.props.hourFilter.map(i => i + HOURLY_X_SHIFT)) // update brush

// The preprocessor can convert arbitary api data, into a figure convenient format
        this._data_pre_processor_hooks = [];
        this._pre_render_hooks = [];
        this._post_render_hooks= [];

        this.scheduler = new Scheduler(()=>this._fetch_data(), this.get_update_interval());

        // Post url and body for fetching the graph data
        this._post_url = "";
        this._post_body = "";

        // Current data of this figure
        this._data = {data: [], plot_definitions: []};

        this._crossfilter = new crossfilter.default();
    }

test('can accept a crossfilter instance', () => {
  return universe(crossfilter(data))
})

refreshChartData = function() {
            var frontEndData = healthfrontend.find( {} ).fetch();
            var ndx = crossfilter( frontEndData );

            if ( frontEndData.length === 0 && ndx.size() > 0 ) {
                debugLog( 'clearing ndx/dc.js' );
                dc.filterAll();
                ndx.remove();
                dc.redrawAll();
            } else {
                ndx = crossfilter( frontEndData );
            }
            if ( ndx.size() > 0 ) {
                var hostDim = ndx.dimension( function( d ) { return d.hostname; } );
                var hostEPS = hostDim.group().reduceSum( function( d ) { return d.details.total_deliver_eps.toFixed( 2 ); } );
                var hostLoadAverage = hostDim.group().reduceSum( function( d ) { return d.details.loadaverage[0]; } );
                var epsTotal = ndx.groupAll().reduceSum( function( d ) { return d.details.total_deliver_eps; } );

                totalEPS
                    .valueAccessor( function( d ) { return d; } )
                    .group( epsTotal );

                ringChartEPS
                    .width( 150 ).height( 150 )
                    .dimension( hostDim )
                    .group( hostEPS )
                    .label( function( d ) { return d.value || ''; } )

refreshChartData = function() {
            var frontEndData = healthfrontend.find( {} ).fetch();
            var ndx = crossfilter( frontEndData );

            if ( frontEndData.length === 0 && ndx.size() > 0 ) {
                debugLog( 'clearing ndx/dc.js' );
                dc.filterAll();
                ndx.remove();
                dc.redrawAll();
            } else {
                ndx = crossfilter( frontEndData );
            }
            if ( ndx.size() > 0 ) {
                var hostDim = ndx.dimension( function( d ) { return d.hostname; } );
                var hostEPS = hostDim.group().reduceSum( function( d ) { return d.details.total_deliver_eps.toFixed( 2 ); } );
                var hostLoadAverage = hostDim.group().reduceSum( function( d ) { return d.details.loadaverage[0]; } );
                var epsTotal = ndx.groupAll().reduceSum( function( d ) { return d.details.total_deliver_eps; } );

                totalEPS