mobx + crossfilter by timelyportfolio

Built with blockbuilder.org

As I try to understand mobx better, I thought a little crossfilter experiment might further my level of understanding. I kept this example really basic and simple.

live example

For those interested in d3.js brush + mobx, see yesterday’s experiment.

Please, please let me know if there is a better way to accomplish this. I would really like to directly observe the dimension, but I don’t think it is possible.

index.html

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.7/d3.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/mobx/2.6.0/mobx.umd.js"></script> 
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
</head>

<body>
    <button onclick = "filter_dim('one')">one</button>
    <button onclick = "filter_dim('two')">two</button>
    <button onclick = "filter_dim('three')">three</button>
    <button onclick = "filter_dim(null)">reset</button>
    <div id = "div-json" style = "width:100%;"></div>
    <script>
      // using example from https://github.com/esjewett/reductio
      var data = crossfilter([
        { foo: 'one', bar: 1 },
        { foo: 'two', bar: 2 },
        { foo: 'three', bar: 3 },
        { foo: 'one', bar: 4 },
        { foo: 'one', bar: 5 },
        { foo: 'two', bar: 6 },
      ]);
      
      var dim = data.dimension(function(d) { return d.foo; });
      
      //start our observable array
      var filtered = mobx.observable([]);
      
      var filter_dim = function(f){
        dim.filterExact(f);
        filtered.replace(dim.top(Infinity));
      }
      
      filter_dim(null);
      
      mobx.autorun(function(){
        d3.select("body").select("#div-json").text(
          JSON.stringify(mobx.toJSON(filtered))
        );
      });
    </script>    
  </body>