Dumbbell ​

Two values per category joined by a segment: D3PDumbbellRenderer on a series with start and end.

ts
import {
  d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PChart, d3pDomTooltip, D3PDumbbellRenderer, D3PSeries,
  D3PTooltip, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

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

const data: [string, number, number][] = [['North', 42, 68], ['South', 55, 61], ['East', 38, 74], ['West', 60, 58], ['Central', 47, 80]]
const satisfaction = new D3PSeries({ bus, name: 'satisfaction', columns: ['x', 'start', 'end'], primary: 'end', data })

const dscore = new D3PAxisDomain({ bus, domain: [20, 100] })
const dregion = new D3PAxisDomain({ bus, domain: data.map((d) => d[0]).reverse() })
const score = new D3PAxis({ bus, name: 'score', domain: dscore, props: { grid: { enabled: true } } })
const region = new D3PAxis({ bus, name: 'region', domain: dregion, position: 'left', scaleType: 'band' })
const dumbbells = new D3PDumbbellRenderer({ bus, series: satisfaction, props: { orientation: 'horizontal' } })

const tooltip = new D3PTooltip({ bus })
const objects = [score, region, dumbbells, tooltip]
const margin = { left: 80 }

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)

All the chart types · how each type is built