d3-funnel.js | Creating SVG Funnel Charts with D3.js

d3-funnel.js is javascript chart library based on d3.js. It can make us create svg based funnel charts easily for web applications.

d3-funnel.js - Creating SVG Funnel Charts with D3.js

AuthorLinksMade withLast update
jakezateckyOffice HomeJavaScriptSep 15, 2022

How to create svg based funnel chart using d3-funnel.js?

1.Import d3.js in your html page first.

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

2.Import d3-funnel.js file

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

3.Create a DIV element to show the funnel chart

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

4.Prepare the data for funnel chart using an array

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

5.Use html div id and funnel chart data to create a funnel chart

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

You also can use some options to set the funnel chart.

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

Leave a Reply

Your email address will not be published. Required fields are marked *