PHPackages intelogie/d3-funnel - 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. [Utility & Helpers](/categories/utility) 4. / 5. intelogie/d3-funnel ActiveLibrary[Utility & Helpers](/categories/utility) intelogie/d3-funnel =================== 05JavaScript Since May 8Pushed 9y ago1 watchersCompare [ Source](https://github.com/INTELOGIE/d3-funnel)[ Packagist](https://packagist.org/packages/intelogie/d3-funnel)[ RSS](/packages/intelogie-d3-funnel/feed)WikiDiscussions master Synced 3d ago READMEChangelogDependenciesVersions (1)Used By (0) D3 Funnel ========= [](#d3-funnel) [![npm](https://camo.githubusercontent.com/8fa57b7d91fa23bd1cd363608f0525e4824b1225cc3ee0c65996ca42697dd286/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f64332d66756e6e656c2e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/d3-funnel)[![Build Status](https://camo.githubusercontent.com/69237f333c1e4835155e42afbfed8b26b4e0784c1b8a6fac8e3666d4a6fbaab2/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6a616b657a617465636b792f64332d66756e6e656c2f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/jakezatecky/d3-funnel)[![Dependency Status](https://camo.githubusercontent.com/76046064e11d329bc1016e027b5d77882445718602888a0dc1996aa6a3d00a8d/68747470733a2f2f696d672e736869656c64732e696f2f64617669642f6a616b657a617465636b792f64332d66756e6e656c2e7376673f7374796c653d666c61742d737175617265)](https://david-dm.org/jakezatecky/d3-funnel)[![devDependency Status](https://camo.githubusercontent.com/5604c4145c2dedf6722d47bfa3b0c0304e5af3acb5168b0458ec399f750f1225/68747470733a2f2f64617669642d646d2e6f72672f6a616b657a617465636b792f64332d66756e6e656c2f6465762d7374617475732e7376673f7374796c653d666c61742d737175617265)](https://david-dm.org/jakezatecky/d3-funnel#info=devDependencies)[![GitHub license](https://camo.githubusercontent.com/942e017bf0672002dd32a857c95d66f28c5900ab541838c6c664442516309c8a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c61742d737175617265)](https://raw.githubusercontent.com/jakezatecky/d3-funnel/master/LICENSE.txt) **D3Funnel** is an extensible, open-source JavaScript library for rendering funnel charts using the [D3.js](http://d3js.org/) library. D3Funnel is focused on providing practical and visually appealing funnels through a variety of customization options. Check out the [examples page](http://jakezatecky.github.io/d3-funnel/)to get a showcasing of the several possible options. Installation ============ [](#installation) To install this library, simply include both [D3.js v4.x](http://d3js.org/) and D3Funnel: ``` ``` Alternatively, if you are using Webpack or Browserify, you can install the npm package and `require` or `import` the module. This will include a compatible version of D3.js for you: ``` npm install d3-funnel --save ``` ``` // CommonJS var D3Funnel = require('d3-funnel'); // ES6 import D3Funnel from 'd3-funnel'; ``` Usage ===== [](#usage) To use this library, you must create a container element and instantiate a new funnel chart: ``` const data = [ ['Plants', 5000], ['Flowers', 2500], ['Perennials', 200], ['Roses', 50], ]; const options = { block: { dynamicHeight: true } }; const chart = new D3Funnel('#funnel'); chart.draw(data, options); ``` Options ------- [](#options) OptionDescriptionTypeDefault`chart.width`The width of the chart in pixels or a percentage.mixedContainer's width`chart.height`The height of the chart in pixels or a percentage.mixedContainer's height`chart.bottomWidth`The percent of total width the bottom should be.number`1 / 3``chart.bottomPinch`How many blocks to pinch on the bottom to create a funnel "neck".number`0``chart.inverted`Whether the funnel direction is inverted (like a pyramid).bool`false``chart.animate`The load animation speed in milliseconds.number`0` (disabled)`chart.curve.enabled`Whether the funnel is curved.bool`false``chart.curve.height`The curvature amount.number`20``chart.totalCount`Override the total count used in ratio calculations.number`null``block.dynamicHeight`Whether the block heights are proportional to their weight.bool`false``block.dynamicSlope`Whether the block widths are proportional to their value decrease.bool`false``block.barOverlay`Whether the blocks have bar chart overlays proportional to its weight.bool`false``block.fill.scale`The background color scale as an array or function.mixed`d3.schemeCategory10``block.fill.type`Either `'solid'` or `'gradient'`.string`'solid'``block.minHeight`The minimum pixel height of a block.number`0``block.highlight`Whether the blocks are highlighted on hover.bool`false``label.fontFamily`Any valid font family for the labels.string`null``label.fontSize`Any valid font size for the labels.string`'14px'``label.fill`Any valid hex color for the label color.string`'#fff'``label.format`Either `function(label, value)`, an array, or a format string. See below.mixed`'{l}: {f}'``events.click.block`Callback `function(data)` for when a block is clicked.function`null`### Label Format [](#label-format) The option `label.format` can either be a function or a string. The following keys will be substituted by the string formatter: KeyDescription`'{l}'`The block's supplied label.`'{v}'`The block's raw value.`'{f}'`The block's formatted value.### Event Data [](#event-data) Block-based events are passed a `data` object containing the following elements: KeyTypeDescriptionindexnumberThe index of the block.nodeobjectThe DOM node of the block.valuenumberThe numerical value.fillstringThe background color.label.rawstringThe unformatted label.label.formattedstringThe result of `options.label.format`.label.colorstringThe label color.Example: ``` { index: 0, node: { ... }, value: 150, fill: '#c33', label: { raw: 'Visitors', formatted: 'Visitors: 150', color: '#fff', }, }, ``` ### Overriding Defaults [](#overriding-defaults) You may wish to override the default chart options. For example, you may wish for every funnel to have proportional heights. To do this, simply modify the `D3Funnel.defaults` property: ``` D3Funnel.defaults.block.dynamicHeight = true; ``` Should you wish to override multiple properties at a time, you may consider using [lodash's](https://lodash.com/docs#merge) `_.merge` or [jQuery's](https://api.jquery.com/jquery.extend/) `$.extend`: ``` D3Funnel.defaults = _.merge(D3Funnel.defaults, { block: { dynamicHeight: true, fill: { type: 'gradient', }, }, label: { format: '{l}: ${f}', }, }); ``` API --- [](#api) Additional methods beyond `draw()` are accessible after instantiating the chart: MethodDescription`destroy()`Removes the funnel and its events from the DOM.Advanced Data ------------- [](#advanced-data) You can specify colors to override `block.fill.scale` and `label.fill` for any data point (hex only): ``` var data = [ ['Teal', 12000, '#008080', '#080800'], ['Byzantium', 4000, '#702963'], ['Persimmon', 2500, '#ff634d', '#6f34fd'], ['Azure', 1500, '#007fff', '#07fff0'], // Background ---^ ^--- Label ]; ``` In addition to using `label.format`, you can also pass formatted values in an array: ``` var data = [ ['Teal', [12000, 'USD 12,000']], ['Byzantium', [4000, 'USD 4,000']], ['Persimmon', [2500, 'USD 2,500']], ['Azure', [1500, 'USD 1,500']], ]; ``` License ======= [](#license) MIT license. ### Health Score 20 — LowBetter than 14% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community11 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 98.5% 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 [![jakezatecky](https://avatars.githubusercontent.com/u/3210703?v=4)](https://github.com/jakezatecky "jakezatecky (457 commits)")[![arfon](https://avatars.githubusercontent.com/u/4483?v=4)](https://github.com/arfon "arfon (3 commits)")[![jonathanmv](https://avatars.githubusercontent.com/u/86024?v=4)](https://github.com/jonathanmv "jonathanmv (3 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/health.svg) ``` [![Health](https://phpackages.com/badges/intelogie-d3-funnel/health.svg)](https://phpackages.com/packages/intelogie-d3-funnel) ``` ### Alternatives [nitotm/efficient-language-detector Fast and accurate natural language detection. Detector written in PHP. Nito-ELD, ELD. 59252.9k6](/packages/nitotm-efficient-language-detector) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)