Parallel Coordinates Plot in JavaScript

How to make D3.js-based parallel coordinates plots in Plotly.js.

Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.

Adding Dimensions

Parallel coordinates are richly interactive by default. Drag the lines along the axes to filter regions and drag the axis names across the plot to rearrange variables: IPython terminal

var trace = {
  type: 'parcoords',
  line: {
    color: 'blue'
  },
  
  dimensions: [{
    range: [1, 5],
    constraintrange: [1, 2],
    label: 'A',
    values: [1,4]
  }, {    
    range: [1,5],
    label: 'B',
    values: [3,1.5],
    tickvals: [1.5,3,4.5]
  }, {
    range: [1, 5],
    label: 'C',
    values: [2,4],
    tickvals: [1,2,4,5],
    ticktext: ['text 1','text 2','text 4','text 5']
  }, {
    range: [1, 5],
    label: 'D',
    values: [4,2]
  }]
};

var data = [trace]

Plotly.newPlot('myDiv', data);

Basic Parallel Coordinates Plot

d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/iris.csv', function(err, rows){

function unpack(rows, key) {
  return rows.map(function(row) {
    return row[key];
  });
}

var data = [{
  type: 'parcoords',
  pad: [80,80,80,80],
  line: {
    color: unpack(rows, 'species_id'),
    colorscale: [[0, 'red'], [0.5, 'green'], [1, 'blue']]
  },

  dimensions: [{
    range: [2, 4.5],
    label: 'sepal_width',
    values: unpack(rows, 'sepal_width')
  }, {
    constraintrange: [5, 6],
    range: [4,8],
    label: 'sepal_length',
    values: unpack(rows, 'sepal_length')
  }, {
    label: 'petal_width',
    range: [0, 2.5],
    values: unpack(rows, 'petal_width')
  }, {
    label: 'petal_length',
    range: [1, 7],
    values: unpack(rows, 'petal_length')
  }]
}];

var layout = {
  width: 800
};

Plotly.newPlot('myDiv', data, layout);

});

Annotated Parallel Coordinates Plot

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-id.csv', function(err, rows){

function unpack(rows, key) {
  return rows.map(function(row) {
    return row[key];
  });
}

var data = [{
  type: 'parcoords',
  pad: [80,80,80,80],
  line: {
    color: unpack(rows, 'species_id'),
    colorscale: [[0, 'red'], [0.5, 'green'], [1, 'blue']]
  },

  dimensions: [{
    range: [2, 4.5],
    label: 'sepal_width',
    values: unpack(rows, 'sepal_width')
  }, {
    constraintrange: [5, 6],
    range: [4,8],
    label: 'sepal_length',
    values: unpack(rows, 'sepal_length')
  }, {
    label: 'petal_width',
    range: [0, 2.5],
    values: unpack(rows, 'petal_width')
  }, {
    label: 'petal_length',
    range: [1, 7],
    values: unpack(rows, 'petal_length')
  }]
}];

var layout = {
  width: 800,
  annotations: [
	  {showarrow: false,
      text: 'Higher sepal width',
      x: 0, y: 1, xref: 'paper', yref: 'paper'},
	  {showarrow: false,
      text: 'Lower petal width and length',
      x: 0.9, y: .25, xref: 'paper', yref: 'paper'
    }]
};

Plotly.newPlot('myDiv', data, layout);

});

Advanced Parallel Coordinates Plot

d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/parcoords_data.csv', function(err, rows){

function unpack(rows, key) {
  return rows.map(function(row) {
    return row[key];
  });
}

var data = [{
  type: 'parcoords',
  line: {
    showscale: true,
    reversescale: true,
    colorscale: 'Jet',
    cmin: -4000,
    cmax: -100,
    color: unpack(rows, 'colorVal')
  },

  dimensions: [{
    constraintrange: [100000, 150000],
    range: [32000, 227900],
    label: 'Block height',
    values: unpack(rows, 'blockHeight')
  }, {
    range: [0, 700000],
    label: 'Block width',
    values: unpack(rows, 'blockWidth')
  }, {
    label: 'Cylinder material',
    tickvals: [0, 0.5, 1, 2, 3],
    ticktext: ['A', 'AB', 'B', 'Y', 'Z'],
    values: unpack(rows, 'cycMaterial')
  }, {
    label: 'Block material',
    tickvals: [0, 1, 2, 3],
    range: [-1, 4],
    values: unpack(rows, 'blockMaterial')
  }, {
    range: [134, 3154],
    label: 'Total weight',
    visible: true,
    values: unpack(rows, 'totalWeight')
  }, {
    range: [9, 19984],
    label: 'Assembly penalty weight',
    values: unpack(rows, 'assemblyPW')
  }, {
    range: [49000, 568000],
    label: 'Height st width',
    values: unpack(rows, 'HstW')
  }, {
    range: [-28000, 196430],
    label: 'Min height width',
    values: unpack(rows, 'minHW')
  }, {
     range: [98453, 501789],
     label: 'Min width diameter',
     values: unpack(rows, 'minWD')
  }, {
    range: [1417, 107154],
    label: 'RF block',
    values: unpack(rows, 'rfBlock')
  }]
}];

Plotly.newPlot('myDiv', data);

});