ChordDiagram

Chord Chart that takes multiple sources and targets and compares their values relative to each other.

Configuration Options

animationDuration

Type: number
Default: 750
Units: milliseconds

undefined

arcWidth

Type: number
Default: 25
Units: px

Width of the outer arc

chartName

Type: string
Default: "ChordDiagram"

Name of chart for reporting

height

Type: number
Default: 250
Units: px

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

labelTextColor

Type: color
Default: "#FFFFFF"

Color of the arc labels

labelTextSize

Type: number
Default: 13
Units: px

Outer radius of the arcs in the chord diagram

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

Font Family for the labels and tooltip text

tooltipFontSize

Type: number
Default: 12
Units: px

undefined

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 250
Units: px

Data Definition

Source

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined && this.accessor(d) !== ''; }

Default accessor:

function (line) { return String(line[0]); }

Target

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined && this.accessor(d) !== ''; }

Default accessor:

function (line) { return String(line[1]); }

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) > 0; }

Default accessor:

function (line) { return parseFloat(line[2]); }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['Britain', 'France', 22.4],
  ['Britain', 'Greece', 0.55],
  ['Britain', 'Italy', 26],
  ['Britain', 'Portugal', 19.4],
  ['Britain', 'United States', 345],

  ['France', 'Germany', 53.8],
  ['France', 'Greece', 53.9],
  ['France', 'Ireland', 17.3],
  ['France', 'Italy', 366],
  ['France', 'Japan', 7.73],
  ['France', 'Portugal', 18.3],
  ['France', 'Spain', 118],
  ['France', 'United States', 322],

  ['Germany', 'Britain', 321],
  ['Germany', 'Greece', 19.3],
  ['Germany', 'Ireland', 48.9],
  ['Germany', 'Portugal', 32.5],
  ['Germany', 'Spain', 57.6],
  ['Germany', 'United States', 324],
  
  ['Ireland', 'Britain', 12],
  ['Ireland', 'Greece', 0.34],
  ['Ireland', 'Spain', 6.38],
  ['Italy', 'Germany', 111],
  ['Italy', 'Greece', 3.22],
  ['Italy', 'Ireland', 2.83],
  ['Italy', 'Portugal', 0.87],
  
  ['Japan', 'Britain', 28.2],
  ['Japan', 'Germany', 88.5],
  ['Japan', 'Greece', 1.37],
  ['Japan', 'Ireland', 18.9],
  ['Japan', 'Italy', 38],
  ['Japan', 'Portugal', 2.18],
  ['Japan', 'Spain', 25.9],
  ['Japan', 'United States', 796],

  ['Portugal', 'Greece', 10.1],
  ['Portugal', 'Ireland', 3.77],
  ['Portugal', 'United States', 0.52],
  
  ['Spain', 'Britain', 326],
  ['Spain', 'Greece', 0.78],
  ['Spain', 'Italy', 9.79],
  ['Spain', 'Portugal', 62],
  ['Spain', 'United States', 163],

  ['United States', 'Greece', 3.1],
  ['United States', 'Ireland', 11.1],
  ['United States', 'Italy', 3.16]
];

var aHeight = 400;
var aWidth = 400;

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: 500,
    width: 500
  })
  .append('g')
  .attr('transform', 'translate(50,50)')
  .chart('ChordDiagram')
  .c({
    width: aWidth,
    height: aHeight,
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);