How to catch Crossfilter data updates in DC.js?

I am working from the color-swatch chart example in dc.js. My chart (source) renders the size of its given to render data length value. All I want is for it to change on overviewChart filter update.

So no selection:

On selection:

Yet I want is to be much smaller and changed according to overviewChart selection.

Here is my source code:

class dcChart {
  constructor(parent, groupByKeyName, valueKeyName, group) {
    this._group = null;
    this._dimension = null;

    this._groupByKeyIdx = groupByKeyName;
    this._valueKeyName = valueKeyName;

    this._root = d3.select(parent);
    dc.registerChart(this, group);
  }

  cf(data) {
    this._cf = data;
    return this;
  }

  dimension(data) {
    this._dimension = data;
    return this;
  }

  group(data) {
    this._group = data;
    return this;
  }

  render() {
    console.log("called once");
    this.redraw();
  }

  redraw() {
    this._root.html(this._dimension.hasCurrentFilter() + " " + this._group.all().length)
    console.log(this._dimension.hasCurrentFilter())
    console.log(this._group.all())
  }


}

function loadStockData(stock, callback) {
  d3.csv('https://bost.ocks.org/mike/cubism/intro/stocks/' + stock + '.csv').then(function(rows) {
    rows = rows.map(function(d) {
      return [d3.timeParse(d.Date), +d.Open];
    }).filter(function(d) {
      return d[1];
    }).reverse();

    var date = rows[0][0],
      compare = rows[400][1],
      value = rows[0][1],
      values = [],
      indices = [];

    rows.forEach(function(d, i) {
      values.push(value = (d[1] - compare) / compare);
      indices.push(i);
    });


    callback({
      'stock': stock,
      'values': values,
      'indices': indices
    });
  });
}

var promises = [];
['AAPL', 'GOOG', 'MSFT'].forEach(function(stock) {
  promises.push(new Promise(function(resolve, reject) {
    var r = loadStockData(stock, resolve);
  }));
});

Promise.all(promises).then(function(stocks) {
  console.log(stocks);

  var data = [];

  for (var i = 0; i < stocks.length; i++) {
    for (var j = 0; j < stocks[i].indices.length; j++) {
      data.push({
        'idx': stocks[i].indices[j],
        'name': stocks[i].stock,
        'value': stocks[i].values[j]
      })
    }
  }

  var ndx, runDimension, runGroup, overviewRunDimension, overviewRunGroup;
  ndx = crossfilter(data);
  console.log(666);
  console.log(ndx.groupAll());
  runDimension = ndx.dimension(function(d) {
    return [d.name, d.idx];
  });

  runGroup = runDimension.group().reduceSum(function(d) {
    return d.value;
  });
  var runHCDimension = ndx.dimension(function(d) {
    return [d.name, d.idx];
  });

  var runHCGroup = runHCDimension.group().reduceSum(function(d) {
    return d.value;
  });

  var myChart = new dcChart("#test-hc", 1, 2);
  myChart.cf(ndx)
    .dimension(runHCDimension)
    .group(runHCGroup);

  var overviewChart = dc.seriesChart("#test-overview");
  overviewChart
    .width(768)
    .height(100)
    .chart(function(c) {
      return dc.lineChart(c).curve(d3.curveCardinal);
    })
    .x(d3.scaleLinear().domain([0, 1]))
    .brushOn(true)
    .xAxisLabel("Values")
    .clipPadding(10)
    .dimension(runDimension)
    .group(runGroup)
    .seriesAccessor(function(d) {
      return "Stock: " + d.key[0];
    })
    .keyAccessor(function(d) {
      return d.key[1];
    })
    .valueAccessor(function(d) {
      return d.value;
    });


  dc.renderAll();
});

 body {
        margin: 0;
        padding: 0;
    }

    .horizon {
        border-top: solid 1px #000;
        border-bottom: solid 1px #000;
        overflow: hidden;
        position: relative;
    }

    .horizon + .horizon {
        border-top: none;
    }

    .horizon canvas {
        display: block;
        image-rendering: pixelated;
    }

  .horizon .title,
  .horizon .value {
      bottom: 0;
      line-height: 30px;
      margin: 0 6px;
      position: absolute;
      font-family: sans-serif;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
      white-space: nowrap;
  }

  .horizon .title {
      left: 0;
  }

  .horizon .value {
      right: 0;
  }

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>dc.js - Custom Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="//dc-js.github.io/dc.js/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//unpkg.com/dc@4/dist/style/dc.css" />

    <script src="//d3js.org/d3.v5.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.4/crossfilter.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dc/3.2.1/dc.min.js"></script>
    <script src="//npmcdn.com/d3-horizon-chart/build/d3-horizon-chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.js"></script>
  </head>

  <body>

    <div class="container">
      <div id="test-overview"></div>
      <br />
      <div id="test-hc"></div>

    </div>
  </body>

</html>

So how one can get all the dimension data values filtered on another dc.js chart update?

Recommended topics

Hot tags