Range area ​

A series with the columns x, max and min; D3PAreaRenderer with base: 'min' draws the area between the two curves, and the tooltip shows both values.

ts
import * as d3 from 'd3'
import {
  D3PAreaRenderer, D3PAutoDomain, d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PChart,
  D3PCursorIndicator, d3pDomLegend, d3pDomTooltip, D3PLegendBundle, D3PLineRenderer, D3PSeries, D3PTooltip,
  getGlobalBus,
} from 'd3pict'
// your series data: replace these generators with your own values
import { walk } from './data'

const bus = getGlobalBus()

const container = document.getElementById('app')! // any element with a size: the chart fills it

const mean = walk(8, 24, 15, 6, 0, 30)
// each point has a maximum and a minimum: the area is drawn between them
const band = new D3PSeries({
  bus,
  name: 'min / max',
  columns: ['x', 'max', 'min'],
  data: mean.map((m, i) => [i, m + 5 + (i % 5), m - 4 - (i % 3)]),
})
const average = new D3PSeries({ bus, name: 'average', data: mean.map((v, i) => [i, v]) })

const dx = new D3PAxisDomain({ bus, domain: [0, 23] })
const dy = new D3PAxisDomain({ bus, domain: [0, 1] })
const auto = new D3PAutoDomain({ bus })
auto.linkSeries(band, [dx, dy]) // the Y domain covers the minima and the maxima
auto.linkSeries(average, [dx, dy])

const x = new D3PAxis({ bus, name: 'x', domain: dx, props: { tickFormat: (v: number) => `${Math.round(v)}h` } })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', props: { grid: { enabled: true }, tickFormat: (v: number) => `${d3.format('.1f')(v)}°` } })
const area = new D3PAreaRenderer({ bus, series: band, props: { base: 'min', style: { color: '#4e79a7', opacity: 0.3, curve: 'monotone' } } })
const line = new D3PLineRenderer({ bus, series: average, props: { style: { color: '#4e79a7', curve: 'monotone' } } })

const cursor = new D3PCursorIndicator({ bus })
const tooltip = new D3PTooltip({ bus })
const legend = new D3PLegendBundle({ bus })
const objects = [x, y, area, line, cursor, tooltip, legend]

const chart = new D3PChart({ container, bus })
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)
const stopLegend = d3pDomLegend(legend)

All the chart types · how each type is built