Carpet Scatter Plot in JavaScript

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

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Basic Carpet Plot

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.newPlot('myDiv', data)

Add Carpet Scatter Trace

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.newPlot('myDiv', data)

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n type: 'carpet',\n a: [4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 6, 6, 6].map(a => a * 1e-6),\n b: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(b => b * 1e6),\n y: [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10],\n aaxis: {\n tickprefix: 'a = ',\n ticksuffix: 'm',\n smoothing: 1,\n minorgridcount: 9,\n },\n baxis: {\n tickprefix: 'b = ',\n ticksuffix: 'Pa',\n smoothing: 1,\n minorgridcount: 9,\n }\n}\n\nvar trace2 = {\n type: 'scattercarpet',\n a: [4, 4.5, 5, 6].map(a => a * 1e-6),\n b: [1.5, 2.5, 1.5, 2.5].map(b => b * 1e6),\n line: {shape: 'spline', smoothing: 1}\n}\n\nvar data = [trace1,trace2]\n\nPlotly.newPlot('myDiv', data)\n"}">

Add Multiple Carpet Scatter Traces

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: {
          text: "a"
        },
        tickmode: "linear",
        dtick: 0.05,
        minorgridcount: 9
      },
      baxis: {
        title: {
          text: "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: {
    text: "scattercarpet extrapolation, clipping, and smoothing"
  },
  hovermode: "closest"
}

Plotly.newPlot('myDiv', data, layout)

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n type: \"carpet\",\n a: [0.1, 0.2, 0.3],\n b: [1, 2, 3],\n y: [\n [1, 2.2, 3],\n [1.5, 2.7, 3.5],\n [1.7, 2.9, 3.7]\n ],\n cheaterslope: 1,\n aaxis: {\n title: {\n text: \"a\"\n },\n tickmode: \"linear\",\n dtick: 0.05,\n minorgridcount: 9\n },\n baxis: {\n title: {\n text: \"b\"\n },\n tickmode: \"linear\",\n dtick: 0.5,\n minorgridcount: 9\n }\n}\n\nvar trace2 = {\n type: \"scattercarpet\",\n name: \"b = 1.5\",\n a: [0.05, 0.15, 0.25, 0.35],\n b: [1.5, 1.5, 1.5, 1.5]\n}\n\nvar trace3 = {\n type: \"scattercarpet\",\n name: \"b = 2\",\n a: [0.05, 0.15, 0.25, 0.35],\n b: [2, 2, 2, 2]\n}\n\nvar trace4 = {\n type: \"scattercarpet\",\n name: \"b = 2.5\",\n a: [0.05, 0.15, 0.25, 0.35],\n b: [2.5, 2.5, 2.5, 2.5]\n}\n\nvar trace5 = {\n type: \"scattercarpet\",\n name: \"a = 0.15\",\n a: [0.15, 0.15, 0.15, 0.15],\n b: [0.5, 1.5, 2.5, 3.5],\n line: {\n smoothing: 1,\n shape: \"spline\"\n }\n}\n\nvar trace6 = {\n type: \"scattercarpet\",\n name: \"a = 0.2\",\n a: [0.2, 0.2, 0.2, 0.2],\n b: [0.5, 1.5, 2.5, 3.5],\n line: {\n smoothing: 1,\n shape: \"spline\"\n },\n marker: {\n size: [10, 20, 30, 40],\n color: [\"#000\", \"#f00\", \"#ff0\", \"#fff\"]\n }\n}\n\nvar trace7 = {\n type: \"scattercarpet\",\n name: \"a = 0.25\",\n a: [0.25, 0.25, 0.25, 0.25],\n b: [0.5, 1.5, 2.5, 3.5],\n line: {\n smoothing: 1,\n shape: \"spline\"\n }\n}\n\nvar data = [trace1,trace2,trace3,trace4,trace5,trace6,trace7]\n\nvar layout = {\n title: {\n text: \"scattercarpet extrapolation, clipping, and smoothing\"\n },\n hovermode: \"closest\"\n}\n\nPlotly.newPlot('myDiv', data, layout)\n"}">