Giter Club home page Giter Club logo

d3-chord's Introduction

D3: Data-Driven Documents

D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.

Resources

d3-chord's People

Contributors

dependabot[bot] avatar fil avatar mbostock avatar stof avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

d3-chord's Issues

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

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.

Capture d’écran 2020-09-17 à 11 22 22

Capture d’écran 2020-09-17 à 11 22 33

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

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 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.

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?

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.

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:

Screen Shot 2019-11-21 at 1 17 27 PM

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:

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

and
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.

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.