Show Sidebar Hide Sidebar

Make a Heatmap

A Step by Step Guide to Making a Heat Map

Make a Heat Map

OKCupid Compatibility by Religion<br>Source: <a href="http://blog.okcupid.com/index.php/how-races-and-religions-match-in-online-dating/">OKTrends, 2009</a>

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:
OKCupid Religious Compatibility Grid
Select Heatmaps from the MAKE A PLOT menu. 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. X Axis Column names
Deselect any columns you don’t want to plot, and your row names column if you have one. This will be your “y” value. Set 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. Make heatmap button

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. Default heat map Style tab of Traces popover
This is what the Style tab of the TRACES popover should look like. We’ve selected one of the default gradients, red-yellow-blue. Red Yellow Blue gradient
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. Style tab Z range value
(Alternative: if you want to make a contour plot, just change the Type setting in the Mode tab.) Type setting in Mode tab Contour plot

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. Red-yellow-blue heat map Style tab of Traces popover
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. Plot color in LAYOUT popover Layout popover margin options
We’ve titled our chart, and used markup to format our text and source our data. Chart title
Your finished chart should look something like this: Finished heat map chart
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.