MAIDR Documentation - v4.4.0
    Preparing search index...
    • Binds a D3.js funnel chart to MAIDR.

      A funnel is a bar chart whose order is meaningful: the trace pitches the retention between adjacent stages rather than the raw counts, because the drop-off is what the chart is drawn for. Stage order therefore comes straight from the DOM — the binder keeps the elements in the order D3 joined them, so draw the stages top-to-bottom (or left-to-right) in funnel order.

      selector matches one element per stage, whichever mark you drew it with: a trapezoid <path>, a centred <rect>, or a <g> per stage.

      Parameters

      • svg: Element

        The SVG element (or container) containing the D3 funnel chart.

      • config: D3BarConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      bindD3Funnel(svgElement, {
      selector: 'path.stage',
      title: 'Checkout Funnel',
      axes: { x: 'Stage', y: 'People' },
      x: 'stage',
      y: 'count',
      });