createPlotlyPlots.js

function makeRibbonPlot(dat) {
  // https://plotly.com/javascript/ribbon-plots/
  var trace1 = {
    x: dat[0].x,
    y: dat[0].y,
    z: dat[0].z,
    name: "January",
    // colorscale: dat[0].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace2 = {
    name: "Feburary",
    x: dat[1].x,
    y: dat[1].y,
    z: dat[1].z,
    // colorscale: dat[1].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace3 = {
    name: "March",
    x: dat[2].x,
    y: dat[2].y,
    z: dat[2].z,
    // colorscale: dat[2].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace4 = {
    name: "April",
    x: dat[3].x,
    y: dat[3].y,
    z: dat[3].z,
    // colorscale: dat[3].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace5 = {
    name: "May",
    x: dat[4].x,
    y: dat[4].y,
    z: dat[4].z,
    // colorscale: dat[4].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace6 = {
    name: "June",
    x: dat[5].x,
    y: dat[5].y,
    z: dat[5].z,
    // colorscale: dat[5].colorscale,
    type: "surface",
    showscale: false,
  };

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

  var layout = {
    title: "Inlet flow (per month)",
    showlegend: true,
    autosize: true,
    width: 1400,
    height: 800,
    xaxis: {
      tickmode: "array",
      tickvals: [2.5, 4.5, 6.5, 8.5, 10.5, 12.5],
      ticktext: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    },
    hoverlabel: {
      bgcolor: "black",
    },
    scene: {
      xaxis: {
        title: "Month ",
        tickmode: "array",
        tickvals: [2.5, 4.5, 6.5, 8.5, 10.5, 12.5],
        ticktext: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      },
      yaxis: { title: "Hours in a month" },
      zaxis: { title: "Temperature (°C)" },
    },
  };
  Plotly.newPlot("RibbonPlot", data, layout);

  function make2dHistogram(dat) {
    //////////////////////////////
    // make heatmap or 2d histogram plot

    var x = [];
    var y = [];
    for (var i = 0; i < 500; i++) {
      x[i] = Math.random();
      y[i] = Math.random() + 1;
    }

    var data = [
      {
        x: x,
        y: y,
        z: x,
        type: "histogram2d", //  try this type as well 'histogram2dcontour' or this one 'histogram2d'
      },
    ];
    Plotly.newPlot("heatmap2d", data);
  }

  /////////////////////////////////////

  function makeHeatmap(dat) {
    var data = [
      {
        z: [
          [1, null, 30, 50, 1],
          [20, 1, 60, 80, 30],
          [30, 60, 1, -10, 20],
        ],
        x: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
        y: ["Morning", "Afternoon", "Evening"],
        type: "heatmap",
        hoverongaps: false,
      },
    ];

    Plotly.newPlot("heatmap2d", data);
  }
}