crossfilter, d3.brush and nvd3 integration
Asked Answered
B

1

10

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.

Barrows answered 30/9, 2013 at 12:13 Comment(2)
I'm not aware of any such integration. If it's easy entirely depends on your definition of easy; I certainly wouldn't attempt it without being quite familiar with the components.Comte
I am doing exactly the same thing now, nvd3 has some nice charts but no filter, dc.js filter data well but not so beautiful. Could you contact me so we could share some experience about this? [email protected]. Thx!Locate
F
9

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!

Fsh answered 30/9, 2013 at 14:1 Comment(1)
Thanks for the answer. I may give it a shot. Regarding Square (crossfilter) they also have a really nice dashboard filled with graphs. The graphs can be brushed/filtered auto-updating the other graphs. Additionally tooltips popup when hovering over individual bars. Sadly it seems that nvd3 doesn't offer integrated crossfiltering, and while dc offers this, when using the brush, hover tooltips get disabled because of the brush clip layer. I would really, really like to have both brush and tooltips. I may have to roll may own.Barrows

© 2022 - 2024 — McMap. All rights reserved.