plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Carpet Plot in plotly.js

How to make D3.js-based carpet plots in Plotly.js.

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.plot('plotly-div', 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.plot('plotly-div', 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.plot('plotly-div', 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.plot('graph', [trace1], layout)
To add points and lines see Carpet Scatter Plots or to add contours see Carpet Contour Plots
Still need help?
Contact Us

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