Categories: CSSScriptWeb Design

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

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

Table of Contents

Toggle

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.2 (09/08/2025)

  • Release with modern optimizations

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

The post Creating Funnel Charts Using SVG and D3.js – D3 Funnel appeared first on CSS Script.

rssfeeds-admin

Share
Published by
rssfeeds-admin

Recent Posts

Gas-Tax Pause Talks

FORT WAYNE, Ind. (WOWO) — After President Trump signaled support for suspending the 18-cent federal…

33 minutes ago

Katherine Legge Tries The Double

INDIANAPOLIS, Ind. (WOWO) — Katherine Legge will become the first woman to try and complete…

33 minutes ago

US Senate again rejects resolution to force authorization for Iran war

The U.S. Capitol is pictured on March 3, 2026. (Photo by Jennifer Shutt/States Newsroom)WASHINGTON —…

38 minutes ago

US Senate again rejects resolution to force authorization for Iran war

The U.S. Capitol is pictured on March 3, 2026. (Photo by Jennifer Shutt/States Newsroom)WASHINGTON —…

38 minutes ago

US Senate again rejects resolution to force authorization for Iran war

The U.S. Capitol is pictured on March 3, 2026. (Photo by Jennifer Shutt/States Newsroom)WASHINGTON —…

38 minutes ago

As property insurance crisis worsens, some lawmakers target Big Oil

A firefighter watches as the Gifford Fire burns on Aug. 6, 2025, in Los Padres…

38 minutes ago

This website uses cookies.