crossfilter, d3.brush and nvd3 integration

Question

I've looked at the crossfilter homepage

And really like what's going on. But I don't want to hand write all my graphs if I don't need to. I've already looked in dc.js which is quite nice and gives you built in crossfilter integration and filtering.

However dc is missing some stuff that I need which I get from nvd3. However getting any kind of cross graph filtering (with a brush or click, etc depending on type of graph) via crossfilter into/on top of nvd3 looks like a lot of work. I haven't seen or heard any type of this work going on anywhere, but it seems like a natural progression of nvd3.

Is adding cross graph filtering and crossfilter to nvd3 easy and am I just overlooking a straightforward to go about this?

How are people accomplishing this?

Thanks.

Answer 1

DC is nice because you can pass in dimensions and groups directly to the graph objects themselves and you don't have to manually update on changes to the crossfilter.

If you wanted to tie together Crossfilter and NVD3, you'd need to manually update the NVD3 domain/range or data on changes to the state of the crossfilter dimensions/groups. This is basically how the Crossfilter page example handles it if you check out the source: http://square.github.io/crossfilter/. Whenever the brushes change, the graphs are redrawn and update to reflect the changes.

Getting NVD3 charts to redraw and reflect new data is easy. You can just update the datum and call the barchart again... eg.

var svg = d3.select("body").append("svg").style("height", "500px");
var barChart = nv.models.multiBarChart();

// Just execute this block each time the chart data changes
// and the chart will update in a nicely animated manner
svg
    .datum(chartData)
    .transition()
    .duration(500)
    .call(barChart);

The tricky part would actually be if you wanted to have brushes built into the NVD3 charts. That might get tricky because you'd have to keep the brushes sync'd with the NVD3 charts as their data is changed so that they draw correctly, but if you just want to have the NVD3 chart update correctly based on another chart's brush events or you don't care about brushes at all, it shouldn't be too hard at all. The good tutorial on brushes is here: http://bl.ocks.org/mbostock/1667367

Even with that said, NVD3 is very good about exposing almost all of the underlying chart components (scales, axes, etc), which means you could access, add, and update a brush as needed and then register for the brush events, update the crossfilter, and then redraw the charts as needed.

It's also open source, so your other option would be to fork the repo and add the brush support and events to the source directly.

Personally, I have a custom timeline chart I made that uses brushes and fires events when the brush is updated. On the events, I then update the data for the NVD3 stacked bar chart and redraw it. So, as you change the timeline filter, the bar chart animates and updates. It's pretty slick to see it in action.

Either way, sounds like an interesting challenge. Good Luck!