dc.js animated selection along x-axis

Question

I'd like to have dc.js chart which slides along a selection, e.g. in the Nasdaq example https://dc-js.github.io/dc.js/ you would select a sub-selection of time then click "animate" button and the selection filter would slide along the x-axis at a pre-determined step size.

I'm a bit lost as to where one would start...does anyone have any ideas?

Question is clear to me. I am very frustrated with people voting to close questions just because they don't understand them! — Gordon

Gordon Gordon · Accepted Answer · 2017-11-06T21:23:52

Most of what you need to do is set the current filter on the relevant chart based on a timer, instead of based on user interaction.

I've copied the relevant parts of the Nasdaq example into a fiddle to illustrate this: https://jsfiddle.net/0zkbyyqu/9/

Once the charts are in place, the animation is just a matter of changing the filter based on a setInterval. For obscure reasons, we want to use the focus method of the moveChart, not the filter method, but it's essentially doing the same thing, with a little more code to reflect the changes in the range chart:

var beginYear = 1985;
window.setInterval(function() {
  moveChart.focus([
    new Date(beginYear, 0,0,0,0,0,0),
    new Date(beginYear+3, 0,0,0,0,0,0)]);
  if(++beginYear > 2009)
    beginYear = 1985;
}, 1000);

(If you were using the filter method, you'd have to construct a dc.filters.RangedFilter, as detailed here: Initial Range selection in DC.js chart)

I have left off your idea about the initial selection of the range coming from the user, and just gone with a range of 3 years. This example just starts animating as soon as it is loaded. You can fetch the current filter using chart.filter(); the result will be a RangedFilter, which is an array of two dates. Hopefully it is clear how to add start/stop buttons to the animation.

A couple of things are tricky about this approach:

It's tricky using a chart with transitions when you also have a timer or streaming data. In this case, I had to reduce the transitionDuration to 500ms for it to make any sense, but the cause-and-effect is still a little confusing. Not sure what to do about this.
The area chart transitions are incorrect so you get some weird artifacts.

dc.js animated selection along x-axis

1 Answers