English
Heatmap
Two categories and a value: D3PHeatmapRenderer colors each cell with a D3PColorScale, and D3PColorLegend shows the scale. The auto domain fits the colors to the values.
ts
import {
D3PAutoDomain, d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PChart, D3PColorLegend, D3PColorScale,
d3pDomTooltip, D3PHeatmapRenderer, D3PSeries, D3PTooltip, getGlobalBus,
} from 'd3pict'
// your series data: replace these generators with your own values
import { rng } from './data'
const bus = getGlobalBus()
const container = document.getElementById('app')! // any element with a size: the chart fills it
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const hours = Array.from({ length: 12 }, (_, i) => `${i * 2}h`)
const random = rng(5)
const rows = days.flatMap((d, di) => hours.map((h, hi) => [h, d, Math.round(10 + 80 * Math.exp(-((hi - 6 - (di > 4 ? 1.5 : 0)) ** 2) / 6) * (di > 4 ? 0.7 : 1) + random() * 12)]))
// two categories (x, y) and a value, the value being the primary column
const traffic = new D3PSeries({ bus, name: 'traffic', columns: ['x', 'y', 'value'], primary: 'value', data: rows })
const dx = new D3PAxisDomain({ bus, domain: hours })
const dy = new D3PAxisDomain({ bus, domain: [...days].reverse() }) // the first category of a band axis is at the bottom
const colors = new D3PColorScale({ bus, domain: [0, 100] })
const auto = new D3PAutoDomain({ bus })
auto.linkSeries(traffic, { x: dx, value: colors.domain }) // the colors follow the values; the days keep their order
const x = new D3PAxis({ bus, name: 'x', domain: dx, scaleType: 'band' })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', scaleType: 'band' })
const cells = new D3PHeatmapRenderer({ bus, series: traffic, colors })
const scale = new D3PColorLegend({ bus, scale: colors, title: 'visits' })
const tooltip = new D3PTooltip({ bus })
const objects = [x, y, cells, scale, tooltip]
const margin = { right: 70 }
const chart = new D3PChart({ container, bus, margin })
const stopArea = d3pAutoInteractionArea(chart) // before the objects: the cursor, the tooltip and the tools ask for an interaction area
objects.forEach((o) => o.addToChart(chart))
const stopTooltip = d3pDomTooltip(tooltip)