d3 / d3-chord

Visualizations relationships or network flow with a circular layout.

d3-chord

Chord diagrams visualize relationships or network flow between a set of nodes in a graph with an aesthetically-pleasing circular layout.

Resources

• Documentation
• Examples
• Releases
• Getting help

d3-chord's Issues

problems with chord.js in a non-observable environment

The function range line 3-5 in chord.js does not work in a non-observable environment. It gives an array of "undefined" values.

Solution:

function range(i,j) { return [...Array(j-i).keys()].flatMap(j=>j+i) }

In line 100 of chord.js empty chords should be removed by chords = Object.values(chords);
But this also leaves e.g. "functions" in chords and breaks the compareValue function in lines 7-14

Solution:

chords = chords.filter(Object);

Ribbon shape.

Alphanumeric labels?

Hi,

I'm trying to draw a chord-graph using this script that has two letters as the labels. When I upload the file on Circos, it creates the graph I'm looking for, yet when I try it with this script, I get just a blank page.

What do I have to modify to get it to work?

This is the var matrix I'm using:

var matrix = [
['', 'AF', 'AS', 'EU', 'NA', 'OC', 'SA'],
['AF', 1, 0, 0, 0, 0, 0],
['AS', 6, 79, 0, 0, 0, 0],
['EU', 0, 57, 0, 0, 0, 0],
['NA', 0, 4, 160, 4, 0, 0],
['OC', 0, 17, 0, 0, 0, 0],
['SA', 0, 0, 4, 29, 0, 0],
];

Thanks in advance.

creating a matrix

The first is a reference file (chr03) which contains one long sequence (35020413 characters long) and the other file contained multiple sequences with different lengths and different ids (tig00007144, tig00026480,...). I used an alignment software called BLAST to align these two sequences. The original alignment results are stored in tab separated file:

tig00007144	chr03	23113	30824	33203431	33211142
tig00026480	chr03	1	48387	35010628	34962190
tig00003221	chr03	16916	29961	2127862	2140878
tig00010111	chr03	218	6989	23106738	23113500
tig00000318	chr03	1	18244	28621116	28639312
tig00009327	chr03	32147	40878	34160279	34151526
tig00025208	chr03	65878	79311	17006900	17020370
tig00019172	chr03	43720	50583	23113500	23106638
tig00004923	chr03	44154	50849	21159875	21153164

This is the column explanation:

• query_name = column 0
• subject_name = column 1
• query_start = column 2
• query_end = column 3
• subject_start = column 4]
• subject_end = column 5

I would like to see which parts (tig00007144, tig00026480, ...) mapping where to chr03.

Any idea how to create such matrix?

Thank you in advance.

Michal

How can I draw two or more ribbon between two groups

Ribbon with arrow shape.

Network layout.

Should there be separate layouts for bidirectional flow vs. unidirectional flow? See comment on d3/d3-shape#7.

Should the network take a matrix as input? Or perhaps it should take a list of nodes and a list of weighted links, more like the force layout?

Ribbon positioning in canvas

We are building a force-direct diagram with chords diagrams at each node. We experienced a bug, chords are fixed at the origin of the canvas without any possibility of positioning.

Question about sub-groups

Hi,

I guess that the following feature (object hierarchy on the circumference) is not directly supported, but just to make sure, can anyone please explain what are "subgroups" as per the readme of this module? I'm not entirely sure about the groups and subgroups terminology in the docs for chord diagrams.

Thanks in advance!

Twisted ribbons between nearby nodes

This is a fantastic layout module and you can do some really wonderful things with!

There is one issue however that is rather difficult to get around from the consumer's side. When drawing ribbons between nearby nodes, they often get "twisted" as follows:

There's two factors that make this artifact more apparent:

• The angular proximity between the two nodes
• The difference in angular widths (endAngle-startAngle) of the source and the target

Afaict, this cannot be counteracted by manipulating any of the ribbon accessor methods.

I believe this is because when computing the two arcs that connect the sides of the ribbon between the source and target, they're both centered at 0,0:

d3-chord/src/ribbon.js

Line 51 in d07a378

context.arc(0, 0, sr, sa0, sa1);

and

d3-chord/src/ribbon.js

Line 54 in d07a378

context.arc(0, 0, tr, ta0, ta1);

So, in certain cases the two arcs actually cross each other because their closest point to the center is happening at different angles. This results in the visual "twist".

Perhaps a resolution would be to shift the arc center of the shorter arc closer to the edge of the diagram, just enough so that the two arcs never cross.

Documentation.

Change chord subgroup default order?

The default subgroup order is range(0, n), which is the same for all groups, and means that chords emanating from a group will often cross paths.

The .sortSubgroups() option allows to reorder the chords according to their values (ie matrix[i,j]), but not to the geometry (ie., is group i to the left or right of j?).

This fork of https://github.com/d3/d3-chord/blob/master/src/chord.js creates a new default order: [i-1, i-2…0, i, n, n-1, n-2… i+1]

With this approach we can limit the number of crossing paths without having to actually care about the actual geometry.

(If this seems useful we'll have to think about a meaninful API.)