ASCII heatmaps with cell marks and color ramps
glyphChartCell(data, { x, y, fill }) maps a numeric fill value to a ramp. Set both scales to band for a flush heatmap grid.
Seasonal city temperatures
Section titled “Seasonal city temperatures”This grid uses all twelve months and eight cities from the workbench’s 1991–2020 monthly city-temperature dataset, in °C. Positive and negative values produce a diverging ramp with a blank at zero.
Monthly temperatures (C)
city
│▙▙▙▙▚▚▚▚░░░░░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒░░░░▚▚▚▚
Minneapolis ┤▙▙▙▙▚▚▚▚░░░░░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒░░░░▚▚▚▚
│▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓████████████████▓▓▓▓▒▒▒▒▒▒▒▒
Phoenix ┤▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓████████████████▓▓▓▓▒▒▒▒▒▒▒▒
│▖▖▖▖░░░░░░░░░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒░░░░▖▖▖▖
Denver ┤▖▖▖▖░░░░░░░░░░░░▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒░░░░▖▖▖▖
│░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░
Seattle ┤░░░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
Miami ┤▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒
Los Angeles ┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒
│▞▞▞▞▖▖▖▖░░░░▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒░░░░▖▖▖▖
Chicago ┤▞▞▞▞▖▖▖▖░░░░▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒░░░░▖▖▖▖
│░░░░░░░░░░░░▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒░░░░░░░░
New York ┤░░░░░░░░░░░░▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒░░░░░░░░
└──┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬─
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
month Code
import { renderGlyphChart } from "@glyphcss/charts";
const { text } = renderGlyphChart({
marks: [
{
type: "cell",
data: [
{
city: "New York",
month: "Jan",
temperature: 0.9
},
{
city: "New York",
month: "Feb",
temperature: 2.2
},
{
city: "New York",
month: "Mar",
temperature: 6
},
{
city: "New York",
month: "Apr",
temperature: 12.1
},
{
city: "New York",
month: "May",
temperature: 17.3
},
{
city: "New York",
month: "Jun",
temperature: 22.2
},
{
city: "New York",
month: "Jul",
temperature: 25.3
},
{
city: "New York",
month: "Aug",
temperature: 24.5
},
{
city: "New York",
month: "Sep",
temperature: 20.7
},
{
city: "New York",
month: "Oct",
temperature: 14.4
},
{
city: "New York",
month: "Nov",
temperature: 8.9
},
{
city: "New York",
month: "Dec",
temperature: 3.9
},
{
city: "Chicago",
month: "Jan",
temperature: -3.8
},
{
city: "Chicago",
month: "Feb",
temperature: -1.8
},
{
city: "Chicago",
month: "Mar",
temperature: 3.9
},
{
city: "Chicago",
month: "Apr",
temperature: 9.8
},
{
city: "Chicago",
month: "May",
temperature: 15.9
},
{
city: "Chicago",
month: "Jun",
temperature: 21.4
},
{
city: "Chicago",
month: "Jul",
temperature: 24.1
},
{
city: "Chicago",
month: "Aug",
temperature: 23.2
},
{
city: "Chicago",
month: "Sep",
temperature: 19.1
},
{
city: "Chicago",
month: "Oct",
temperature: 12.2
},
{
city: "Chicago",
month: "Nov",
temperature: 5.2
},
{
city: "Chicago",
month: "Dec",
temperature: -0.8
},
{
city: "Los Angeles",
month: "Jan",
temperature: 14.7
},
{
city: "Los Angeles",
month: "Feb",
temperature: 15
},
{
city: "Los Angeles",
month: "Mar",
temperature: 16.2
},
{
city: "Los Angeles",
month: "Apr",
temperature: 17.6
},
{
city: "Los Angeles",
month: "May",
temperature: 18.8
},
{
city: "Los Angeles",
month: "Jun",
temperature: 20.7
},
{
city: "Los Angeles",
month: "Jul",
temperature: 22.9
},
{
city: "Los Angeles",
month: "Aug",
temperature: 23.7
},
{
city: "Los Angeles",
month: "Sep",
temperature: 23.1
},
{
city: "Los Angeles",
month: "Oct",
temperature: 20.7
},
{
city: "Los Angeles",
month: "Nov",
temperature: 17.2
},
{
city: "Los Angeles",
month: "Dec",
temperature: 14.3
},
{
city: "Miami",
month: "Jan",
temperature: 20.3
},
{
city: "Miami",
month: "Feb",
temperature: 21.5
},
{
city: "Miami",
month: "Mar",
temperature: 22.8
},
{
city: "Miami",
month: "Apr",
temperature: 24.8
},
{
city: "Miami",
month: "May",
temperature: 26.7
},
{
city: "Miami",
month: "Jun",
temperature: 28.2
},
{
city: "Miami",
month: "Jul",
temperature: 28.9
},
{
city: "Miami",
month: "Aug",
temperature: 29
},
{
city: "Miami",
month: "Sep",
temperature: 28.3
},
{
city: "Miami",
month: "Oct",
temperature: 26.7
},
{
city: "Miami",
month: "Nov",
temperature: 23.8
},
{
city: "Miami",
month: "Dec",
temperature: 21.8
},
{
city: "Seattle",
month: "Jan",
temperature: 6
},
{
city: "Seattle",
month: "Feb",
temperature: 6.7
},
{
city: "Seattle",
month: "Mar",
temperature: 8.4
},
{
city: "Seattle",
month: "Apr",
temperature: 10.7
},
{
city: "Seattle",
month: "May",
temperature: 14.2
},
{
city: "Seattle",
month: "Jun",
temperature: 16.7
},
{
city: "Seattle",
month: "Jul",
temperature: 19.5
},
{
city: "Seattle",
month: "Aug",
temperature: 19.7
},
{
city: "Seattle",
month: "Sep",
temperature: 17
},
{
city: "Seattle",
month: "Oct",
temperature: 12.1
},
{
city: "Seattle",
month: "Nov",
temperature: 8.1
},
{
city: "Seattle",
month: "Dec",
temperature: 5.6
},
{
city: "Denver",
month: "Jan",
temperature: -0.2
},
{
city: "Denver",
month: "Feb",
temperature: 0.4
},
{
city: "Denver",
month: "Mar",
temperature: 5.3
},
{
city: "Denver",
month: "Apr",
temperature: 8.8
},
{
city: "Denver",
month: "May",
temperature: 14.1
},
{
city: "Denver",
month: "Jun",
temperature: 20.1
},
{
city: "Denver",
month: "Jul",
temperature: 23.9
},
{
city: "Denver",
month: "Aug",
temperature: 22.7
},
{
city: "Denver",
month: "Sep",
temperature: 18.2
},
{
city: "Denver",
month: "Oct",
temperature: 10.6
},
{
city: "Denver",
month: "Nov",
temperature: 4.1
},
{
city: "Denver",
month: "Dec",
temperature: -0.4
},
{
city: "Phoenix",
month: "Jan",
temperature: 13.8
},
{
city: "Phoenix",
month: "Feb",
temperature: 15.5
},
{
city: "Phoenix",
month: "Mar",
temperature: 19.1
},
{
city: "Phoenix",
month: "Apr",
temperature: 22.9
},
{
city: "Phoenix",
month: "May",
temperature: 27.8
},
{
city: "Phoenix",
month: "Jun",
temperature: 33
},
{
city: "Phoenix",
month: "Jul",
temperature: 35.3
},
{
city: "Phoenix",
month: "Aug",
temperature: 34.7
},
{
city: "Phoenix",
month: "Sep",
temperature: 31.8
},
{
city: "Phoenix",
month: "Oct",
temperature: 25.2
},
{
city: "Phoenix",
month: "Nov",
temperature: 18.4
},
{
city: "Phoenix",
month: "Dec",
temperature: 13.2
},
{
city: "Minneapolis",
month: "Jan",
temperature: -8.8
},
{
city: "Minneapolis",
month: "Feb",
temperature: -6.3
},
{
city: "Minneapolis",
month: "Mar",
temperature: 0.7
},
{
city: "Minneapolis",
month: "Apr",
temperature: 8.4
},
{
city: "Minneapolis",
month: "May",
temperature: 15.3
},
{
city: "Minneapolis",
month: "Jun",
temperature: 20.9
},
{
city: "Minneapolis",
month: "Jul",
temperature: 23.5
},
{
city: "Minneapolis",
month: "Aug",
temperature: 22.1
},
{
city: "Minneapolis",
month: "Sep",
temperature: 17.5
},
{
city: "Minneapolis",
month: "Oct",
temperature: 9.7
},
{
city: "Minneapolis",
month: "Nov",
temperature: 1.6
},
{
city: "Minneapolis",
month: "Dec",
temperature: -5.6
}
],
channels: {
x: "month",
y: "city",
fill: "temperature"
}
}
],
scales: {
x: {
type: "band"
},
y: {
type: "band"
}
},
title: "Monthly temperatures (C)"
}, {
target: "chat",
width: 84,
height: 28
});
console.log(text); import { glyphChartCell, renderGlyphChart } from "@glyphcss/charts";const result = renderGlyphChart({ marks: [glyphChartCell([ { month: "Jan", city: "Seattle", temperature: 6.0 }, { month: "Jul", city: "Seattle", temperature: 19.5 }, { month: "Jan", city: "Phoenix", temperature: 13.8 }, { month: "Jul", city: "Phoenix", temperature: 35.3 }, ], { x: "month", y: "city", fill: "temperature" })], scales: { x: { type: "band" }, y: { type: "band" } },}, { target: "web", width: 60, height: 14 });Cell-only plots with two band scales fit an integer grid of 2k × k cells and can shrink the requested canvas to that grid. Unsigned heatmaps use a nonblank ramp and a range key. A signed heatmap reserves blank only for zero.
Use render option cellRamp: [".", ":", "+", "#"] to replace an unsigned ramp, lightest first. Signed ramps stay gain/loss ramps. Mark options.color sets one ink color or [lossColor, gainColor]; it does not replace the numeric fill channel. See targets and colors.