Entonnoir (funnel)

Une étape par point de la série, des largeurs proportionnelles aux tailles ; pas d'axes, donc pas de système de coordonnées non plus. La légende a une entrée par étape.

Inclure les générateurs de données

import {
  d3pAutoInteractionArea, D3PChart, d3pDomLegend, d3pDomTooltip, D3PFunnelRenderer, D3PLegendBundle,
  D3PSeries, D3PTooltip, getGlobalBus,
} from 'd3pict'

const bus = getGlobalBus()

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

const conversion = new D3PSeries({ bus, name: 'conversion', data: [['Visits', 12000], ['Sign-ups', 4200], ['Activated', 2600], ['Trial', 1100], ['Paid', 430]] })
const stages = new D3PFunnelRenderer({ bus, series: conversion })

const tooltip = new D3PTooltip({ bus })
const legend = new D3PLegendBundle({ bus })
const objects = [stages, tooltip, legend]
const margin = { left: 20, right: 20 }

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)
const stopLegend = d3pDomLegend(legend)

Tous les types de graphiques · comment chaque type est construit