Bubble ​

A third column, size, gives the area of each bubble: D3PBubbleRenderer with a radius range.

ts
import {
  d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PBubbleRenderer, D3PChart, d3pDomTooltip, 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 random = rng(7)
// the third column is the size of the bubble
const countries = new D3PSeries({
  bus,
  name: 'countries',
  columns: ['x', 'y', 'size'],
  data: Array.from({ length: 28 }, () => [10 + random() * 80, 10 + random() * 80, 1 + random() * 99]),
})

const dx = new D3PAxisDomain({ bus, domain: [0, 100] })
const dy = new D3PAxisDomain({ bus, domain: [0, 100] })
const x = new D3PAxis({ bus, name: 'x', domain: dx })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', props: { grid: { enabled: true } } })
const bubbles = new D3PBubbleRenderer({ bus, series: countries, props: { style: { color: '#e15759' }, radius: [3, 28] } })

const tooltip = new D3PTooltip({ bus })
const objects = [x, y, bubbles, tooltip]

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)

All the chart types · how each type is built