PHPackages                             intelogie/d3-funnel-charts - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. intelogie/d3-funnel-charts

ActiveLibrary

intelogie/d3-funnel-charts
==========================

098JavaScript

Since May 8Pushed 9y ago1 watchersCompare

[ Source](https://github.com/INTELOGIE/d3-funnel-charts)[ Packagist](https://packagist.org/packages/intelogie/d3-funnel-charts)[ RSS](/packages/intelogie-d3-funnel-charts/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

d3-funnel-charts
================

[](#d3-funnel-charts)

A funnel chart implementation using d3.js

Usage
=====

[](#usage)

To begin, you must instantiate a FunnelChart. The options you can pass to the FunnelChart are the following (the only required option is `data`):

`data` = an array containing arrays of categories and engagement in order from greatest expected funnel engagement to lowest.

`width` & `height` = width & height of chart (default is 400 and 600)

`bottomPct` = the percentage of the width the bottom base of the funnel trapezoid takes up. The top base always takes up the entire width, but the percentage of the total width that the bottom base takes up can be changed. (default = 1/3)

To actually draw the FunnelChart, call the `draw` method of the FunnelChart. The draw method takes in a [selector](https://github.com/mbostock/d3/wiki/Selections) for an element that the FunnelChart should be drawn in and a speed (default = 2.5). Make sure that you already have an element that corresponds to the selector you use because d3-funnel-charts doesn't create elements; it just uses an element you already have in your HTML as a container.

Example:

```

 // Make sure to include d3.js first

    var data = [['Video Views', 1500], ['Comments', 300], ['Video Responses', 150]];
	var chart = new FunnelChart({
					data: data,
					width: 650,
					height: 450,
					bottomPct: 1/4
				});
	chart.draw('#funnelContainer', 2);

```

A demo of the above example can be found [here](http://smithamilli.com/blog/funnel-charts-in-d3.js/)

License
=======

[](#license)

MIT

###  Health Score

22

—

LowBetter than 23% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 88.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/8cd960536c07e255b2e6f7e55c03c6d09274b215ccceaccc38926ffe03e098a7?d=identicon)[bgauthier](/maintainers/bgauthier)

---

Top Contributors

[![smilli](https://avatars.githubusercontent.com/u/5109188?v=4)](https://github.com/smilli "smilli (16 commits)")[![akandels](https://avatars.githubusercontent.com/u/142410?v=4)](https://github.com/akandels "akandels (1 commits)")[![bgauthier](https://avatars.githubusercontent.com/u/1789355?v=4)](https://github.com/bgauthier "bgauthier (1 commits)")

### Embed Badge

![Health badge](/badges/intelogie-d3-funnel-charts/health.svg)

```
[![Health](https://phpackages.com/badges/intelogie-d3-funnel-charts/health.svg)](https://phpackages.com/packages/intelogie-d3-funnel-charts)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)