Heatmap Chart Examples
This document demonstrates various heatmap chart configurations using the DataGlass plugin.
Basic Heatmap
Simple 3x3 heatmap with default settings.
View Source
type: heatmap
engine: d3
width: 600
height: 400
title: "Basic Heatmap Example"
data:
source: |
[
{"x": "A", "y": "X", "value": 0.8},
{"x": "A", "y": "Y", "value": 0.5},
{"x": "A", "y": "Z", "value": 0.2},
{"x": "B", "y": "X", "value": 0.3},
{"x": "B", "y": "Y", "value": 0.9},
{"x": "B", "y": "Z", "value": 0.6},
{"x": "C", "y": "X", "value": 0.1},
{"x": "C", "y": "Y", "value": 0.4},
{"x": "C", "y": "Z", "value": 0.7}
]Color Scheme Variations
Viridis Color Scheme
View Source
type: heatmap
engine: d3
width: 600
height: 400
title: "Viridis Color Scheme"
colorScheme: viridis
data:
source: |
[
{"x": "Jan", "y": "Product A", "value": 45},
{"x": "Jan", "y": "Product B", "value": 32},
{"x": "Jan", "y": "Product C", "value": 58},
{"x": "Feb", "y": "Product A", "value": 52},
{"x": "Feb", "y": "Product B", "value": 41},
{"x": "Feb", "y": "Product C", "value": 63},
{"x": "Mar", "y": "Product A", "value": 38},
{"x": "Mar", "y": "Product B", "value": 29},
{"x": "Mar", "y": "Product C", "value": 51}
]Plasma Color Scheme
View Source
type: heatmap
engine: d3
width: 600
height: 400
title: "Plasma Color Scheme"
colorScheme: plasma
data:
source: |
[
{"x": "Mon", "y": "Morning", "value": 23},
{"x": "Mon", "y": "Afternoon", "value": 45},
{"x": "Mon", "y": "Evening", "value": 31},
{"x": "Tue", "y": "Morning", "value": 28},
{"x": "Tue", "y": "Afternoon", "value": 52},
{"x": "Tue", "y": "Evening", "value": 38},
{"x": "Wed", "y": "Morning", "value": 19},
{"x": "Wed", "y": "Afternoon", "value": 41},
{"x": "Wed", "y": "Evening", "value": 27}
]Red-Yellow-Green (Diverging)
View Source
type: heatmap
engine: d3
width: 600
height: 400
title: "Performance Heatmap"
colorScheme: RdYlGn
reverseColors: true
data:
source: |
[
{"x": "Q1", "y": "Sales", "value": -0.15},
{"x": "Q1", "y": "Marketing", "value": 0.08},
{"x": "Q1", "y": "Operations", "value": 0.22},
{"x": "Q2", "y": "Sales", "value": 0.12},
{"x": "Q2", "y": "Marketing", "value": -0.05},
{"x": "Q2", "y": "Operations", "value": 0.18},
{"x": "Q3", "y": "Sales", "value": 0.25},
{"x": "Q3", "y": "Marketing", "value": 0.15},
{"x": "Q3", "y": "Operations", "value": -0.08}
]Configuration Options
Hide Cell Values
View Source
type: heatmap
engine: d3
width: 600
height: 400
title: "Heatmap Without Cell Values"
showValues: false
colorScheme: turbo
data:
source: |
[
{"x": "A", "y": "1", "value": 12},
{"x": "A", "y": "2", "value": 25},
{"x": "A", "y": "3", "value": 18},
{"x": "B", "y": "1", "value": 31},
{"x": "B", "y": "2", "value": 8},
{"x": "B", "y": "3", "value": 22},
{"x": "C", "y": "1", "value": 15},
{"x": "C", "y": "2", "value": 39},
{"x": "C", "y": "3", "value": 11}
]Hide Legend
View Source
type: heatmap
engine: d3
width: 500
height: 400
title: "Heatmap Without Legend"
showLegend: false
colorScheme: cool
data:
source: |
[
{"x": "X1", "y": "Y1", "value": 0.45},
{"x": "X1", "y": "Y2", "value": 0.72},
{"x": "X2", "y": "Y1", "value": 0.23},
{"x": "X2", "y": "Y2", "value": 0.91}
]Fixed Color Domain
View Source
type: heatmap
engine: d3
width: 600
height: 400
title: "Fixed Color Scale (0 to 100)"
colorScheme: viridis
colorDomain: [0, 100]
data:
source: |
[
{"x": "Team A", "y": "Sprint 1", "value": 85},
{"x": "Team A", "y": "Sprint 2", "value": 92},
{"x": "Team A", "y": "Sprint 3", "value": 78},
{"x": "Team B", "y": "Sprint 1", "value": 65},
{"x": "Team B", "y": "Sprint 2", "value": 71},
{"x": "Team B", "y": "Sprint 3", "value": 88},
{"x": "Team C", "y": "Sprint 1", "value": 74},
{"x": "Team C", "y": "Sprint 2", "value": 69},
{"x": "Team C", "y": "Sprint 3", "value": 95}
]Real-World Use Case: Correlation Matrix
This example shows a correlation matrix for financial assets.
View Source
type: heatmap
engine: d3
width: 700
height: 600
title: "Asset Correlation Matrix"
colorScheme: RdYlBu
reverseColors: true
colorDomain: [-1, 1]
xLabel: "Assets"
yLabel: "Assets"
data:
source: |
[
{"x": "Stocks", "y": "Stocks", "value": 1.00},
{"x": "Stocks", "y": "Bonds", "value": -0.23},
{"x": "Stocks", "y": "Real Estate", "value": 0.45},
{"x": "Stocks", "y": "Commodities", "value": 0.12},
{"x": "Stocks", "y": "Cash", "value": -0.05},
{"x": "Bonds", "y": "Stocks", "value": -0.23},
{"x": "Bonds", "y": "Bonds", "value": 1.00},
{"x": "Bonds", "y": "Real Estate", "value": -0.15},
{"x": "Bonds", "y": "Commodities", "value": -0.08},
{"x": "Bonds", "y": "Cash", "value": 0.32},
{"x": "Real Estate", "y": "Stocks", "value": 0.45},
{"x": "Real Estate", "y": "Bonds", "value": -0.15},
{"x": "Real Estate", "y": "Real Estate", "value": 1.00},
{"x": "Real Estate", "y": "Commodities", "value": 0.28},
{"x": "Real Estate", "y": "Cash", "value": -0.12},
{"x": "Commodities", "y": "Stocks", "value": 0.12},
{"x": "Commodities", "y": "Bonds", "value": -0.08},
{"x": "Commodities", "y": "Real Estate", "value": 0.28},
{"x": "Commodities", "y": "Commodities", "value": 1.00},
{"x": "Commodities", "y": "Cash", "value": 0.05},
{"x": "Cash", "y": "Stocks", "value": -0.05},
{"x": "Cash", "y": "Bonds", "value": 0.32},
{"x": "Cash", "y": "Real Estate", "value": -0.12},
{"x": "Cash", "y": "Commodities", "value": 0.05},
{"x": "Cash", "y": "Cash", "value": 1.00}
]Temperature Heatmap by Day and Hour
View Source
type: heatmap
engine: d3
width: 800
height: 500
title: "Average Temperature by Day and Hour"
colorScheme: inferno
xLabel: "Hour of Day"
yLabel: "Day of Week"
data:
source: |
[
{"x": "6am", "y": "Mon", "value": 12},
{"x": "6am", "y": "Tue", "value": 11},
{"x": "6am", "y": "Wed", "value": 13},
{"x": "6am", "y": "Thu", "value": 12},
{"x": "6am", "y": "Fri", "value": 14},
{"x": "12pm", "y": "Mon", "value": 22},
{"x": "12pm", "y": "Tue", "value": 24},
{"x": "12pm", "y": "Wed", "value": 23},
{"x": "12pm", "y": "Thu", "value": 25},
{"x": "12pm", "y": "Fri", "value": 26},
{"x": "6pm", "y": "Mon", "value": 18},
{"x": "6pm", "y": "Tue", "value": 19},
{"x": "6pm", "y": "Wed", "value": 17},
{"x": "6pm", "y": "Thu", "value": 20},
{"x": "6pm", "y": "Fri", "value": 21},
{"x": "12am", "y": "Mon", "value": 8},
{"x": "12am", "y": "Tue", "value": 7},
{"x": "12am", "y": "Wed", "value": 9},
{"x": "12am", "y": "Thu", "value": 8},
{"x": "12am", "y": "Fri", "value": 10}
]Data Format
All heatmap examples expect data in the following format:
json
[
{"x": "column_name", "y": "row_name", "value": numeric_value},
{"x": "column_name", "y": "row_name", "value": numeric_value}
]x: Column label (categorical)y: Row label (categorical)value: Numeric value to visualize
Available Color Schemes
RdYlBu- Red-Yellow-Blue (diverging, default)RdYlGn- Red-Yellow-Green (diverging)viridis- Purple to yellow (sequential)plasma- Purple to yellow/pink (sequential)inferno- Black to yellow (sequential)magma- Black to white (sequential)cividis- Blue to yellow (sequential, colorblind-friendly)turbo- Rainbow (sequential)cool- Cyan to magenta (sequential)warm- Purple to yellow (sequential)
Configuration Reference
| Option | Type | Default | Description |
|---|---|---|---|
type | string | required | Set to "heatmap" |
engine | string | required | Set to "d3" |
width | number | 800 | Chart width in pixels |
height | number | 600 | Chart height in pixels |
title | string | - | Chart title |
xLabel | string | "X" | X-axis label |
yLabel | string | "Y" | Y-axis label |
colorScheme | string | "RdYlBu" | Color scheme name |
colorDomain | [number, number] | auto | Fixed color scale range |
reverseColors | boolean | false | Reverse color scale |
showValues | boolean | true | Display values in cells |
showLegend | boolean | true | Display color legend |
Notes
- Hover over cells to see detailed tooltips with x, y, and value information
- Cell text color automatically adjusts for contrast based on background color
- The legend displays the value range and helps interpret colors
- Axis labels are rotated 45° for better readability with longer text