plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Carpet Scatter Plot in plotly.js

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

var trace1 = {
  type: 'carpet',
  a: [4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 6, 6, 6].map(a => a * 1e-6),
  b: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(b => b * 1e6),
  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 = [trace1]

Plotly.plot('graph', data)
var trace1 = {
  type: 'carpet',
  a: [4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 6, 6, 6].map(a => a * 1e-6),
  b: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(b => b * 1e6),
  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 trace2 = {
  type: 'scattercarpet',
  a: [4, 4.5, 5, 6].map(a => a * 1e-6),
  b: [1.5, 2.5, 1.5, 2.5].map(b => b * 1e6),
  line: {shape: 'spline', smoothing: 1}
}

var data = [trace1,trace2]

Plotly.plot('graph', data)
var trace1 = {
      type: "carpet",
      a: [0.1, 0.2, 0.3],
      b: [1, 2, 3],
      y: [
        [1, 2.2, 3],
        [1.5, 2.7, 3.5],
        [1.7, 2.9, 3.7]
      ],
      cheaterslope: 1,
      aaxis: {
        title: "a",
        tickmode: "linear",
        dtick: 0.05,
        minorgridcount: 9
      },
      baxis: {
        title: "b",
        tickmode: "linear",
        dtick: 0.5,
        minorgridcount: 9
      }
    }

var trace2 = {
  type: "scattercarpet",
  name: "b = 1.5",
  a: [0.05, 0.15, 0.25, 0.35],
  b: [1.5, 1.5, 1.5, 1.5]
}

var trace3 = {
  type: "scattercarpet",
  name: "b = 2",
  a: [0.05, 0.15, 0.25, 0.35],
  b: [2, 2, 2, 2]
}

var trace4 = {
  type: "scattercarpet",
  name: "b = 2.5",
  a: [0.05, 0.15, 0.25, 0.35],
  b: [2.5, 2.5, 2.5, 2.5]
}

var trace5 = {
  type: "scattercarpet",
  name: "a = 0.15",
  a: [0.15, 0.15, 0.15, 0.15],
  b: [0.5, 1.5, 2.5, 3.5],
  line: {
        smoothing: 1,
        shape: "spline"
  }
}

var trace6 = {
  type: "scattercarpet",
  name: "a = 0.2",
  a: [0.2, 0.2, 0.2, 0.2],
  b: [0.5, 1.5, 2.5, 3.5],
  line: {
        smoothing: 1,
        shape: "spline"
  },
  marker: {
        size: [10, 20, 30, 40],
        color: ["#000", "#f00", "#ff0", "#fff"]
  }
}

var trace7 = {
  type: "scattercarpet",
  name: "a = 0.25",
  a: [0.25, 0.25, 0.25, 0.25],
  b: [0.5, 1.5, 2.5, 3.5],
  line: {
        smoothing: 1,
        shape: "spline"
  }
}

var data = [trace1,trace2,trace3,trace4,trace5,trace6,trace7]

var layout = {
  title: "scattercarpet extrapolation, clipping, and smoothing",
  hovermode: "closest"
}

Plotly.plot('graph', data, layout)
Still need help?
Contact Us

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