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.

Set X and Y Coordinates

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);

Add Parameter Values

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);

Add A and B axis

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);

Style A and B axis

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)

Add Points and Contours

To add points and lines see Carpet Scatter Plots or to add contours see Carpet Contour Plots