stretched chord

• Quick Reference
• API

Quick Reference

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

const options = {
	chart: {
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},
	data: {
		source: { name: 'Color', accessor: 'color' },
		target: { name: 'Clarity', accessor: 'clarity' },
		link: {name: 'Price', accessor: 'price'}
	},
	plots: {
		emptyPercent: 0.001,
		chordPadding: 0.0002
	}
};

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

API

Default options:

 {
    chart: {
        type: 'stretched-chord',
    },
    data:{
        source: {
            accessor: null,
            name: null,
            formatter: null
        },
        target: {
            accessor: null,
            name: null,
            formatter: null
        },

        link: {
            accessor: null,
            name: null,
            formatter: null
        }
    },
    color: DefaultCategoricalColor,
    plots: {
        innerRadiusRatio: 0.95,
        opacityDefault: 0.7, //default opacity of chords
        opacityLow: 0.02, //hover opacity of those chords not hovered over
        pullOutSize: 150, //How many pixels should the two halves be pulled apart
        fontSize: '16px',
        emptyPercent: 0.01, //What % of the circle should become empty
        chordPadding: 0.02
    },
}

plots.innerRadiusRatio

inner radius ratio. 0.95 by default

plots.opacityDefault

default opacity of chords. 0.7 by default

plots.opacityLow

hover opacity of those chords not hovered over. 0.02 by default

plots.pullOutSize

How many pixels should the two halves be pulled apart. 150 by default

plots.fontSize

font size. 16px by default

plots.emptyPercent

What % of the circle should become empty. 0.01 by default

plots.chordPadding

padding between chords 0.02 by default