d3-chord

What is d3-chord?

The d3-chord npm package is a part of the D3.js library that provides tools for creating chord diagrams. Chord diagrams are a graphical method of displaying the inter-relationships between data in a matrix format. This package is particularly useful for visualizing complex relationships in a clear and aesthetically pleasing way.

What are d3-chord's main functionalities?

Generate Chord Layout

This feature allows you to generate a chord layout from a given matrix. The code sample demonstrates how to create a chord layout with padding between groups and sorting subgroups in descending order.

const d3 = require('d3-chord');
const matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];
const chord = d3.chord().padAngle(0.05).sortSubgroups(d3.descending);
const chords = chord(matrix);
console.log(chords);

Create Ribbon Paths

This feature allows you to create ribbon paths for the chords. The code sample demonstrates how to create a ribbon path with a specified radius.

const d3 = require('d3-chord');
const ribbon = d3.ribbon().radius(200);
const pathData = ribbon({
  source: {startAngle: 0, endAngle: Math.PI / 2, radius: 200},
  target: {startAngle: Math.PI, endAngle: 3 * Math.PI / 2, radius: 200}
});
console.log(pathData);

Customize Chord Diagram

This feature allows you to customize the chord diagram by adjusting the padding angle and sorting the chords. The code sample demonstrates how to create a chord layout with a larger padding angle and sorting the chords in ascending order.

const d3 = require('d3-chord');
const chord = d3.chord().padAngle(0.1).sortChords(d3.ascending);
const matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];
const chords = chord(matrix);
console.log(chords);

Other packages similar to d3-chord

d3-sankey

The d3-sankey package is used for creating Sankey diagrams, which are another type of flow diagram that visualizes the flow of data between different nodes. While d3-chord focuses on relationships in a matrix format, d3-sankey is more suited for visualizing the flow of quantities between different stages or categories.

d3-hierarchy

The d3-hierarchy package is used for creating hierarchical layouts such as tree diagrams, cluster diagrams, and treemaps. Unlike d3-chord, which is used for visualizing relationships in a matrix, d3-hierarchy is used for visualizing hierarchical data structures.

d3-force

The d3-force package is used for creating force-directed graphs, which are used to visualize networks of nodes and links. While d3-chord is used for visualizing relationships in a matrix, d3-force is more suited for visualizing network structures where nodes are connected by links.

README

d3-chord

Visualize relationships or network flow with an aesthetically-pleasing circular layout.

Installing

If you use NPM, npm install d3-chord. Otherwise, download the latest release. You can also load directly from d3js.org, either as a standalone library or as part of D3 4.0 alpha. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3_chord global is exported:

<script src="https://d3js.org/d3-path.v0.1.min.js"></script>
<script src="https://d3js.org/d3-chord.v0.0.min.js"></script>
<script>

var ribbon = d3_chord.ribbon();

</script>

Try d3-chord in your browser.

API Reference

# d3.ribbon()

…