| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Mon, 28 Jul 2025 07:59:55 GMT
etag: W/"687e6267-b92f"
expires: Mon, 28 Jul 2025 08:09:55 GMT
last-modified: Mon, 21 Jul 2025 15:53:11 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 13dbf0e7f65f34ade4c15e65b49da50496ad260d
x-github-request-id: F168:15E774:1C7E7B:21BDBD:68872DF3
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210066-BOM
x-timer: S1753689595.969337,VS0,VE217
x-vercel-cache: MISS
x-vercel-id: bom1::bt458-1753689594930-cd154c59f95c
content-length: 9685
Parallel coordinates plot in JavaScript
Parallel Coordinates Plot in JavaScript
How to make D3.js-based parallel coordinates plots in Plotly.js.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
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: 
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);
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);
});
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);
});
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);
});