Chord

Chord shows directed relationships among entities. This work is based on delimited.io's Chord Transition
Home / Demo / Chord
Chord

Renderer: SVG

Doc: API

Data: International Trade Flows (1870 - 2005) from Correlates of War

import { chord } from 'vizart-path';
import 'vizart-path/dist/vizart-path.css';

const options = {
	chart: {
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},
 data: {
		source: { accessor: 'importer1', },
		target: { accessor: 'importer2', },
		links: [
			{ accessor: 'flow1', },
			{ accessor: 'flow2', },
		]
	}
};

const _data = [
	{ importer1: 'U.S.', importer2: 'China', flow1: 132, flow2: 32 }
]

const _chart = chord('#chart', options);
_chart.render(_data);