chord

• Quick Reference
• API

Quick Reference

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);

API

Default options:

{
    chart: {
        type: 'chord',
    },
    color: DefaultCategoricalColor,
    data: {
        source: {
            accessor: null,
            name: null,
            formatter: null
        },
        target: {
            accessor: null,
            name: null,
            formatter: null
        },

        links:[
            {
                accessor: null,
                name: null,
                formatter: null
            },
            {
                accessor: null,
                name: null,
                formatter: null
            }
        ]
    },
    plots: {
        drawTicks: true
    },
    ordering: {
        name: 'row', //row, column or volume
        direction: 'asc'
    }
}

plots.drawTicks

Draw ticks outside of chord chart

ordering.name

ordering method for groups, could be 'row', 'column' or 'volume'. 'row' by default

source

source nodes

target

target nodes

links

could be 1 or 2 links