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.
<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)
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)"
)




















