Any result that is “a value for every (row, column)” — parameter sweeps, correlation matrices, detector scans — reads best as a heatmap. In Plotly that’s one trace with a z matrix.

Step 1 — The minimal heatmap

z is an array of rows; each row is an array of values:

const z = [
  [0.12, 0.35, 0.61, 0.80],
  [0.30, 0.58, 0.85, 0.93],
  [0.52, 0.79, 0.95, 0.99],
];

Plotly.newPlot(chart, [{ z, type: 'heatmap' }]);

Run it — rows plot bottom-to-top (matrix row 0 is the bottom). If your data reads top-to-bottom, reverse the y-axis in step 3 rather than reordering the data.

Step 2 — Real axis labels

Name the rows and columns with x and y — categories or numbers both work:

Plotly.newPlot(chart, [{
  z,
  x: ['1 mM', '2 mM', '5 mM', '10 mM'],
  y: ['20 °C', '30 °C', '40 °C'],
  type: 'heatmap',
  colorscale: 'Viridis',
  colorbar: { title: { text: 'Yield' } }
}]);

Viridis is the safe default for scientific work: perceptually uniform, readable in grayscale print, and colour-blind friendly. Avoid rainbow scales in a paper — they invent visual boundaries the data doesn’t have.

Step 3 — Orientation and annotations

Plotly.newPlot(chart, [{
  z,
  x: ['1 mM', '2 mM', '5 mM', '10 mM'],
  y: ['20 °C', '30 °C', '40 °C'],
  type: 'heatmap',
  colorscale: 'Viridis',
  zmin: 0, zmax: 1,
  colorbar: { title: { text: 'Yield' } }
}], {
  yaxis: { autorange: 'reversed' },   // if row 0 should be on TOP
  font: { family: 'Times New Roman', size: 14 }
});

Fixing zmin/zmax matters as soon as you have two heatmaps to compare — without a shared scale, the same colour means different values in each panel, which is a quiet way to mislead.

Step 4 — Export or insert

Export / Insert as usual — vector PDF or placed into the paper with a \label. For a multi-panel comparison of several heatmaps, build each here and arrange them in Compose.

Tip: For a diverging quantity (correlations, differences around zero) switch to colorscale: 'RdBu' and set zmid: 0 — zero stays visually neutral, and the two signs get the two hues.