Animating ordering

[tummykung]

Example page: http://dataviz.pitchbook.com/founders/

I want to always sort the bars by values, but the animation is misleading as is. Specifically, when I click on "Electrical Engineering" the second bar goes from right to left. It doesn't show that B2B and B2C are swapped. It's difficult to notice that the text values have changed. Is there a way to animate the bar position swap?

[gordonwoodhull]

Hi @tommykung, yes, in general the transitions for all charts could be improved for cases where the domain changes. Here it's just the ordering but similar problems happen when bars are removed or added.

I've started creating "eyeball tests" for visual verification of transitions. Here is the one for row chart transitions; in particular your case is something like the reverse or backward case.

Interestingly, the same case does work for bar charts. So maybe you could use that instead, if it works for you.

[gordonwoodhull]

Some background and links to related issues.

In general, dc.js charts do not use keyed joins as they should, #507. However, the coordinate grid charts use d3.scale.ordinal to put the x values in the right order, so it often doesn't matter that the data is out of order. (Except if you are a line chart, #598.)

The row chart does not use a scale at all for its Y axis. So that's one possible solution, although keyed joins would be better.