Press "Enter" to skip to content

A JavaScript Library for Displaying Funnel Charts Using the D3.js Framework

d3-funnel is an expandable, open-source JavaScript library for displaying funnel diagrams/Charts using the D3.js. library. D3-funnel focuses on providing practical and visually appealing funnels through a variety of customization options.

funnel chart with multiple measures, funnel chart template download, funnel chart, how to add funnel chart, when to use funnel chart, funnel chart js

How to make use of it:

Load the mandatory 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 within the doc.

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

Create a DIV aspect that can function as the container for the funnel chart.

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

Add an array of information to the funnel chart.

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

The JavaScript to draw a default funnel chart inside the ‘funnel’ DIV aspect.

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

Available choices 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);

Creating Funnel Charts Using SVG, d3-funnel Plugin/Github


See Demo And Download

Official Website(jakezatecky): Click Here

This superior jQuery/javascript plugin is developed by jakezatecky. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.