| license: mit |
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.
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.
| <!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> |