createPlotlyPlots.js

function prepRibbonData(jsonData) {
  var resList = [];

  const L = jsonData.length;

  var startVal = 2;
  var currentMonth = 0;
  var hourInMonth = 0;

  var x = [];
  var y = [];
  var z = [];
  for (var d = 0; d < L; d++) {
    let tmpDate = new Date(jsonData[d].x);
    // let datum = tmpDate.getDate(); // gets the day of the month 1...31
    let hour = tmpDate.getHours();
    let month = tmpDate.getUTCMonth(); // gets the month as numeric value

    if (currentMonth == month) {
      x.push([startVal, startVal + 1]);
      y.push([hourInMonth, hourInMonth]);
      z.push([jsonData[d].y, jsonData[d].y]);
      hourInMonth++;
    } else {
      resList.push({ x: x, y: y, z: z });
      var x = [];
      var y = [];
      var z = [];
      currentMonth += 1;
      startVal += 2;
      hourInMonth = 0;

      x.push([startVal, startVal + 1]);
      y.push([hourInMonth, hourInMonth]);
      z.push([jsonData[d].y, jsonData[d].y]);
    }
  } // end of for loop

  // add results for last month as else statement will not be reached for the december
  // as the condition d < L will be true before the condition currentMonth === month can be evaluated

  // re-activate following line when i have more than one data point for the next month
  // resList.push({x:x, y:y, z:z } );

  return resList;
}

function makeRibbonPlot(dat) {
  preppedData = prepRibbonData(dat);
  dat = preppedData;

  // 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 prepHeatmapData(jsonData) {
  const L = jsonData.length;

  var z = [];
  var hourCnt = 0;
  const maxH = 24;
  const incr = Math.round(L / maxH) + 1;

  // span up the matrix that holds my temperature values
  for (var d = 0; d < L; d += incr) {
    // z.push( [...Array(incr).keys(NaN)] );
    z.push(Array(incr).fill(NaN));
  }

  // now populate the empty (nan-filled) array with appropriate values
  var cnt = 0;
  var breakOut = false;
  for (var hour = 0; hour < z.length; hour++) {
    for (var day = 0; day < incr; day++) {
      idx = (day * maxH) + hour ;
      if (idx >= L)
        continue;
      z[hour][day] = jsonData[idx].y;
      cnt++;
      if (cnt >= L) {
        breakOut = true;
        break;
      }
    }
    if (breakOut)
      break;
  }

  // window.alert(cnt);

  return z;
}

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

function makeHeatmap(dat) {
  z_data = prepHeatmapData(dat);

  layout = {                     // all "layout" attributes: #layout
    title: 'Inlet flow  Overview of 2020 - 1st Jan - 30th Jun',  // more about "layout.title": #layout-title    
    showlegend: true,
    autosize: true,
    width: 1400,
    height: 800,
    xaxis: {                  // all "layout.xaxis" attributes: #layout-xaxis
        title: 'Number of the day of the year',
        tickmode: "array",
      tickvals: [0 , 31, 60, 91, 121, 152, 182],
      ticktext: ["1st. Jan", "1st Feb", "1st Mar", "1st Apr", "1st May", "1st Jun", "1st Jul"],         // more about "layout.xaxis.title": #layout-xaxis-title
    },
    yaxis: { 
      title: "Hours of the day",
      tickmode: "array",
      tickvals: [...Array(24).keys()],
      ticktext: String([...Array(24).keys()]),

     },
      
    annotations: [            // all "annotation" attributes: #layout-annotations
    //     {
    //         text: '1st of February',    // #layout-annotations-text
    //         x: 0,                         // #layout-annotations-x
    //         xref: 'paper',                // #layout-annotations-xref
    //         y: 0,                         // #layout-annotations-y
    //         yref: 'paper'                 // #layout-annotations-yref
    //     }
    ]
}

  var data = [
    {
      // z: [ [1, 20, 30 , 20], [20, 1, 60, 10 ], [30, 60, 1, 5],  [1, 20, 30 , 20], [20, 1, 60, 10 ], [30, 60, 1, 5] ],
      z: z_data,
      type: "heatmap",
    },
  ];

  Plotly.newPlot("heatmap2d", 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);
}