## plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar

# Carpet Scatter Plot in plotly.js

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

#### 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.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)


#### 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: "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?