| 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: Thu, 31 Jul 2025 10:30:36 GMT
etag: W/"687e6266-969d"
expires: Thu, 31 Jul 2025 10:40:36 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 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: 27e7ad4deddfd03d9981a243ee681aaeab7c7a93
x-github-request-id: 6F0A:1F5310:7964D:8F80B:688B45CC
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210061-BOM
x-timer: S1753957836.423006,VS0,VE217
x-vercel-cache: MISS
x-vercel-id: bom1::dskcl-1753957836410-e736f8512db5
content-length: 8412
Carpet plot in JavaScript
Carpet Plot in JavaScript
How to make D3.js-based carpet plots in Plotly.js.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
var data = {
type: 'carpet',
y: [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10]
}
var data = [data]
Plotly.newPlot('myDiv', data);
var data = {
type: 'carpet',
a: [4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 6, 6, 6],
b: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3],
y: [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10]
}
var data = [data]
Plotly.newPlot('myDiv', data);
var data = {
type: 'carpet',
a: [4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 6, 6, 6],
b: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3],
y: [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10],
aaxis: {
tickprefix: 'a = ',
ticksuffix: 'm',
smoothing: 1,
minorgridcount: 9
},
baxis: {
tickprefix: 'b = ',
ticksuffix: 'Pa',
smoothing: 1,
minorgridcount: 9
}
}
var data = [data]
Plotly.newPlot('myDiv', data);
var trace1 = {
type: "carpet",
a: [4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 6, 6, 6],
b: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3],
y: [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10],
aaxis: {
tickprefix: 'a = ',
ticksuffix: 'm',
smoothing: 1,
minorgridcount: 9,
minorgridcolor: 'white',
gridcolor: 'white',
color: 'white'
},
baxis: {
tickprefix: 'b = ',
ticksuffix: 'pa',
smoothing: 1,
minorgridcount: 9,
minorgridcolor: 'white',
gridcolor: 'white',
color: 'white'
}
}
var layout = {
plot_bgcolor: 'black',
paper_bgcolor: 'black'
}
Plotly.newPlot('myDiv', [trace1], layout)
To add points and lines see Carpet Scatter Plots or to add contours see Carpet Contour Plots