ds
Data display
Funnel

Funnel

Steps that lose people, with the drop between each.

Steps that lose people. Each column is a step, its bar the share of everyone who started, and the hatched ghost behind it is where the previous step stood: the hatched part is who left. The numbers under each bar say both.

Signed up 12,480 100%start
Created a project 7,310 59%-41%
Connected a source 4,020 32%-45%
First pipeline run 3,140 25%-22%
Scheduled a pipeline 1,760 14%-44%

Show code

<ol class="funnel" style="--steps:5" aria-label="Onboarding funnel, last 30 days">
  <li>
    <span class="fn-l">Signed up</span>
    <span class="fn-v">12,480</span>
    <span class="fn-bar" style="--v:1.0000;--p:1.0000"><i></i></span>
    <span class="fn-drop"><b>100%</b><span>start</span></span>
  </li>
  <li>
    <span class="fn-l">Created a project</span>
    <span class="fn-v">7,310</span>
    <span class="fn-bar" style="--v:0.5857;--p:1.0000"><i></i></span>
    <span class="fn-drop"><b>59%</b><span class="bad">-41%</span></span>
  </li>
  <li>
    <span class="fn-l">Connected a source</span>
    <span class="fn-v">4,020</span>
    <span class="fn-bar" style="--v:0.3221;--p:0.5857"><i></i></span>
    <span class="fn-drop"><b>32%</b><span class="bad">-45%</span></span>
  </li>
  <li>
    <span class="fn-l">First pipeline run</span>
    <span class="fn-v">3,140</span>
    <span class="fn-bar" style="--v:0.2516;--p:0.3221"><i></i></span>
    <span class="fn-drop"><b>25%</b><span class="">-22%</span></span>
  </li>
  <li>
    <span class="fn-l">Scheduled a pipeline</span>
    <span class="fn-v">1,760</span>
    <span class="fn-bar" style="--v:0.1410;--p:0.2516"><i></i></span>
    <span class="fn-drop"><b>14%</b><span class="bad">-44%</span></span>
  </li>
</ol>

Under each bar: the share of the first step in ink, and the drop from the previous step on the right. A drop over 40% turns red, which here points straight at connecting a source. On a phone the columns become rows and the bars run sideways.

Class	On	What it does
`.funnel`	ol	The steps. Set `--steps` to the number of columns.
`.fn-l / .fn-v`	span	The step name and its count.
`.fn-bar`	span	The bar. `--v` is this step against the first, `--p` the previous step (the hatched ghost). `--h` sets the height (8rem).
`.fn-drop`	span	The share of the first step in `b`, then the drop. `.bad` marks a drop worth acting on.

Count unique people or runs, and say the window.
Mark the worst step, not every step.

Don't

Trapezoid shapes. They distort the drop.
Funnels for steps people can do in any order.

Accessibility

An ordered list, with counts and percentages as text in every step.