Buildup chord transition in chord layout visualisation

[Chris Hagan]

Hi, folks!

May I please ask for some advice?

I'm trying to make a chord diagram like the ones in

http://fleetinbeing.net/d3e/chord-nosort.js  or 

http://exposedata.com/tutorial/chord/latest.html.

I have 50 groups who interrelate, and those relationships built up over time.  I have a snapshot of each state during that buildup period (there are 100 or so).  So the first state had no relationships, the second state had 1, the third had 2, the fourth changed the magnitude of the first relationship, etc.  I'd like to show an animation of the relationships building up from scratch, and have tried to adapt the referenced examples without success:

    var matrices = progressiveMatrix(matrixRoot)

    var chord = d3.chart.chord({

        container:containerSelector,

        fill:d3.scale.category20()

    });

    var i = 0;

    setInterval(function(){

        chord.update(matrices[i++]);

    },2000);

The 'update' function is taken from http://exposedata.com/tutorial/chord/chord-latest.js, and the 'chord-fixed' version of d3 has also been taken from the location.

I get the ticks updating correctly, but can't seem to get the chords showing at all.

Is there something wrong with the idea of having a set of matrices transitioning into each other which look like this?

[]

[[0,1],[1,0]]

[[1,1],[1,1]]

[[1,1,0],[1,1,1],[0,1,0]]

Could it be something to do with the fact that things are being added and there are thus no transition start points for some of the keyed items?

Thanks for any help that anyone can offer.

c

[Kai Chang]

Unfortunately those versions do not support changing array sizes, or
even 0 values in the array.

I built those examples mostly to learn about using many of the
advanced features in d3.js, but I haven't yet integrated enter() and
exit() into the transitions to add/remove missing elements.

I planned to return to it in a few weeks or months and use the newly
specified Chart API:

http://bost.ocks.org/mike/chart/

If you're interested in fixing these issues before then, I'd be glad
to answer any questions you have and integrate solutions into the
examples. Once the chart is a bit more robust, I'd like to add it to
the d3 plugins repository.

[Chris Hagan]

Wow, thanks for the quick response, Kai!

Okay, so if I can't do zero-length or add elements, what if I pre-parsed the end data state, and added all the elements that would eventually be in the set, at zero relationships?

So, instead of this (which relies on both zero-length AND add-elements),

[]

[[0,1],[1,0]]

[[1,1],[1,1]]

[[1,1,0],[1,1,1],[0,1,0]]

I would have this:

[[0,0,0],[0,0,0],[0,0,0]]

[[0,1,0],[1,1,0],[0,0,0]]

[[1,1,0],[1,1,0],[0,0,0]]

[[1,1,0],[1,1,1],[0,1,0]]

Thus, similarly lengthed and square matrices all the way.  Can you see any obvious problems with doing it this way?

c

[Kai Chang]

That does simplify the problem to just zero values.

The correct behavior would:

Remove chords with two zero values
When a chord has one zero, render that anchor as a thin line
Index chords by i,j indices
Remove arcs with all zero values

Does that seem correct? I'll take a closer look at this tomorrow.

[Chris Hagan]

Yes, that sounds about right.  If it would be simpler I could settle for not removing the zeroed ones, as I would imagine they'd just sort of cluster at the top in a stack of 0 width arcs, no?

I very much appreciate your looking at this.

c

[Chris Hagan]

Ah, they don't "just cluster at the top" - they cause NaN parse errors in my svg.  Hm.  What's the cleanest way to deal with this?

c

[Kai Chang]

Hey Chris, can I check out your latest version of this? Even if it's
super buggy.

I've been trying to fix my examples so they can do this, but it's
tricky and I'm not sure where is the best place to fix things.

[Chris Hagan]

Absolutely.  I did get it working - there were a few places it needed tweaking, in particular handling the zero cases with inoffensive path structures.  I'll post something here on Monday, look forward to seeing how you can improve on it :D

c

[Chris Hagan]

Sorry, big week came up.  It's on my list :(

c

[kyle....@cci-sa.co.za]

I was wondering does anybody know how to pass outside values to the matrix array. I am trying to make a chord diagram that updates automatically via sql database

[Bradley Spatz]

Here are some ideas on generating the data matrix...sourcing from SQL/database might fit with this approach.  Good luck!

http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3