plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Parallel Coordinates Plot in plotly.js

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

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.plot('graphDiv', data);
Plotly.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.plot('graphDiv', data, layout);
  
});
Plotly.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.plot('graphDiv', data);

});
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.