Correlation matrix with significance markers

Heatmap graphs provide a visual representation of data using color variations to represent different values. They are incredibly useful for identifying patterns, trends, and outliers in datasets. Commonly used in various fields, from geographical analysis to website usability studies, heatmaps offer an intuitive way to understand complex data. Creating effective heatmaps involves selecting the appropriate color scheme and scaling to highlight meaningful differences. Interactive heatmaps further enhance analysis by allowing users to zoom, pan, and explore data points in detail. This makes them powerful tools for data-driven decision making across numerous disciplines.


Economist GGPlot Excel Paul Tol Black And White Solarized Stata Tableau Wall Street CanvasXpress
<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "y" : {
            "vars" : [
               "Height",
               "Weight",
               "Age",
               "BMI",
               "SBP",
               "Glucose"
            ],
            "smps" : [
               "Height",
               "Weight",
               "Age",
               "BMI",
               "SBP",
               "Glucose"
            ],
            "data" : [
               [
                  1.0,
                  0.82,
                  0.05,
                  0.21,
                  -0.12,
                  0.08
               ],
               [
                  0.82,
                  1.0,
                  0.18,
                  0.77,
                  0.31,
                  0.44
               ],
               [
                  0.05,
                  0.18,
                  1.0,
                  0.22,
                  0.58,
                  0.49
               ],
               [
                  0.21,
                  0.77,
                  0.22,
                  1.0,
                  0.46,
                  0.63
               ],
               [
                  -0.12,
                  0.31,
                  0.58,
                  0.46,
                  1.0,
                  0.52
               ],
               [
                  0.08,
                  0.44,
                  0.49,
                  0.63,
                  0.52,
                  1.0
               ]
            ]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Heatmap",
         "title" : "Correlation matrix with significance markers",
         "colorSpectrum" : [
            "#2166ac",
            "#67a9cf",
            "#f7f7f7",
            "#ef8a62",
            "#b2182b"
         ],
         "colorSpectrumZeroValue" : 0,
         "setMin" : -1,
         "setMax" : 1,
         "showSmpDendrogram" : false,
         "showVarDendrogram" : false,
         "heatmapCellText" : [
            {
               "variable" : "Height",
               "sample" : "Height",
               "text" : "1.00"
            },
            {
               "variable" : "Weight",
               "sample" : "Height",
               "text" : "0.82**"
            },
            {
               "variable" : "Age",
               "sample" : "Height",
               "text" : "0.05"
            },
            {
               "variable" : "BMI",
               "sample" : "Height",
               "text" : "0.21"
            },
            {
               "variable" : "SBP",
               "sample" : "Height",
               "text" : "-0.12"
            },
            {
               "variable" : "Glucose",
               "sample" : "Height",
               "text" : "0.08"
            },
            {
               "variable" : "Height",
               "sample" : "Weight",
               "text" : "0.82**"
            },
            {
               "variable" : "Weight",
               "sample" : "Weight",
               "text" : "1.00"
            },
            {
               "variable" : "Age",
               "sample" : "Weight",
               "text" : "0.18"
            },
            {
               "variable" : "BMI",
               "sample" : "Weight",
               "text" : "0.77**"
            },
            {
               "variable" : "SBP",
               "sample" : "Weight",
               "text" : "0.31"
            },
            {
               "variable" : "Glucose",
               "sample" : "Weight",
               "text" : "0.44*"
            },
            {
               "variable" : "Height",
               "sample" : "Age",
               "text" : "0.05"
            },
            {
               "variable" : "Weight",
               "sample" : "Age",
               "text" : "0.18"
            },
            {
               "variable" : "Age",
               "sample" : "Age",
               "text" : "1.00"
            },
            {
               "variable" : "BMI",
               "sample" : "Age",
               "text" : "0.22"
            },
            {
               "variable" : "SBP",
               "sample" : "Age",
               "text" : "0.58*"
            },
            {
               "variable" : "Glucose",
               "sample" : "Age",
               "text" : "0.49*"
            },
            {
               "variable" : "Height",
               "sample" : "BMI",
               "text" : "0.21"
            },
            {
               "variable" : "Weight",
               "sample" : "BMI",
               "text" : "0.77**"
            },
            {
               "variable" : "Age",
               "sample" : "BMI",
               "text" : "0.22"
            },
            {
               "variable" : "BMI",
               "sample" : "BMI",
               "text" : "1.00"
            },
            {
               "variable" : "SBP",
               "sample" : "BMI",
               "text" : "0.46*"
            },
            {
               "variable" : "Glucose",
               "sample" : "BMI",
               "text" : "0.63*"
            },
            {
               "variable" : "Height",
               "sample" : "SBP",
               "text" : "-0.12"
            },
            {
               "variable" : "Weight",
               "sample" : "SBP",
               "text" : "0.31"
            },
            {
               "variable" : "Age",
               "sample" : "SBP",
               "text" : "0.58*"
            },
            {
               "variable" : "BMI",
               "sample" : "SBP",
               "text" : "0.46*"
            },
            {
               "variable" : "SBP",
               "sample" : "SBP",
               "text" : "1.00"
            },
            {
               "variable" : "Glucose",
               "sample" : "SBP",
               "text" : "0.52*"
            },
            {
               "variable" : "Height",
               "sample" : "Glucose",
               "text" : "0.08"
            },
            {
               "variable" : "Weight",
               "sample" : "Glucose",
               "text" : "0.44*"
            },
            {
               "variable" : "Age",
               "sample" : "Glucose",
               "text" : "0.49*"
            },
            {
               "variable" : "BMI",
               "sample" : "Glucose",
               "text" : "0.63*"
            },
            {
               "variable" : "SBP",
               "sample" : "Glucose",
               "text" : "0.52*"
            },
            {
               "variable" : "Glucose",
               "sample" : "Glucose",
               "text" : "1.00"
            }
         ],
         "heatmapCellTextColor" : "rgb(30,30,30)"
      }

      // Event used to create graph (optional)
      var events = false

            // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-heatmap21-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
colorSpectrum=list("#2166ac", "#67a9cf", "#f7f7f7", "#ef8a62", "#b2182b"),
colorSpectrumZeroValue=0,
graphType="Heatmap",
heatmapCellText=list(list(sample="Height", text=1.00, variable="Height"), list(sample="Height", text="0.82**", variable="Weight"), list(sample="Height", text=0.05, variable="Age"), list(sample="Height", text=0.21, variable="BMI"), list(sample="Height", text=-0.12, variable="SBP"), list(sample="Height", text=0.08, variable="Glucose"), list(sample="Weight", text="0.82**", variable="Height"), list(sample="Weight", text=1.00, variable="Weight"), list(sample="Weight", text=0.18, variable="Age"), list(sample="Weight", text="0.77**", variable="BMI"), list(sample="Weight", text=0.31, variable="SBP"), list(sample="Weight", text="0.44*", variable="Glucose"), list(sample="Age", text=0.05, variable="Height"), list(sample="Age", text=0.18, variable="Weight"), list(sample="Age", text=1.00, variable="Age"), list(sample="Age", text=0.22, variable="BMI"), list(sample="Age", text="0.58*", variable="SBP"), list(sample="Age", text="0.49*", variable="Glucose"), list(sample="BMI", text=0.21, variable="Height"), list(sample="BMI", text="0.77**", variable="Weight"), list(sample="BMI", text=0.22, variable="Age"), list(sample="BMI", text=1.00, variable="BMI"), list(sample="BMI", text="0.46*", variable="SBP"), list(sample="BMI", text="0.63*", variable="Glucose"), list(sample="SBP", text=-0.12, variable="Height"), list(sample="SBP", text=0.31, variable="Weight"), list(sample="SBP", text="0.58*", variable="Age"), list(sample="SBP", text="0.46*", variable="BMI"), list(sample="SBP", text=1.00, variable="SBP"), list(sample="SBP", text="0.52*", variable="Glucose"), list(sample="Glucose", text=0.08, variable="Height"), list(sample="Glucose", text="0.44*", variable="Weight"), list(sample="Glucose", text="0.49*", variable="Age"), list(sample="Glucose", text="0.63*", variable="BMI"), list(sample="Glucose", text="0.52*", variable="SBP"), list(sample="Glucose", text=1.00, variable="Glucose")),
heatmapCellTextColor="rgb(30,30,30)",
setMax=1,
setMin=-1,
showSmpDendrogram=FALSE,
showVarDendrogram=FALSE,
title="Correlation matrix with significance markers"
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser

if __name__ == "__main__":
  # Define the chart with its data and configuration
  chart: CanvasXpress = CanvasXpress(
    render_to = "heatmap21",
    data = {
      "y": {
        "vars": ["Height", "Weight", "Age", "BMI", "SBP", "Glucose"],
        "smps": ["Height", "Weight", "Age", "BMI", "SBP", "Glucose"],
        "data": [
          [1.0, 0.82, 0.05, 0.21, -0.12, 0.08],
          [0.82, 1.0, 0.18, 0.77, 0.31, 0.44],
          [0.05, 0.18, 1.0, 0.22, 0.58, 0.49],
          [0.21, 0.77, 0.22, 1.0, 0.46, 0.63],
          [-0.12, 0.31, 0.58, 0.46, 1.0, 0.52],
          [0.08, 0.44, 0.49, 0.63, 0.52, 1.0]
        ]
      }
    },
    config = {
      "graphType": "Heatmap",
      "title": "Correlation matrix with significance markers",
      "colorSpectrum": ["#2166ac", "#67a9cf", "#f7f7f7", "#ef8a62", "#b2182b"],
      "colorSpectrumZeroValue": 0,
      "setMin": -1,
      "setMax": 1,
      "showSmpDendrogram": False,
      "showVarDendrogram": False,
      "heatmapCellText": [
        {
          "variable": "Height",
          "sample": "Height",
          "text": "1.00"
        },
        {
          "variable": "Weight",
          "sample": "Height",
          "text": "0.82**"
        },
        {
          "variable": "Age",
          "sample": "Height",
          "text": "0.05"
        },
        {
          "variable": "BMI",
          "sample": "Height",
          "text": "0.21"
        },
        {
          "variable": "SBP",
          "sample": "Height",
          "text": "-0.12"
        },
        {
          "variable": "Glucose",
          "sample": "Height",
          "text": "0.08"
        },
        {
          "variable": "Height",
          "sample": "Weight",
          "text": "0.82**"
        },
        {
          "variable": "Weight",
          "sample": "Weight",
          "text": "1.00"
        },
        {
          "variable": "Age",
          "sample": "Weight",
          "text": "0.18"
        },
        {
          "variable": "BMI",
          "sample": "Weight",
          "text": "0.77**"
        },
        {
          "variable": "SBP",
          "sample": "Weight",
          "text": "0.31"
        },
        {
          "variable": "Glucose",
          "sample": "Weight",
          "text": "0.44*"
        },
        {
          "variable": "Height",
          "sample": "Age",
          "text": "0.05"
        },
        {
          "variable": "Weight",
          "sample": "Age",
          "text": "0.18"
        },
        {
          "variable": "Age",
          "sample": "Age",
          "text": "1.00"
        },
        {
          "variable": "BMI",
          "sample": "Age",
          "text": "0.22"
        },
        {
          "variable": "SBP",
          "sample": "Age",
          "text": "0.58*"
        },
        {
          "variable": "Glucose",
          "sample": "Age",
          "text": "0.49*"
        },
        {
          "variable": "Height",
          "sample": "BMI",
          "text": "0.21"
        },
        {
          "variable": "Weight",
          "sample": "BMI",
          "text": "0.77**"
        },
        {
          "variable": "Age",
          "sample": "BMI",
          "text": "0.22"
        },
        {
          "variable": "BMI",
          "sample": "BMI",
          "text": "1.00"
        },
        {
          "variable": "SBP",
          "sample": "BMI",
          "text": "0.46*"
        },
        {
          "variable": "Glucose",
          "sample": "BMI",
          "text": "0.63*"
        },
        {
          "variable": "Height",
          "sample": "SBP",
          "text": "-0.12"
        },
        {
          "variable": "Weight",
          "sample": "SBP",
          "text": "0.31"
        },
        {
          "variable": "Age",
          "sample": "SBP",
          "text": "0.58*"
        },
        {
          "variable": "BMI",
          "sample": "SBP",
          "text": "0.46*"
        },
        {
          "variable": "SBP",
          "sample": "SBP",
          "text": "1.00"
        },
        {
          "variable": "Glucose",
          "sample": "SBP",
          "text": "0.52*"
        },
        {
          "variable": "Height",
          "sample": "Glucose",
          "text": "0.08"
        },
        {
          "variable": "Weight",
          "sample": "Glucose",
          "text": "0.44*"
        },
        {
          "variable": "Age",
          "sample": "Glucose",
          "text": "0.49*"
        },
        {
          "variable": "BMI",
          "sample": "Glucose",
          "text": "0.63*"
        },
        {
          "variable": "SBP",
          "sample": "Glucose",
          "text": "0.52*"
        },
        {
          "variable": "Glucose",
          "sample": "Glucose",
          "text": "1.00"
        }
      ],
      "heatmapCellTextColor": "rgb(30,30,30)"
    },
    width = 600,
    height = 600
  )

  # Display the chart in its own Web page
  show_in_browser(chart)
Run this notebook: Open in Binder
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph

graph(
  CanvasXpress(
    render_to = "heatmap21",
    data = {
      "y": {
        "vars": ["Height", "Weight", "Age", "BMI", "SBP", "Glucose"],
        "smps": ["Height", "Weight", "Age", "BMI", "SBP", "Glucose"],
        "data": [
          [1.0, 0.82, 0.05, 0.21, -0.12, 0.08],
          [0.82, 1.0, 0.18, 0.77, 0.31, 0.44],
          [0.05, 0.18, 1.0, 0.22, 0.58, 0.49],
          [0.21, 0.77, 0.22, 1.0, 0.46, 0.63],
          [-0.12, 0.31, 0.58, 0.46, 1.0, 0.52],
          [0.08, 0.44, 0.49, 0.63, 0.52, 1.0]
        ]
      }
    },
    config = {
      "graphType": "Heatmap",
      "title": "Correlation matrix with significance markers",
      "colorSpectrum": ["#2166ac", "#67a9cf", "#f7f7f7", "#ef8a62", "#b2182b"],
      "colorSpectrumZeroValue": 0,
      "setMin": -1,
      "setMax": 1,
      "showSmpDendrogram": False,
      "showVarDendrogram": False,
      "heatmapCellText": [
        {
          "variable": "Height",
          "sample": "Height",
          "text": "1.00"
        },
        {
          "variable": "Weight",
          "sample": "Height",
          "text": "0.82**"
        },
        {
          "variable": "Age",
          "sample": "Height",
          "text": "0.05"
        },
        {
          "variable": "BMI",
          "sample": "Height",
          "text": "0.21"
        },
        {
          "variable": "SBP",
          "sample": "Height",
          "text": "-0.12"
        },
        {
          "variable": "Glucose",
          "sample": "Height",
          "text": "0.08"
        },
        {
          "variable": "Height",
          "sample": "Weight",
          "text": "0.82**"
        },
        {
          "variable": "Weight",
          "sample": "Weight",
          "text": "1.00"
        },
        {
          "variable": "Age",
          "sample": "Weight",
          "text": "0.18"
        },
        {
          "variable": "BMI",
          "sample": "Weight",
          "text": "0.77**"
        },
        {
          "variable": "SBP",
          "sample": "Weight",
          "text": "0.31"
        },
        {
          "variable": "Glucose",
          "sample": "Weight",
          "text": "0.44*"
        },
        {
          "variable": "Height",
          "sample": "Age",
          "text": "0.05"
        },
        {
          "variable": "Weight",
          "sample": "Age",
          "text": "0.18"
        },
        {
          "variable": "Age",
          "sample": "Age",
          "text": "1.00"
        },
        {
          "variable": "BMI",
          "sample": "Age",
          "text": "0.22"
        },
        {
          "variable": "SBP",
          "sample": "Age",
          "text": "0.58*"
        },
        {
          "variable": "Glucose",
          "sample": "Age",
          "text": "0.49*"
        },
        {
          "variable": "Height",
          "sample": "BMI",
          "text": "0.21"
        },
        {
          "variable": "Weight",
          "sample": "BMI",
          "text": "0.77**"
        },
        {
          "variable": "Age",
          "sample": "BMI",
          "text": "0.22"
        },
        {
          "variable": "BMI",
          "sample": "BMI",
          "text": "1.00"
        },
        {
          "variable": "SBP",
          "sample": "BMI",
          "text": "0.46*"
        },
        {
          "variable": "Glucose",
          "sample": "BMI",
          "text": "0.63*"
        },
        {
          "variable": "Height",
          "sample": "SBP",
          "text": "-0.12"
        },
        {
          "variable": "Weight",
          "sample": "SBP",
          "text": "0.31"
        },
        {
          "variable": "Age",
          "sample": "SBP",
          "text": "0.58*"
        },
        {
          "variable": "BMI",
          "sample": "SBP",
          "text": "0.46*"
        },
        {
          "variable": "SBP",
          "sample": "SBP",
          "text": "1.00"
        },
        {
          "variable": "Glucose",
          "sample": "SBP",
          "text": "0.52*"
        },
        {
          "variable": "Height",
          "sample": "Glucose",
          "text": "0.08"
        },
        {
          "variable": "Weight",
          "sample": "Glucose",
          "text": "0.44*"
        },
        {
          "variable": "Age",
          "sample": "Glucose",
          "text": "0.49*"
        },
        {
          "variable": "BMI",
          "sample": "Glucose",
          "text": "0.63*"
        },
        {
          "variable": "SBP",
          "sample": "Glucose",
          "text": "0.52*"
        },
        {
          "variable": "Glucose",
          "sample": "Glucose",
          "text": "1.00"
        }
      ],
      "heatmapCellTextColor": "rgb(30,30,30)"
    },
    width = 600,
    height = 600
  )
)
using CanvasXpress

canvasxpress(Dict(
  "y" => Dict(
    "vars" => ["Height", "Weight", "Age", "BMI", "SBP", "Glucose"],
    "smps" => ["Height", "Weight", "Age", "BMI", "SBP", "Glucose"],
    "data" => [
      [1.0, 0.82, 0.05, 0.21, -0.12, 0.08],
      [0.82, 1.0, 0.18, 0.77, 0.31, 0.44],
      [0.05, 0.18, 1.0, 0.22, 0.58, 0.49],
      [0.21, 0.77, 0.22, 1.0, 0.46, 0.63],
      [-0.12, 0.31, 0.58, 0.46, 1.0, 0.52],
      [0.08, 0.44, 0.49, 0.63, 0.52, 1.0]
    ]
  )
);
  graphType = "Heatmap",
  title = "Correlation matrix with significance markers",
  colorSpectrum = ["#2166ac", "#67a9cf", "#f7f7f7", "#ef8a62", "#b2182b"],
  colorSpectrumZeroValue = 0,
  setMin = -1,
  setMax = 1,
  showSmpDendrogram = false,
  showVarDendrogram = false,
  heatmapCellText = [
    Dict(
      "variable" => "Height",
      "sample" => "Height",
      "text" => "1.00"
    ),
    Dict(
      "variable" => "Weight",
      "sample" => "Height",
      "text" => "0.82**"
    ),
    Dict(
      "variable" => "Age",
      "sample" => "Height",
      "text" => "0.05"
    ),
    Dict(
      "variable" => "BMI",
      "sample" => "Height",
      "text" => "0.21"
    ),
    Dict(
      "variable" => "SBP",
      "sample" => "Height",
      "text" => "-0.12"
    ),
    Dict(
      "variable" => "Glucose",
      "sample" => "Height",
      "text" => "0.08"
    ),
    Dict(
      "variable" => "Height",
      "sample" => "Weight",
      "text" => "0.82**"
    ),
    Dict(
      "variable" => "Weight",
      "sample" => "Weight",
      "text" => "1.00"
    ),
    Dict(
      "variable" => "Age",
      "sample" => "Weight",
      "text" => "0.18"
    ),
    Dict(
      "variable" => "BMI",
      "sample" => "Weight",
      "text" => "0.77**"
    ),
    Dict(
      "variable" => "SBP",
      "sample" => "Weight",
      "text" => "0.31"
    ),
    Dict(
      "variable" => "Glucose",
      "sample" => "Weight",
      "text" => "0.44*"
    ),
    Dict(
      "variable" => "Height",
      "sample" => "Age",
      "text" => "0.05"
    ),
    Dict(
      "variable" => "Weight",
      "sample" => "Age",
      "text" => "0.18"
    ),
    Dict(
      "variable" => "Age",
      "sample" => "Age",
      "text" => "1.00"
    ),
    Dict(
      "variable" => "BMI",
      "sample" => "Age",
      "text" => "0.22"
    ),
    Dict(
      "variable" => "SBP",
      "sample" => "Age",
      "text" => "0.58*"
    ),
    Dict(
      "variable" => "Glucose",
      "sample" => "Age",
      "text" => "0.49*"
    ),
    Dict(
      "variable" => "Height",
      "sample" => "BMI",
      "text" => "0.21"
    ),
    Dict(
      "variable" => "Weight",
      "sample" => "BMI",
      "text" => "0.77**"
    ),
    Dict(
      "variable" => "Age",
      "sample" => "BMI",
      "text" => "0.22"
    ),
    Dict(
      "variable" => "BMI",
      "sample" => "BMI",
      "text" => "1.00"
    ),
    Dict(
      "variable" => "SBP",
      "sample" => "BMI",
      "text" => "0.46*"
    ),
    Dict(
      "variable" => "Glucose",
      "sample" => "BMI",
      "text" => "0.63*"
    ),
    Dict(
      "variable" => "Height",
      "sample" => "SBP",
      "text" => "-0.12"
    ),
    Dict(
      "variable" => "Weight",
      "sample" => "SBP",
      "text" => "0.31"
    ),
    Dict(
      "variable" => "Age",
      "sample" => "SBP",
      "text" => "0.58*"
    ),
    Dict(
      "variable" => "BMI",
      "sample" => "SBP",
      "text" => "0.46*"
    ),
    Dict(
      "variable" => "SBP",
      "sample" => "SBP",
      "text" => "1.00"
    ),
    Dict(
      "variable" => "Glucose",
      "sample" => "SBP",
      "text" => "0.52*"
    ),
    Dict(
      "variable" => "Height",
      "sample" => "Glucose",
      "text" => "0.08"
    ),
    Dict(
      "variable" => "Weight",
      "sample" => "Glucose",
      "text" => "0.44*"
    ),
    Dict(
      "variable" => "Age",
      "sample" => "Glucose",
      "text" => "0.49*"
    ),
    Dict(
      "variable" => "BMI",
      "sample" => "Glucose",
      "text" => "0.63*"
    ),
    Dict(
      "variable" => "SBP",
      "sample" => "Glucose",
      "text" => "0.52*"
    ),
    Dict(
      "variable" => "Glucose",
      "sample" => "Glucose",
      "text" => "1.00"
    )
  ],
  heatmapCellTextColor = "rgb(30,30,30)"
)
⇧