Transitions on stacked column charts

[Jeff Friesen]

It looks like you've got transitions built in based on this example:
http://visible.io/charts/donut/basic.html

I tried to recreate this with the stacked column charts with no luck. Not only is the transition instant, the mixins don't follow.

What approach would I take to make this transition nicely as in the donut chart example?

'use strict';

$(document).ready(function(){

  var generateData = function() {
    var data = [
      { year: '2010', unitsSold: 0, salesman : 'Bob' },
      { year: '2011', unitsSold: 0, salesman : 'Bob' },
      { year: '2012', unitsSold: 0, salesman : 'Bob' },
      { year: '2013', unitsSold: 0, salesman : 'Bob' },
      { year: '2014', unitsSold: 0, salesman : 'Bob' },
      { year: '2010', unitsSold: 0, salesman : 'Gina' },
      { year: '2011', unitsSold: 0, salesman : 'Gina' },
      { year: '2012', unitsSold: 0, salesman : 'Gina' },
      { year: '2013', unitsSold: 0, salesman : 'Gina' },
      { year: '2014', unitsSold: 0, salesman : 'Gina' },
      { year: '2010', unitsSold: 0, salesman : 'Average' },
      { year: '2011', unitsSold: 0, salesman : 'Average' },
      { year: '2012', unitsSold: 0, salesman : 'Average' },
      { year: '2013', unitsSold: 0, salesman : 'Average' },
      { year: '2014', unitsSold: 0, salesman : 'Average' }
    ]
    _.each(data, function(obj){
      obj.unitsSold = _.random(-500, 500)
    })
    return data;
  }

  var chart = d4.charts.stackedColumn()
                .outerWidth($('#example').width())
                .x(function(x){ return x.key('year') })
                .y(function(y){ return y.key('unitsSold') })
                .mixin({
                  'name' : 'zeroLine',
                  'feature' : d4.features.referenceLine
                })
                .using('zeroLine', function(zero) {
                  zero
                    .x1(0)
                    .x2(function(){ return this.width })
                    .y1(function(){ return this.y(0) })
                    .y2(function(){ return this.y(0) });
                });
  var redraw = function() {
    var data = generateData()
    var parsedData = d4.parsers.nestedStack()
      .x('year')
      .y('salesman')
      .value('unitsSold')(data);

    d3.select('#example')
      .datum(parsedData.data)
      .call(chart);
  };

  (function loop() {
    redraw();
    setTimeout(loop, 3000);
  })();

});

(this screenshot taken after several cycles)

(btw, I love the approach d4 is taking. Really excited to have found this)

[Jeff Friesen]

I've tried this but doesn't work:

d3.select('#example')
      .datum(parsedData.data)
      .transition().duration(500)
      .call(chart);

[Mark Daggett]

Hey @jefffriesen
Transitions are a work in progress right now and unfortunately will not work for all chart types right now. Mostly this is due to the fact that when I started writing d4 it was done as work for hire for a company that needed static charts used in dynamically generated presentations. As such there was no need for transitions. Unfortunately, it appears transitions are not something that i'll be able to bolt on and I am presently working through the implications of restructuring the rendering routines to support them.

I took a stab at the new structure with the donut chart as you pointed out, and I've taken another shot at it here:
http://visible.io/charts/column/dynamic-update.html

The differences between the two is that the donut uses the unique key property that d3 expects in order to handle the tweening, the dynamic column chart merely redraws the chart over again. Feel free to hack around on this feature if you want I am actively looking for collaborators ;-)

I have an open issue dedicated to transitions here:
#4

[Jeff Friesen]

@heavysixer
Thanks for the update and the example. That helps. I saw #4 but I didn't know if the intention was tweened transitions or just updating charts based on data model changes.

Ultimately what I'm looking for is a d3 charting lib that I can use within a React.js app (if you have examples I would love to see that). Charting libraries, and especially transitions, have their own set of challenges with React that I haven't yet solved. So far I like the approach of this library the best.

I've used dc.js quite a bit and it's great - but there are some rough edges. And something more low-level like this may be easier to integrate with React.

On one hand, tweened transitions are somewhat of a bonus. On the other hand, they can make a big different in interpreting changing data.

If I do start using this library heavily I would love to contribute what I can. At some point I would need a geo map and a heat map, so maybe I could contribute that.

I'm not sure if you want to close this ticket or leave it open because you're planning on working on transitions. I'll leave that up to you.

[Mark Daggett]

@jefffriesen
I'll go ahead and close this ticket since #4 is where i'm tracking the transition discussion. I completely agree with you in regards to the benefits of tweening transitions and so I would love to fully support them at some point. In regards to tracking model changes, this is something better handled by something like crossfilter, which is why d4 doesn't have any concept of the data itself, meaning the data is passed directly into d3 and merely iterated over by d4. This is done so that d4 could offer some tie-in like dc at some point like you pointed out. Glad you like the approach to d4, please let me know if you hit any more snags.