"Horizontal" Chord Diagram or alternative for correlated data

[Veronica Alfaro]

Hello everyone!

I'm new to the group and quite new to d3 too. A friend and I are trying to develop a visualization for data belonging to protein databases. We created some conceptual artwork (see conceptual_artwork.jpg) and now are replicating it as close as possible.

We are using fake data at the moment, just to create the basic architecture. The result so far is this (d3_sketch.jpg). We've sort of reached an impasse because we can't seem to connect paths (or lines/beziers/curves) between the upper and the lower sets of data.

The dataset on top (gray boxes) has a unique sequential number (1, 2, 3) and a type of mutation (i.e. Frameshift). The dataset on the bottom represents all those mutations (i.e. The first green box represents all type=Frameshift mutations). The correlation (the path between the two graphics) should occur when an index in the top data set and an index the lower dataset share the same "type" 

I've also added the html file. We looked into the chord diagram that creates paths between correlated data but it only seems to work for circular visualizations. We also looked into d3.cluster because it correlated data precisely using curved lines, but it seems the overall look and feel of it uses circular nodes and this can not be changed.

Any suggestion as to what other type of layout we could use or how to modify an already existing layout would be greatly appreciated. We're also willing to do it "from the ground up", but we haven't been able to come up with a function that tracks the position of every index inside our data (the squares) so that we can then draw lines.

Thanks in advance.

P.S, (We are mostly designers, so I apologize if this question is overall silly or simple, we're still trying to get the hang of it!).

[Angela Ambroz]

Hi Veronica,

It sounds like you may be able to get what you want with a simplified Sankey diagram. Here's Mike Bostock's short discussion and example. And here's a slightly more involved walk-through by d3noob. Another nice example, similar in style to yours (top-to-bottom links). I haven't done this myself, but it sounds like you could conceptualize of your "types" as nodes, and the lines between them as "links". To use this layout type, you need to use both d3.js and the sankey.js plugin, which can be found here.

Also, if you guys are super-new and coming from design, Scott Murray's tutorials (and book) were hugely helpful in getting me off the ground. (Though perhaps you've already gone through them.)

And a completely silly thing, but I think you guys have a typo in your concept art and sketch: "Frameshit"! :)

a

[Philip Pedruco]

The conceptual_artwork chart remind's me of Jason Davies Parallel Set, although Parallel Coordinates might also suit your purposes.