Keeping track of the current number of values selected when the brush is moved, using dc.js/crossfilter.js

1
votes

I have a couple of charts working correctly with dc.js, but I'd like to keep track of the values changing when the brush is moved, similar to the main crossfilter example here: http://square.github.io/crossfilter/.

Part of my issue is that I'm not completely understanding how the brush event listeners work when using dc.js charts, so I'm sure I'm missing something simple. I have looked over the D3.js brush API.

I've tried adding .on("brushstart", brushed) to the chart objects as well as creating an instance of the brush and then adding an event like this:

brush.on("brushstart", function() {
        console.log("brush test");
    });

but the event isn't firing. I also tried grouping the charts together similar to the crossfilter example code, but no luck.

A complete fiddle is here: http://jsfiddle.net/neilsatt/6Zk9v/

Thanks

1
d3.jsdc.jscrossfilter
I believe it already updates while the brush is moving. It's just the dc.js has a relatively long default transition length. Move the brush slowly and you'll see it. – Ethan Jewett
Thanks Ethan. I found the built in dc.js Data Count widget which is what I'm looking for. A sample is on this page: jun9.github.io/dc.js/index.html I'm working on it in my fiddle, so I'll update the link on this page once I get it to work in my version. – NeilS
Ah, yup. Sorry, didn't get what you were asking. Have fun! – Ethan Jewett

1 Answers

2
votes

I found out that dc.js already has a Data Count widget that handles this functionality.

You can find an example listed under "DATA COUNT' in the dc.js documentation - http://dc-js.github.io/dc.js/docs/stock.html

I also updated my fiddle (http://jsfiddle.net/neilsatt/6Zk9v/1/)

Lines 6-9 in the HTML have the widget, and here are the updated lines 111-113 in the JavaScript: 

dc.dataCount(".dc-data-count")
  .dimension(xFilter)
  .group(all);