{"id":13481139,"url":"https://github.com/jakezatecky/d3-funnel","last_synced_at":"2025-05-16T05:06:12.363Z","repository":{"id":18670543,"uuid":"21878937","full_name":"jakezatecky/d3-funnel","owner":"jakezatecky","description":"A JavaScript library for rendering funnel charts using the D3.js framework.","archived":false,"fork":false,"pushed_at":"2024-10-21T10:27:52.000Z","size":1721,"stargazers_count":333,"open_issues_count":21,"forks_count":93,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-08T17:54:10.503Z","etag":null,"topics":["chart","d3","javascript","visualization"],"latest_commit_sha":null,"homepage":"http://jakezatecky.github.io/d3-funnel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jakezatecky.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-07-15T23:02:30.000Z","updated_at":"2025-04-10T19:14:59.000Z","dependencies_parsed_at":"2024-01-16T22:23:25.658Z","dependency_job_id":"3aa97a06-d03a-45c2-882a-006dd3086814","html_url":"https://github.com/jakezatecky/d3-funnel","commit_stats":{"total_commits":621,"total_committers":12,"mean_commits":51.75,"dds":"0.12077294685990336","last_synced_commit":"1e03662bc8a0cf13b7d08d8b1572e5ad9c7b7817"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Fd3-funnel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Fd3-funnel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Fd3-funnel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Fd3-funnel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jakezatecky","download_url":"https://codeload.github.com/jakezatecky/d3-funnel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","d3","javascript","visualization"],"created_at":"2024-07-31T17:00:49.067Z","updated_at":"2025-05-16T05:06:12.345Z","avatar_url":"https://github.com/jakezatecky.png","language":"JavaScript","funding_links":[],"categories":["Charts"],"sub_categories":[],"readme":"# d3-funnel\n\n[![npm](https://img.shields.io/npm/v/d3-funnel.svg?style=flat-square)](https://www.npmjs.com/package/d3-funnel)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/jakezatecky/d3-funnel/main.yml?branch=master\u0026style=flat-square)](https://github.com/jakezatecky/d3-funnel/actions/workflows/main.yml)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/jakezatecky/d3-funnel/master/LICENSE.txt)\n\n**d3-funnel** is an extensible, open-source JavaScript library for rendering\nfunnel charts using the [D3.js][d3] library.\n\nd3-funnel is focused on providing practical and visually appealing funnels\nthrough a variety of customization options. Check out the [examples page][examples]\nto get a showcasing of the several possible options.\n\n# Installation\n\nInstall this library via npm, yarn, pnpm, or your preferred package manager:\n\n```\nnpm install d3-funnel --save\n```\n\nYou can then load this library into your app using `import`:\n\n``` javascript\nimport D3Funnel from 'd3-funnel';\n```\n\n# Usage\n\nTo use this library, you must create a container element and instantiate a new\nfunnel chart. By default, the chart will assume the width and height of the\nparent container:\n\n``` html\n\u003cdiv id=\"funnel\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    const data = [\n        { label: 'Inquiries', value: 5000 },\n        { label: 'Applicants', value: 2500 },\n        { label: 'Admits', value: 500 },\n        { label: 'Deposits', value: 200 },\n    ];\n    const options = {\n        block: {\n            dynamicHeight: true,\n            minHeight: 15,\n        },\n    };\n\n    const chart = new D3Funnel('#funnel');\n    chart.draw(data, options);\n\u003c/script\u003e\n```\n\n## Options\n\n| Option                 | Description                                                               | Type     | Default                 |\n| ---------------------- | ------------------------------------------------------------------------- | -------- | ----------------------- |\n| `chart.width`          | The width of the chart in pixels or a percentage.                         | mixed    | Container's width       |\n| `chart.height`         | The height of the chart in pixels or a percentage.                        | mixed    | Container's height      |\n| `chart.bottomWidth`    | The percent of total width the bottom should be.                          | number   | `1 / 3`                 |\n| `chart.bottomPinch`    | How many blocks to pinch on the bottom to create a funnel \"neck\".         | number   | `0`                     |\n| `chart.inverted`       | Whether the funnel direction is inverted (like a pyramid).                | bool     | `false`                 |\n| `chart.animate`        | The load animation speed in milliseconds.                                 | number   | `0` (disabled)          |\n| `chart.curve.enabled`  | Whether the funnel is curved.                                             | bool     | `false`                 |\n| `chart.curve.height`   | The curvature amount.                                                     | number   | `20`                    |\n| `chart.totalCount`     | Override the total count used in ratio calculations.                      | number   | `null`                  |\n| `block.dynamicHeight`  | Whether the block heights are proportional to their weight.               | bool     | `false`                 |\n| `block.dynamicSlope`   | Whether the block widths are proportional to their value decrease.        | bool     | `false`                 |\n| `block.barOverlay`     | Whether the blocks have bar chart overlays proportional to its weight.    | bool     | `false`                 |\n| `block.fill.scale`     | The background color scale as an array or function.                       | mixed    | `d3.schemeCategory10`   |\n| `block.fill.type`      | Either `'solid'` or `'gradient'`.                                         | string   | `'solid'`               |\n| `block.minHeight`      | The minimum pixel height of a block.                                      | number   | `0`                     |\n| `block.highlight`      | Whether the blocks are highlighted on hover.                              | bool     | `false`                 |\n| `label.enabled`        | Whether the block labels should be displayed.                             | bool     | `true`                  |\n| `label.fontFamily`     | Any valid font family for the labels.                                     | string   | `null`                  |\n| `label.fontSize`       | Any valid font size for the labels.                                       | string   | `'14px'`                |\n| `label.fill`           | Any valid hex color for the label color.                                  | string   | `'#fff'`                |\n| `label.format`         | Either `function(label, value)` or a format string. See below.            | mixed    | `'{l}: {f}'`            |\n| `tooltip.enabled`      | Whether tooltips should be enabled on hover.                              | bool     | `false`                 |\n| `tooltip.format`       | Either `function(label, value)` or a format string. See below.            | mixed    | `'{l}: {f}'`            |\n| `events.click.block`   | Callback `function(data)` for when a block is clicked.                    | function | `null`                  |\n\n### Label/Tooltip Format\n\nThe option `label.format` can either be a function or a string. The following\nkeys will be substituted by the string formatter:\n\n| Key     | Description                  |\n| ------- | ---------------------------- |\n| `'{l}'` | The block's supplied label.  |\n| `'{v}'` | The block's raw value.       |\n| `'{f}'` | The block's formatted value. |\n\n### Event Data\n\nBlock-based events are passed a `data` object containing the following elements:\n\n| Key             | Type   | Description                           |\n| --------------- | ------ | ------------------------------------- |\n| index           | number | The index of the block.               |\n| node            | object | The DOM node of the block.            |\n| value           | number | The numerical value.                  |\n| fill            | string | The background color.                 |\n| label.raw       | string | The unformatted label.                |\n| label.formatted | string | The result of `options.label.format`. |\n| label.color     | string | The label color.                      |\n\nExample:\n\n``` javascript\n{\n    index: 0,\n    node: { ... },\n    value: 150,\n    fill: '#c33',\n    label: {\n        raw: 'Visitors',\n        formatted: 'Visitors: 150',\n        color: '#fff',\n    },\n},\n```\n\n### Overriding Defaults\n\nYou may wish to override the default chart options. For example, you may wish\nfor every funnel to have proportional heights. To do this, simply modify the\n`D3Funnel.defaults` property:\n\n``` javascript\nD3Funnel.defaults.block.dynamicHeight = true;\n```\n\nShould you wish to override multiple properties at a time, you may consider\nusing [lodash's][lodash-merge] `_.merge` or [jQuery's][jquery-extend] `$.extend`:\n\n``` javascript\nD3Funnel.defaults = _.merge(D3Funnel.defaults, {\n    block: {\n        dynamicHeight: true,\n        fill: {\n            type: 'gradient',\n        },\n    },\n    label: {\n        format: '{l}: ${f}',\n    },\n});\n```\n\n## Advanced Data\n\nIn the examples above, both `label` and `value` were just to describe a block\nwithin the funnel. A complete listing of the available options is included\nbelow:\n\n| Option          | Type   | Description                                                     | Example       |\n| --------------- | ------ | --------------------------------------------------------------- | ------------- |\n| label           | mixed  | **Required.** The label to associate with the block.            | `'Students'`  |\n| value           | number | **Required.** The value (or count) to associate with the block. | `500`         |\n| backgroundColor | string | A row-level override for `block.fill.scale`. Hex only.          | `'#008080'`   |\n| formattedValue  | mixed  | A row-level override for `label.format`.                        | `'USD: $150'` |\n| hideLabel       | bool   | Whether to hide the formatted label for this block.             | `true`        |\n| labelColor      | string | A row-level override for `label.fill`. Hex only.                | `'#333'`      |\n\n## API\n\nAdditional methods beyond `draw()` are accessible after instantiating the chart:\n\n| Method      | Description                                     |\n| ----------- | ----------------------------------------------- |\n| `destroy()` | Removes the funnel and its events from the DOM. |\n\n# License\n\nMIT license.\n\n[d3]: http://d3js.org/\n[examples]: http://jakezatecky.github.io/d3-funnel/\n[jQuery-extend]: https://api.jquery.com/jquery.extend/\n[lodash-merge]: https://lodash.com/docs#merge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakezatecky%2Fd3-funnel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakezatecky%2Fd3-funnel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakezatecky%2Fd3-funnel/lists"}