Make a Heat Map
Follow along below to make a heat map in Plotly.
Step 1: Set up the grid
|This is one way you could set up Plotly’s grid to make the graph above. The rows and columns of the grid will correspond to the rows and columns of the heat map, the column names will name the column.
You can copy the data from here. To open the date in your Plotly workspace, click on Fork and edit:
|Select Heatmaps from the MAKE A PLOT menu.|
|Select the Column names button from the X-AXIS options in the sidebar and click Select all columns button.|
|Deselect any columns you don’t want to plot, and your row names column if you have one. This will be your “y” value.|
|Click the blue plot button in the sidebar to create the chart. (For more help with the grid see: Add Data to the Plotly Grid.|
Step 2: Traces
|Your plot should look something like this. The first step to styling it into the heat map above is to open the TRACES popover in the toolbar.|
|This is what the Style tab of the TRACES popover should look like. We’ve selected one of the default gradients, red-yellow-blue.|
|For this particular data, we also want to center our gradient so that yellow correlates to a value of 60.2, and everything above or below is a little red or green. The easiest way to do this is by nudging the Z range values in the Range/bins tab to converge on our desired midpoint — we compressed our range, but you can also stretch it if you prefer the effect.|
|(Alternative: if you want to make a contour plot, just change the Type setting in the Mode tab.)|
Step 3: Style and annotate!
|Your plot should look something like this. There’s a little more styling you need to do to get the graph at the top of the chart.|
|Here’s how the LAYOUT popover should look. We’ve nudged the margins to accommodate the y-axis labels, and we’re giving our chart a grey background.|
|We’ve titled our chart, and used markup to format our text and source our data.|
|Your finished chart should look something like this:|