Creating Funnel Charts Using SVG and D3.js – D3 Funnel

Preview:

Description:

D3 Funnel is a JavaScript library for drawing customizable SVG based funnel charts using D3.js library.

Basic Usage:

Load the necessary d3.js from a CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>

Load the D3 Funnel JS library in the document.

<script src="path/to/d3-funnel.js"></script>

Create a DIV element that will serve as the container for the funnel chart.

<div id="funnel"></div>

Add an array of data to the funnel chart.

data = [
  ["Applicants",   12000],
  ["Pre-screened", 4000],
  ["Interviewed",  2500],
  ["Hired",        1500]
];

The JavaScript to draw a default funnel chart within the ‘funnel’ DIV element.

var chart = new D3Funnel("#funnel");
chart.draw(data);

Available options with default values.

var options = {
    chart: {
      width: 350,
      height: 400,
      bottomWidth: 1 / 3,
      bottomPinch: 0,
      inverted: false,
      horizontal: false,
      animate: 0,
      curve: {
          enabled: false,
          height: 20,
          shade: -0.4,
      },
      totalCount: null,
    },
    block: {
      dynamicHeight: false,
      dynamicSlope: false,
      barOverlay: false,
      fill: {
          scale: scaleOrdinal(schemeCategory10).domain(range(0, 10)),
          type: 'solid',
      },
      minHeight: 0,
      highlight: false,
    },
    label: {
      enabled: true,
      fontFamily: null,
      fontSize: '14px',
      fill: '#fff',
      format: '{l}: {f}',
    },
    tooltip: {
      enabled: false,
      format: '{l}: {f}',
    },
    events: {
      click: {
          block: null,
      },
    },
};
chart.draw(data, options);

Changelog:

v2.1.0 (02/26/2022)

• Add TypeScript index file

v2.0.1 (06/04/2021)

• Fix an issue with tooltip alignment in newer versions of Chrome
• Upgrade to using D3 v6 (changes events.click.block(d) to events.click.block(event, d))

v2.0.0 (01/16/2021)

• Fix animation errors in D3 v6

v1.2.2 (01/27/2019)

• Significantly reduce package size to around 27% of its original size

v1.2.1 (10/14/2018)

• Fix issue where dist/d3-funnel.js was being minified alongside dist/d3-funnel.min.js

v1.2.0 (06/26/2018)

• Add official support for D3.js v5