Carpet Contour Plot in JavaScript

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

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Basic Carpet Plot

var trace1  = {
    type: 'carpet',
    a: [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
    b: [4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6],
    x: [2, 3, 4, 5, 2.2, 3.1, 4.1, 5.1, 1.5, 2.5, 3.5, 4.5],
    y: [1, 1.4, 1.6, 1.75, 2, 2.5, 2.7, 2.75, 3, 3.5, 3.7, 3.75],
    aaxis: {
      tickprefix: "a = ",
      smoothing: 0,
      minorgridcount: 9,
      type: 'linear'
},
    baxis: {
      tickprefix: "b = ",
      smoothing: 0,
      minorgridcount: 9,
      type: 'linear'
    }
}

var layout = {
    title: {
      text: "Cheater plot with 1d input"
    },
    margin: {
      t: 40, r: 30, b: 30, l: 30
    },
    yaxis: {
      range: [0.388,4.361]
    },
    xaxis: {
      range: [0.667,5.932]
    }
}

var data = [trace1]

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

Add Contours

var trace1 = {
    type: 'contourcarpet',
    a: [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
    b: [4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6],
    z: [1, 1.96, 2.56, 3.0625, 4, 5.0625, 1, 7.5625, 9, 12.25, 15.21, 14.0625],
    autocontour: false,
    contours: {
      start: 1,
      end: 14,
      size: 1
    },
    line: {
      width: 2,
      smoothing: 0
    },
    colorbar: {
      len: 0.4,
      y: 0.25
    }
}

var trace2  = {
    type: 'carpet',
    a: [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
    b: [4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6],
    x: [2, 3, 4, 5, 2.2, 3.1, 4.1, 5.1, 1.5, 2.5, 3.5, 4.5],
    y: [1, 1.4, 1.6, 1.75, 2, 2.5, 2.7, 2.75, 3, 3.5, 3.7, 3.75],
    aaxis: {
      tickprefix: "a = ",
      smoothing: 0,
      minorgridcount: 9,
      type: 'linear'
},
    baxis: {
      tickprefix: "b = ",
      smoothing: 0,
      minorgridcount: 9,
      type: 'linear'
    }
}

var layout = {
    title: {
      text: "Cheater plot with 1d input"
    },
    margin: {
      t: 40, r: 30, b: 30, l: 30
    },
    yaxis: {
      range: [0.388,4.361]
    },
    xaxis: {
      range: [0.667,5.932]
    }
}

var data = [trace1,trace2]

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

Add Multiple Traces

function Get(url){
    var Httpreq = new XMLHttpRequest();
    Httpreq.open("GET",url,false);
    Httpreq.send(null);
    return Httpreq.responseText;
}

var json_obj = JSON.parse(Get("https://raw.githubusercontent.com/bcdunbar/datasets/master/airfoil_data.json"));

var trace1 = {
      a: json_obj[0].a,
      b: json_obj[0].b,
      baxis: {
        startline: false,
        endline: false,
        showticklabels: "none",
        smoothing: 0,
        showgrid: false
      },
      x: json_obj[0].x,
      y: json_obj[0].y,
      type: "carpet",
      aaxis:{
        startlinewidth: 2,
        startline: true,
        showticklabels: "none",
        endline: true,
        showgrid: false,
        endlinewidth: 2,
        smoothing: 0
      }
    }

 var trace2 = {
      autocolorscale: false,
      zmax: 1,
      name: "Pressure",
      colorscale: "Viridis",
      zmin: -8,
      colorbar: {
        y: 0,
        yanchor: "bottom",
        title: {side:
          'right'
        },
        len: 0.75,
        title: {
          text: "Pressure coefficient, c<sub>p</sub>"
        },
      },
      contours: {
        start: -1,
        size: 0.025,
        end: 1.000,
        showlines: false
      },
      line: {
        smoothing: 0
      },
      z: json_obj[1].z,
      type: "contourcarpet",
      autocontour: false,
      zauto: false
    }

 var trace3 = {
      opacity: 0.300,
      showlegend: true,
      name: "Streamlines",
      autocontour: true,
      ncontours: 50,
      contours: {
        coloring: "none"
      },
      line: {
        color: "white",
        width: 1
      },
      z: json_obj[2].z,
      type: "contourcarpet"
    }

 var trace4 = {
      showlegend: true,
      name: "Pressure<br>contours",
      autocontour: false,
      z: json_obj[3].z,
      type: "contourcarpet",
      line: {
        color: "rgba(0, 0, 0, 0.5)",
        smoothing: 1
      },
      contours: {
        size: 0.250,
        start: -4,
        coloring: "none",
        end: 1.000,
        showlines: true
      }
    }

 var trace5 = {
      legendgroup: "g1",
      name: "Surface<br>pressure",
      mode: "lines",
      hoverinfo: "skip",
      x: json_obj[4].x,
      y: json_obj[4].y,
      line: {
        color: "rgba(255, 0, 0, 0.5)",
        width: 1,
        shape: "spline",
        smoothing: 1
      },
      fill: "toself",
      type: "scatter",
      fillcolor: "rgba(255, 0, 0, 0.2)"
    }

 var trace6 = {
      showlegend: false,
      legendgroup: "g1",
      mode: "lines",
      hoverinfo: "skip",
      x: json_obj[5].x,
      y: json_obj[5].y,
      line: {
        color: "rgba(255, 0, 0, 0.3)",
        width: 1
      },
      type: "scatter"
    }

 var trace7 = {
      showlegend: false,
      legendgroup: "g1",
      name: "cp",
      text: json_obj[6].text,
      mode: "lines",
      hoverinfo: "text",
      x: json_obj[6].x,
      y: json_obj[6].y,
      line: {
        color: "rgba(255, 0, 0, 0.2)",
        width: 0
      },
      type: "scatter"
    }

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

var layout = {
    yaxis: {
      zeroline: false,
      range: [-1.800,1.800],
      showgrid: false
    },
    dragmode: "pan",
    height: 700,
    xaxis: {
      zeroline: false,
      scaleratio: 1,
      scaleanchor: "y",
      range: [-3.800,3.800],
      showgrid: false
    },
    title: {
      text: "Flow over a Karman-Trefftz airfoil"
    },
    hovermode: "closest",
    margin: {
      r: 60,
      b: 40,
      l: 40,
      t: 80
    },
    width: 900
  }

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