Scrollable Horizontal Bar Chart

[jsmedmar]

Would like to see what other developers think about making barcharts with many categories brushable.

Something like:

http://bl.ocks.org/nbremer/4c015860931fb6a13afc7bac51f40b43

I've found myself having very cluttered charts and this would certainly help. I'd really like to take on the task but I'd appreciate any suggestions on where to start since this would be my first contribution to dc.js.

[gordonwoodhull]

I see this more as an example of scrolling rather than selection brushing. It's tricky to think how this would interact with selection since if you selected something and then scrolled away, you'd no longer see what's selected.

OTOH if it selected just the visible rows (and filtered accordingly), would that be useful? Maybe.

With those reservations, there are lots of requests for some kind of row chart scrolling, so this would probably be a popular addition.

EDIT: hmm I guess the scroll part could be colored differently so that it's clear what's selected.

[jsmedmar]

Yes, you are correct. I was referring more to scrolling rather than selection brushing. The real problem is scrolling.

It's tricky to think how this would interact with selection since if you selected something and then scrolled away, you'd no longer see what's selected.

• Selection perhaps could be reflected on the full view on the right. However, that view will also be affected when many categories exist and the width of the bar goes to zero.

OTOH if it selected just the visible rows (and filtered accordingly), would that be useful? Maybe.

• Won't work for my particular scenario. I need to select any random bar.

I've seen other people use tables and add a small bar in each row to provide users with a notion of contribution. Given that the concerns you have raised present real challenges, I think I might explore more carefully the tables option.

[gordonwoodhull]

Good thoughts.

However, that view will also be affected when many categories exist and the width of the bar goes to zero.

That's a very good point, but maybe it means that selection should be indicated some other way, like having a different background as well as a different bar color. Or little arrows that show up when the selected bars are too tiny to see. :wink:

Whatever you do come up with, please share it on the users group or link to it here. Lots of people are running into these same problems.

[petermumford]

This would be a great feature to have

[gordonwoodhull]

Here is one good way that @ialarmedalien figured out to to scroll a row chart, by separating the axis into a separate chart and then using overflow-y: auto on the row chart: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1

[karinebo]

Thank you @gordonwoodhull this example really helped me!

[slipss]

@gordonwoodhull I am trying to use your implementation to get the row chart with scroll able axis bar, but in axis.js I keep getting an error saying

TypeError: _chart.transitionDelay is not a function

Am I missing something in your code?

[gordonwoodhull]

Hi @slipss, I didn't write axis.js but I suspect the problem is that you are using too early a version of dc.js. It looks like that feature was introduced in 2.0 beta 33.

[slipss]

hmm I am using 2.1.0-dev, it says it has transitionDelay(), I am using queue.js before this but I assume that wouldnt cause an issue.

[gordonwoodhull]

Yes 2.1.0-dev is an abomination that should not exist. Sorry about that, I've never been able to delete it from npm. "dev" is not a valid part of a version. IIRC that version is older than any of the 2.0 betas.

As of today, please use 2.2.1 or 3.0.6 (depending if you want d3v3 or d3v5).

[slipss]

Okay, I switched off 2.1.0-dev which worked, thanks!

[gordonwoodhull]

I needed scrolling rows with dc@4, so I minimally ported @ialarmedalien's axis chart here:

https://gist.github.com/gordonwoodhull/13689975c3ec069a4e0bef380846157b

For some reason I also had to set the height of the containing div.