\n \n d3-funnel is an extensible, open-source JavaScript library for rendering\n funnel charts using the D3.js library.\n
\n \n d3-funnel is focused on providing practical and visually appealing funnels through a variety\n of customization options. Check out the example below to get a showcasing of the several\n possible options.\n
\n \n\n \n \n\n \n \n\n"
},
{
"path": "examples/src/js/index.js",
"content": "import { merge } from 'lodash';\nimport D3Funnel from 'd3-funnel';\n\nconst settings = {\n curved: {\n chart: {\n curve: {\n enabled: true,\n },\n },\n },\n pinched: {\n chart: {\n bottomPinch: 1,\n },\n },\n gradient: {\n block: {\n fill: {\n type: 'gradient',\n },\n },\n },\n inverted: {\n chart: {\n inverted: true,\n },\n },\n hover: {\n block: {\n highlight: true,\n },\n },\n tooltip: {\n tooltip: {\n enabled: true,\n },\n },\n click: {\n events: {\n click: {\n block(event, d) {\n // eslint-disable-next-line no-alert\n alert(d.label.raw);\n },\n },\n },\n },\n dynamicHeight: {\n block: {\n dynamicHeight: true,\n },\n },\n barOverlay: {\n block: {\n barOverlay: true,\n },\n },\n animation: {\n chart: {\n animate: 200,\n },\n },\n label: {\n label: {\n fontFamily: '\"Reem Kufi\", sans-serif',\n fontSize: '16px',\n },\n },\n};\n\nconst chart = new D3Funnel('#funnel');\nconst checkboxes = [...document.querySelectorAll('input')];\nconst color = document.querySelector('[value=\"color\"]');\n\nfunction onChange() {\n let data = !color.checked ?\n [\n { label: 'Applicants', value: 12000 },\n { label: 'Pre-screened', value: 4000 },\n { label: 'Interviewed', value: 2500 },\n { label: 'Hired', value: 1500 },\n ] :\n [\n { label: 'Teal', value: 12000, backgroundColor: '#008080' },\n { label: 'Byzantium', value: 4000, backgroundColor: '#702963' },\n { label: 'Persimmon', value: 2500, backgroundColor: '#ff634d' },\n { label: 'Azure', value: 1500, backgroundColor: '#007fff' },\n ];\n\n let options = {\n chart: {\n bottomWidth: 3 / 8,\n },\n block: {\n minHeight: 25,\n },\n label: {\n format: '{l}\\n{f}',\n },\n };\n\n checkboxes.forEach((checkbox) => {\n if (checkbox.checked) {\n options = merge(options, settings[checkbox.value]);\n }\n });\n\n // Reverse data for inversion\n if (options.chart.inverted) {\n options.chart.bottomWidth = 1 / 3;\n data = data.reverse();\n }\n\n chart.draw(data, options);\n}\n\n// Bind event listeners\ncheckboxes.forEach((checkbox) => {\n checkbox.addEventListener('change', onChange);\n});\n\n// Trigger change event for initial render\ncheckboxes[0].dispatchEvent(new CustomEvent('change'));\n"
},
{
"path": "examples/src/scss/_cayman.scss",
"content": "// Breakpoints\n$large-breakpoint: 64em;\n$medium-breakpoint: 42em;\n\n// Headers\n$header-heading-color: #fff !default;\n$header-bg-color: #159957 !default;\n$header-bg-color-secondary: #155799 !default;\n\n// Text\n$font-family: // stylelint-disable-line scss/dollar-variable-colon-space-after\n \"Open Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif !default;\n$section-headings-color: #159957 !default;\n$body-text-color: #606c71 !default;\n$body-link-color: #1e6bb8 !default;\n$blockquote-text-color: #819198 !default;\n\n// Code\n$font-family-code: // stylelint-disable-line scss/dollar-variable-colon-space-after\n \"Consolas\", \"Liberation Mono\", \"Menlo\", \"Courier\", monospace !default;\n$code-bg-color: #f3f6fa !default;\n$code-text-color: #567482 !default;\n\n// Borders\n$border-color: #dce6f0 !default;\n$table-border-color: #e9ebec !default;\n$hr-border-color: #eff0f1 !default;\n\n@mixin large {\n @media screen and (min-width: #{$large-breakpoint}) {\n @content;\n }\n}\n\n@mixin medium {\n @media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) {\n @content;\n }\n}\n\n@mixin small {\n @media screen and (max-width: #{$medium-breakpoint}) {\n @content;\n }\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n padding: 0;\n margin: 0;\n font-family: $font-family;\n font-size: 16px;\n line-height: 1.5;\n color: $body-text-color;\n}\n\na {\n color: $body-link-color;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n.btn {\n display: inline-block;\n margin-bottom: 1rem;\n color: rgba(255, 255, 255, 0.7);\n background-color: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.2);\n border-style: solid;\n border-width: 1px;\n border-radius: 0.3rem;\n transition:\n color 0.2s,\n background-color 0.2s,\n border-color 0.2s;\n\n @include large {\n padding: 0.75rem 1rem;\n\n + .btn {\n margin-left: 1rem;\n }\n }\n\n @include medium {\n padding: 0.6rem 0.9rem;\n font-size: 0.9rem;\n\n + .btn {\n margin-left: 1rem;\n }\n }\n\n @include small {\n display: block;\n width: 100%;\n padding: 0.75rem;\n font-size: 0.9rem;\n\n + .btn {\n margin-top: 1rem;\n margin-left: 0;\n }\n }\n\n &:hover {\n color: rgba(255, 255, 255, 0.8);\n text-decoration: none;\n background-color: rgba(255, 255, 255, 0.2);\n border-color: rgba(255, 255, 255, 0.3);\n }\n}\n\n.page-header {\n color: $header-heading-color;\n text-align: center;\n background-color: $header-bg-color;\n background-image: linear-gradient(\n 120deg,\n $header-bg-color-secondary,\n $header-bg-color\n );\n\n @include large {\n padding: 3rem 4rem;\n }\n\n @include medium {\n padding: 3rem 4rem;\n }\n\n @include small {\n padding: 2rem 1rem;\n }\n}\n\n.project-name {\n margin-top: 0;\n margin-bottom: 0.1rem;\n\n @include large {\n font-size: 3.25rem;\n }\n\n @include medium {\n font-size: 2.25rem;\n }\n\n @include small {\n font-size: 1.75rem;\n }\n}\n\n.project-tagline {\n margin-bottom: 2rem;\n font-weight: normal;\n opacity: 0.7;\n\n @include large {\n font-size: 1.25rem;\n }\n\n @include medium {\n font-size: 1.15rem;\n }\n\n @include small {\n font-size: 1rem;\n }\n}\n\n.main-content {\n word-wrap: break-word;\n\n @include large {\n max-width: 64rem;\n padding: 2rem 6rem;\n margin: 0 auto;\n font-size: 1.1rem;\n }\n\n @include medium {\n padding: 2rem 4rem;\n font-size: 1.1rem;\n }\n\n @include small {\n padding: 2rem 1rem;\n font-size: 1rem;\n }\n\n :first-child {\n margin-top: 0;\n }\n\n img {\n max-width: 100%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: 2rem;\n margin-bottom: 1rem;\n font-weight: normal;\n color: $section-headings-color;\n }\n\n p {\n margin-bottom: 1em;\n }\n\n code {\n padding: 2px 4px;\n font-family: $font-family-code;\n font-size: 0.9rem;\n color: $code-text-color;\n background-color: $code-bg-color;\n border-radius: 0.3rem;\n }\n\n pre {\n padding: 0.8rem;\n margin-top: 0;\n margin-bottom: 1rem;\n font: 1rem $font-family-code;\n color: $code-text-color;\n word-wrap: normal;\n background-color: $code-bg-color;\n border: solid 1px $border-color;\n border-radius: 0.3rem;\n\n > code {\n padding: 0;\n margin: 0;\n font-size: 0.9rem;\n color: $code-text-color;\n word-break: normal;\n white-space: pre;\n background: transparent;\n border: 0;\n }\n }\n\n .highlight {\n margin-bottom: 1rem;\n\n pre {\n margin-bottom: 0;\n word-break: normal;\n }\n }\n\n .highlight pre,\n pre {\n padding: 0.8rem;\n overflow: auto;\n font-size: 0.9rem;\n line-height: 1.45;\n border-radius: 0.3rem;\n -webkit-overflow-scrolling: touch;\n }\n\n pre code,\n pre tt {\n display: inline;\n max-width: initial;\n padding: 0;\n margin: 0;\n overflow: initial;\n line-height: inherit;\n word-wrap: normal;\n background-color: transparent;\n border: 0;\n\n &::before,\n &::after {\n content: normal;\n }\n }\n\n ul,\n ol {\n margin-top: 0;\n }\n\n blockquote {\n padding: 0 1rem;\n margin-left: 0;\n color: $blockquote-text-color;\n border-left: 0.3rem solid $border-color;\n\n > :first-child {\n margin-top: 0;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n }\n\n table {\n display: block;\n width: 100%;\n overflow: auto;\n word-break: normal;\n\n th {\n font-weight: bold;\n }\n\n th,\n td {\n padding: 0.5rem 1rem;\n border: 1px solid $table-border-color;\n }\n }\n\n dl {\n padding: 0;\n\n dt {\n padding: 0;\n margin-top: 1rem;\n font-size: 1rem;\n font-weight: bold;\n }\n\n dd {\n padding: 0;\n margin-bottom: 1rem;\n }\n }\n\n hr {\n height: 2px;\n padding: 0;\n margin: 1rem 0;\n background-color: $hr-border-color;\n border: 0;\n }\n}\n\n.site-footer {\n padding-top: 2rem;\n margin-top: 2rem;\n border-top: solid 1px $hr-border-color;\n\n @include large {\n font-size: 1rem;\n }\n\n @include medium {\n font-size: 1rem;\n }\n\n @include small {\n font-size: 0.9rem;\n }\n}\n\n.site-footer-owner {\n display: block;\n font-weight: bold;\n}\n\n.site-footer-credits {\n color: $blockquote-text-color;\n}\n"
},
{
"path": "examples/src/scss/style.scss",
"content": "@use \"cayman\" with (\n $body-text-color: #444,\n $code-text-color: #465e6a,\n $header-bg-color: #3498db,\n $header-bg-color-secondary: #2c3e50,\n $section-headings-color: #2079b5,\n $blockquote-text-color: #576266\n);\n\n.main-content {\n h1,\n h2,\n h3 {\n font-weight: bold;\n }\n}\n\n.demo {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px 30px;\n\n form {\n label {\n display: flex;\n font-weight: normal;\n }\n\n input {\n margin-right: 0.5rem;\n }\n }\n}\n\n.demo-funnel {\n width: 320px;\n height: 400px;\n margin-right: 50px;\n}\n"
},
{
"path": "gh-deploy.sh",
"content": "#!/bin/bash\nVERSION=\"$(cat ./package.json | python -c \"import sys, json; print(json.load(sys.stdin)['version'])\")\"\ngit diff --exit-code\n\nif [[ $? == 0 ]]\nthen\n sed -i '\\:/examples/dist:d' ./.gitignore\n git add .\n git commit -m \"Publish v${VERSION} examples\"\n git push origin `git subtree split --prefix examples/dist master`:gh-pages --force\n git reset HEAD~\n git checkout .gitignore\nelse\n echo \"Need clean working directory to publish\"\nfi\n"
},
{
"path": "index.d.ts",
"content": "declare module 'd3-funnel'\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"d3-funnel\",\n \"version\": \"2.1.3\",\n \"description\": \"A library for rendering SVG funnel charts using D3.js\",\n \"author\": \"Jake Zatecky\",\n \"license\": \"MIT\",\n \"keywords\": [\n \"d3\",\n \"funnel\",\n \"pyramid\",\n \"svg\",\n \"chart\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/jakezatecky/d3-funnel\"\n },\n \"bugs\": \"https://github.com/jakezatecky/d3-funnel/issues\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs.js\",\n \"module\": \"dist/index.esm.js\",\n \"imports\": {\n \"#js/*\": \"./src/d3-funnel/*\"\n },\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.esm.js\",\n \"require\": \"./dist/index.cjs.js\"\n },\n \"./*\": \"./*\"\n },\n \"browser\": \"dist/d3-funnel.min.js\",\n \"scripts\": {\n \"build\": \"npm run build:browser && npm run build:esm && npm run build:umd\",\n \"build:browser\": \"webpack --env=target=browser\",\n \"build:esm\": \"webpack --env=target=esm\",\n \"build:umd\": \"webpack --env=target=umd\",\n \"build:test\": \"webpack --config=webpack.config.test.js\",\n \"examples\": \"webpack serve --config=webpack.config.examples.js\",\n \"format:style\": \"prettier --write examples/src/scss/**/*.scss\",\n \"gh-build\": \"webpack --config=webpack.config.examples.js --mode=production\",\n \"gh-deploy\": \"npm run gh-build && bash ./gh-deploy.sh\",\n \"lint\": \"npm run lint:script && npm run lint:style\",\n \"lint:script\": \"eslint src/**/*.js examples/src/**/*.js test/*.js ./test/d3-funnel/**/*.js *.js\",\n \"lint:style\": \"stylelint examples/src/scss/**/*.scss\",\n \"prepublishOnly\": \"npm run release\",\n \"release\": \"npm run test && npm run build\",\n \"test\": \"npm run lint && npm run test:script && npm run test:style-format\",\n \"test:script\": \"npm run build:test && node test/test.js\",\n \"test:style-format\": \"prettier --check examples/src/scss/**/*.scss\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.0.0\",\n \"@babel/eslint-parser\": \"^7.13.14\",\n \"@babel/preset-env\": \"^7.0.0\",\n \"@babel/register\": \"^7.0.0\",\n \"babel-loader\": \"^10.0.0\",\n \"browser-sync\": \"^3.0.3\",\n \"chai\": \"^6.0.1\",\n \"css-loader\": \"^7.0.0\",\n \"d3\": \"^7.0.0\",\n \"eslint\": \"^10.1.0\",\n \"eslint-config-takiyon\": \"^4.0.0\",\n \"eslint-import-resolver-webpack\": \"^0.13.0\",\n \"eslint-plugin-import\": \"^2.7.0\",\n \"global-jsdom\": \"^27.0.0\",\n \"globals\": \"^16.3.0\",\n \"html-bundler-webpack-plugin\": \"^4.21.1\",\n \"jsdom\": \"^27.0.0\",\n \"lodash\": \"^4.17.21\",\n \"mocha\": \"^11.7.2\",\n \"playwright\": \"^1.5.2\",\n \"prettier\": \"^3.1.1\",\n \"process\": \"^0.11.10\",\n \"sass\": \"^1.69.5\",\n \"sass-loader\": \"^16.0.5\",\n \"sinon\": \"^21.0.0\",\n \"stylelint\": \"^16.0.2\",\n \"stylelint-config-takiyon\": \"^6.0.0\",\n \"util\": \"^0.12.4\",\n \"webpack\": \"^5.3.2\",\n \"webpack-cli\": \"^6.0.1\",\n \"webpack-dev-server\": \"^5.0.0\"\n },\n \"dependencies\": {\n \"d3-array\": \"^3.0.1\",\n \"d3-ease\": \"^3.0.1\",\n \"d3-scale\": \"^4.0.0\",\n \"d3-scale-chromatic\": \"^3.0.0\",\n \"d3-selection\": \"^3.0.0\",\n \"d3-transition\": \"^3.0.0\",\n \"nanoid\": \"^5.0.2\"\n }\n}\n"
},
{
"path": "src/d3-funnel/Colorizer.js",
"content": "class Colorizer {\n /**\n * @return {void}\n */\n constructor() {\n this.hexExpression = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;\n this.instanceId = null;\n this.labelFill = null;\n this.scale = null;\n }\n\n /**\n * @param {string} instanceId\n *\n * @return {void}\n */\n setInstanceId(instanceId) {\n this.instanceId = instanceId;\n }\n\n /**\n * @param {string} fill\n *\n * @return {void}\n */\n setLabelFill(fill) {\n this.labelFill = fill;\n }\n\n /**\n * @param {function|Array} scale\n *\n * @return {void}\n */\n setScale(scale) {\n this.scale = scale;\n }\n\n /**\n * Given a raw data block, return an appropriate color for the block.\n *\n * @param {string} fill\n * @param {Number} index\n * @param {string} fillType\n *\n * @return {Object}\n */\n getBlockFill(fill, index, fillType) {\n const raw = this.getBlockRawFill(fill, index);\n\n return {\n raw,\n actual: this.getBlockActualFill(raw, index, fillType),\n };\n }\n\n /**\n * Return the raw hex color for the block.\n *\n * @param {string} fill\n * @param {Number} index\n *\n * @return {string}\n */\n getBlockRawFill(fill, index) {\n // Use the block's color, if set and valid\n if (this.hexExpression.test(fill)) {\n return fill;\n }\n\n // Otherwise, attempt to use the array scale\n if (Array.isArray(this.scale)) {\n return this.scale[index];\n }\n\n // Finally, use a functional scale\n return this.scale(index);\n }\n\n /**\n * Return the actual background for the block.\n *\n * @param {string} raw\n * @param {Number} index\n * @param {string} fillType\n *\n * @return {string}\n */\n getBlockActualFill(raw, index, fillType) {\n if (fillType === 'solid') {\n return raw;\n }\n\n return `url(#${this.getGradientId(index)})`;\n }\n\n /**\n * Return the gradient ID for the given index.\n *\n * @param {Number} index\n *\n * @return {string}\n */\n getGradientId(index) {\n return `${this.instanceId}-gradient-${index}`;\n }\n\n /**\n * Given a raw data block, return an appropriate label color.\n *\n * @param {string} labelFill\n *\n * @return {string}\n */\n getLabelColor(labelFill) {\n return this.hexExpression.test(labelFill) ? labelFill : this.labelFill;\n }\n\n /**\n * Shade a color to the given percentage.\n *\n * @param {string} color A hex color.\n * @param {number} shade The shade adjustment. Can be positive or negative.\n *\n * @return {string}\n */\n shade(color, shade) {\n const { R, G, B } = this.hexToRgb(color);\n const t = shade < 0 ? 0 : 255;\n const p = shade < 0 ? shade * -1 : shade;\n\n const converted = 0x1000000 +\n ((Math.round((t - R) * p) + R) * 0x10000) +\n ((Math.round((t - G) * p) + G) * 0x100) +\n (Math.round((t - B) * p) + B);\n\n return `#${converted.toString(16).slice(1)}`;\n }\n\n /**\n * Convert a hex color to an RGB object.\n *\n * @param {string} color\n *\n * @returns {{R: Number, G: number, B: number}}\n */\n hexToRgb(color) {\n let hex = color.slice(1);\n\n if (hex.length === 3) {\n hex = this.expandHex(hex);\n }\n\n const f = parseInt(hex, 16);\n\n /* eslint-disable no-bitwise */\n const R = f >> 16;\n const G = (f >> 8) & 0x00FF;\n const B = f & 0x0000FF;\n /* eslint-enable */\n\n return { R, G, B };\n }\n\n /**\n * Expands a three character hex code to six characters.\n *\n * @param {string} hex\n *\n * @return {string}\n */\n expandHex(hex) {\n return hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n }\n}\n\nexport default Colorizer;\n"
},
{
"path": "src/d3-funnel/D3Funnel.js",
"content": "import { easeLinear } from 'd3-ease';\nimport { range } from 'd3-array';\nimport { scaleOrdinal } from 'd3-scale';\nimport { schemeCategory10 } from 'd3-scale-chromatic';\nimport { select } from 'd3-selection';\nimport 'd3-transition';\nimport { nanoid } from 'nanoid';\n\nimport Colorizer from '#js/Colorizer.js';\nimport Formatter from '#js/Formatter.js';\nimport Navigator from '#js/Navigator.js';\nimport Utils from '#js/Utils.js';\n\nclass D3Funnel {\n static defaults = {\n chart: {\n width: 350,\n height: 400,\n bottomWidth: 1 / 3,\n bottomPinch: 0,\n inverted: false,\n horizontal: false,\n animate: 0,\n curve: {\n enabled: false,\n height: 20,\n shade: -0.4,\n },\n totalCount: null,\n },\n block: {\n dynamicHeight: false,\n dynamicSlope: false,\n barOverlay: false,\n fill: {\n scale: scaleOrdinal(schemeCategory10).domain(range(0, 10)),\n type: 'solid',\n },\n minHeight: 0,\n highlight: false,\n },\n label: {\n enabled: true,\n fontFamily: null,\n fontSize: '14px',\n fill: '#fff',\n format: '{l}: {f}',\n },\n tooltip: {\n enabled: false,\n format: '{l}: {f}',\n },\n events: {\n click: {\n block: null,\n },\n },\n };\n\n /**\n * @param {string|HTMLElement} selector A selector for the container element.\n *\n * @return {void}\n */\n constructor(selector) {\n this.container = select(selector).node();\n\n this.colorizer = new Colorizer();\n this.formatter = new Formatter();\n this.navigator = new Navigator();\n\n this.id = null;\n\n // Bind event handlers\n this.onMouseOver = this.onMouseOver.bind(this);\n this.onMouseOut = this.onMouseOut.bind(this);\n }\n\n /**\n * Remove the funnel and its events from the DOM.\n *\n * @return {void}\n */\n destroy() {\n const container = select(this.container);\n\n // D3's remove method appears to be sufficient for removing the events\n container.selectAll('svg').remove();\n\n // Remove other elements from container\n container.selectAll('*').remove();\n\n // Remove inner text from container\n container.text('');\n }\n\n /**\n * Draw the chart inside the container with the data and configuration\n * specified. This will remove any previous SVG elements in the container\n * and draw a new funnel chart on top of it.\n *\n * @param {Array} data A list of rows containing a category, a count,\n * and optionally a color (in hex).\n * @param {Object} options An optional configuration object to override\n * defaults. See the docs.\n *\n * @return {void}\n */\n draw(data, options = {}) {\n this.destroy();\n\n this.initialize(data, options);\n\n this.drawOntoDom();\n }\n\n /**\n * Initialize and calculate important variables for drawing the chart.\n *\n * @param {Array} data\n * @param {Object} options\n *\n * @return {void}\n */\n initialize(data, options) {\n this.validateData(data);\n\n const settings = this.getSettings(options);\n\n this.id = `d3-funnel-${nanoid()}`;\n\n // Set labels\n this.labelFormatter = this.formatter.getFormatter(settings.label.format);\n this.tooltipFormatter = this.formatter.getFormatter(settings.tooltip.format);\n\n // Set color scales\n this.colorizer.setInstanceId(this.id);\n this.colorizer.setLabelFill(settings.label.fill);\n this.colorizer.setScale(settings.block.fill.scale);\n\n // Initialize funnel chart settings\n this.settings = {\n width: settings.chart.width,\n height: settings.chart.height,\n bottomWidth: settings.chart.width * settings.chart.bottomWidth,\n bottomPinch: settings.chart.bottomPinch,\n isInverted: settings.chart.inverted,\n isCurved: settings.chart.curve.enabled,\n curveHeight: settings.chart.curve.height,\n curveShade: settings.chart.curve.shade,\n addValueOverlay: settings.block.barOverlay,\n animation: settings.chart.animate,\n totalCount: settings.chart.totalCount,\n fillType: settings.block.fill.type,\n hoverEffects: settings.block.highlight,\n dynamicHeight: settings.block.dynamicHeight,\n dynamicSlope: settings.block.dynamicSlope,\n minHeight: settings.block.minHeight,\n label: settings.label,\n tooltip: settings.tooltip,\n onBlockClick: settings.events.click.block,\n };\n\n this.setBlocks(data);\n }\n\n /**\n * @param {Array} data\n *\n * @return void\n */\n validateData(data) {\n if (Array.isArray(data) === false) {\n throw new Error('Data must be an array.');\n }\n\n if (data.length === 0) {\n throw new Error('Data array must contain at least one element.');\n }\n\n if (typeof data[0] !== 'object') {\n throw new Error('Data array elements must be an object.');\n }\n\n if (\n (Array.isArray(data[0]) && data[0].length < 2) ||\n (Array.isArray(data[0]) === false && (\n data[0].label === undefined || data[0].value === undefined\n ))\n ) {\n throw new Error('Data array elements must contain a label and value.');\n }\n }\n\n /**\n * @param {Object} options\n *\n * @return {Object}\n */\n getSettings(options) {\n const containerDimensions = this.getContainerDimensions();\n const defaults = this.getDefaultSettings(containerDimensions);\n\n // Prepare the configuration settings based on the defaults\n let settings = Utils.extend({}, defaults);\n\n // Override default settings with user options\n settings = Utils.extend(settings, options);\n\n // Account for any percentage-based dimensions\n settings.chart = {\n ...settings.chart,\n ...this.castDimensions(settings, containerDimensions),\n };\n\n return settings;\n }\n\n /**\n * Return default settings.\n *\n * @param {Object} containerDimensions\n *\n * @return {Object}\n */\n getDefaultSettings(containerDimensions) {\n const settings = D3Funnel.defaults;\n\n // Set the default width and height based on the container\n settings.chart = {\n ...settings.chart,\n ...containerDimensions,\n };\n\n return settings;\n }\n\n /**\n * Get the width/height dimensions of the container.\n *\n * @return {{width: Number, height: Number}}\n */\n getContainerDimensions() {\n const dimensions = {\n width: parseFloat(select(this.container).style('width')),\n height: parseFloat(select(this.container).style('height')),\n };\n\n // Remove container dimensions that resolve to zero\n ['width', 'height'].forEach((direction) => {\n if (dimensions[direction] === 0) {\n delete dimensions[direction];\n }\n });\n\n return dimensions;\n }\n\n /**\n * Cast dimensions into tangible or meaningful numbers.\n *\n * @param {Object} chart\n * @param {Object} containerDimensions\n *\n * @return {{width: Number, height: Number}}\n */\n castDimensions({ chart }, containerDimensions) {\n const dimensions = {};\n\n Object.keys(containerDimensions).forEach((direction) => {\n const chartDimension = chart[direction];\n const containerDimension = containerDimensions[direction];\n\n if (/%$/.test(String(chartDimension))) {\n // Convert string into a percentage of the container\n dimensions[direction] = (parseFloat(chartDimension) / 100) * containerDimension;\n } else if (chartDimension <= 0) {\n // If case of non-positive number, set to a usable number\n dimensions[direction] = D3Funnel.defaults.chart[direction];\n } else {\n dimensions[direction] = chartDimension;\n }\n });\n\n return dimensions;\n }\n\n /**\n * Register the raw data into a standard block format and pre-calculate\n * some values.\n *\n * @param {Array} data\n *\n * @return void\n */\n setBlocks(data) {\n const totalCount = this.getTotalCount(data);\n\n this.blocks = this.standardizeData(data, totalCount);\n }\n\n /**\n * Return the total count of all blocks.\n *\n * @param {Array} data\n *\n * @return {Number}\n */\n getTotalCount(data) {\n if (this.settings.totalCount !== null) {\n return this.settings.totalCount || 0;\n }\n\n return data.reduce((a, b) => a + Utils.getRawBlockCount(b), 0);\n }\n\n /**\n * Convert the raw data into a standardized format.\n *\n * @param {Array} data\n * @param {Number} totalCount\n *\n * @return {Array}\n */\n standardizeData(data, totalCount) {\n return data.map((rawBlock, index) => {\n const block = Array.isArray(rawBlock) ? Utils.convertLegacyBlock(rawBlock) : rawBlock;\n const ratio = totalCount > 0 ? (block.value / totalCount || 0) : 1 / data.length;\n\n return {\n index,\n ratio,\n value: block.value,\n height: this.settings.height * ratio,\n fill: this.colorizer.getBlockFill(\n block.backgroundColor,\n index,\n this.settings.fillType,\n ),\n label: {\n enabled: !block.hideLabel,\n raw: block.label,\n formatted: this.formatter.format(block, this.labelFormatter),\n color: this.colorizer.getLabelColor(block.labelColor),\n },\n tooltip: {\n enabled: block.enabled,\n formatted: this.formatter.format(block, this.tooltipFormatter),\n },\n };\n });\n }\n\n /**\n * Draw the chart onto the DOM.\n *\n * @return {void}\n */\n drawOntoDom() {\n // Add the SVG\n this.svg = select(this.container)\n .append('svg')\n .attr('id', this.id)\n .attr('width', this.settings.width)\n .attr('height', this.settings.height);\n\n [this.blockPaths, this.overlayPaths] = this.makePaths();\n\n // Define color gradients\n if (this.settings.fillType === 'gradient') {\n this.defineColorGradients(this.svg);\n }\n\n // Add top oval if curved\n if (this.settings.isCurved) {\n this.drawTopOval(this.svg, this.blockPaths);\n }\n\n // Add each block\n this.drawBlock(0);\n }\n\n /**\n * Create the paths to be used to define the discrete funnel blocks and\n * returns the results in an array.\n *\n * @return {Array, Array}\n */\n makePaths() {\n // Calculate the important fixed positions\n const bottomLeftX = (this.settings.width - this.settings.bottomWidth) / 2;\n const centerX = this.settings.width / 2;\n\n let paths = [];\n let overlayPaths = [];\n\n // Calculate change in x, y direction\n this.dx = this.getDx(bottomLeftX);\n this.dy = this.getDy();\n\n // Initialize velocity\n let { dx, dy } = this;\n\n // Initialize starting positions\n let prevLeftX = 0;\n let prevRightX = this.settings.width;\n let prevHeight = 0;\n\n // Start from the bottom for inverted\n if (this.settings.isInverted) {\n prevLeftX = bottomLeftX;\n prevRightX = this.settings.width - bottomLeftX;\n }\n\n // Initialize next positions\n let nextLeftX = 0;\n let nextRightX = 0;\n let nextHeight = 0;\n\n // Move down if there is an initial curve\n if (this.settings.isCurved) {\n prevHeight = this.settings.curveHeight / 2;\n }\n\n let totalHeight = this.settings.height;\n\n // This is greedy in that the block will have a guaranteed height\n // and the remaining is shared among the ratio, instead of being\n // shared according to the remaining minus the guaranteed\n if (this.settings.minHeight !== 0) {\n totalHeight = this.settings.height - (this.settings.minHeight * this.blocks.length);\n }\n\n let slopeHeight = this.settings.height;\n\n // Correct slope height if there are blocks being pinched (and thus\n // requiring a sharper curve)\n if (this.settings.bottomPinch > 0) {\n this.blocks.forEach((block, i) => {\n let height = (totalHeight * block.ratio);\n\n // Add greedy minimum height\n if (this.settings.minHeight !== 0) {\n height += this.settings.minHeight;\n }\n\n // Account for any curvature\n if (this.settings.isCurved) {\n height += this.settings.curveHeight / this.blocks.length;\n }\n\n if (this.settings.isInverted) {\n if (i < this.settings.bottomPinch) {\n slopeHeight -= height;\n }\n } else if (i >= this.blocks.length - this.settings.bottomPinch) {\n slopeHeight -= height;\n }\n });\n }\n\n // The slope will determine the x points on each block iteration\n // Given: slope = (y1 - y2) / (x1 - x2)\n // (x1, y1) = (bottomLeftX, height)\n // (x2, y2) = (0, 0)\n const slope = slopeHeight / bottomLeftX;\n\n // Create the path definition for each funnel block\n // Remember to loop back to the beginning point for a closed path\n this.blocks.forEach((block, i) => {\n // Make heights proportional to block weight\n if (this.settings.dynamicHeight) {\n // Slice off the height proportional to this block\n dy = totalHeight * block.ratio;\n\n // Add greedy minimum height\n if (this.settings.minHeight !== 0) {\n dy += this.settings.minHeight;\n }\n\n // Account for any curvature\n if (this.settings.isCurved) {\n dy -= this.settings.curveHeight / this.blocks.length;\n }\n\n // Given: y = mx + b\n // Given: b = 0 (when funnel), b = this.settings.height (when pyramid)\n // For funnel, x_i = y_i / slope\n nextLeftX = (prevHeight + dy) / slope;\n\n // For pyramid, x_i = y_i - this.settings.height / -slope\n if (this.settings.isInverted) {\n nextLeftX = ((prevHeight + dy) - this.settings.height) / (-1 * slope);\n }\n\n // If bottomWidth is 0, adjust last x position (to circumvent\n // errors associated with rounding)\n if (this.settings.bottomWidth === 0 && i === this.blocks.length - 1) {\n // For funnel, last position is the center\n nextLeftX = this.settings.width / 2;\n\n // For pyramid, last position is the origin\n if (this.settings.isInverted) {\n nextLeftX = 0;\n }\n }\n\n // If bottomWidth is same as width, stop x velocity\n if (this.settings.bottomWidth === this.settings.width) {\n nextLeftX = prevLeftX;\n }\n\n // Prevent NaN or Infinite values (caused by zero heights)\n if (Number.isNaN(nextLeftX) || !Number.isFinite(nextLeftX)) {\n nextLeftX = 0;\n }\n\n // Calculate the shift necessary for both x points\n dx = nextLeftX - prevLeftX;\n\n if (this.settings.isInverted) {\n dx = prevLeftX - nextLeftX;\n }\n }\n\n // Make slope width proportional to change in block value\n if (this.settings.dynamicSlope && !this.settings.isInverted) {\n const nextBlockValue = this.blocks[i + 1] ?\n this.blocks[i + 1].value :\n block.value;\n\n const widthRatio = nextBlockValue / block.value;\n dx = (1 - widthRatio) * (centerX - prevLeftX);\n }\n\n // Stop velocity for pinched blocks\n if (this.settings.bottomPinch > 0) {\n // Check if we've reached the bottom of the pinch\n // If so, stop changing on x\n if (!this.settings.isInverted) {\n if (i >= this.blocks.length - this.settings.bottomPinch) {\n dx = 0;\n }\n // Pinch at the first blocks relating to the bottom pinch\n // Revert back to normal velocity after pinch\n } else {\n // Revert velocity back to the initial if we are using\n // static heights (prevents zero velocity if isInverted\n // and bottomPinch are non-trivial and dynamicHeight is\n // false)\n if (!this.settings.dynamicHeight) {\n ({ dx } = this);\n }\n\n dx = i < this.settings.bottomPinch ? 0 : dx;\n }\n }\n\n // Calculate the position of next block\n nextLeftX = prevLeftX + dx;\n nextRightX = prevRightX - dx;\n nextHeight = prevHeight + dy;\n\n this.blocks[i].height = dy;\n\n // Expand outward if inverted\n if (this.settings.isInverted) {\n nextLeftX = prevLeftX - dx;\n nextRightX = prevRightX + dx;\n }\n\n const dimensions = {\n centerX,\n prevLeftX,\n prevRightX,\n prevHeight,\n nextLeftX,\n nextRightX,\n nextHeight,\n curveHeight: this.settings.curveHeight,\n ratio: block.ratio,\n };\n\n if (this.settings.isCurved) {\n paths = [...paths, this.navigator.makeCurvedPaths(dimensions)];\n\n if (this.settings.addValueOverlay) {\n overlayPaths = [\n ...overlayPaths,\n this.navigator.makeCurvedPaths(dimensions, true),\n ];\n }\n } else {\n paths = [...paths, this.navigator.makeStraightPaths(dimensions)];\n\n if (this.settings.addValueOverlay) {\n overlayPaths = [\n ...overlayPaths,\n this.navigator.makeStraightPaths(dimensions, true),\n ];\n }\n }\n\n // Set the next block's previous position\n prevLeftX = nextLeftX;\n prevRightX = nextRightX;\n prevHeight = nextHeight;\n });\n\n return [paths, overlayPaths];\n }\n\n /**\n * @param {Number} bottomLeftX\n *\n * @return {Number}\n */\n getDx(bottomLeftX) {\n // Will be sharper if there is a pinch\n if (this.settings.bottomPinch > 0) {\n return bottomLeftX / (this.blocks.length - this.settings.bottomPinch);\n }\n\n return bottomLeftX / this.blocks.length;\n }\n\n /**\n * @return {Number}\n */\n getDy() {\n // Curved chart needs reserved pixels to account for curvature\n if (this.settings.isCurved) {\n return (this.settings.height - this.settings.curveHeight) / this.blocks.length;\n }\n\n return this.settings.height / this.blocks.length;\n }\n\n /**\n * Define the linear color gradients.\n *\n * @param {Object} svg\n *\n * @return {void}\n */\n defineColorGradients(svg) {\n const defs = svg.append('defs');\n\n // Create a gradient for each block\n this.blocks.forEach((block, index) => {\n const color = block.fill.raw;\n const shade = this.colorizer.shade(color, -0.2);\n\n // Create linear gradient\n const gradient = defs.append('linearGradient')\n .attr('id', this.colorizer.getGradientId(index));\n\n // Define the gradient stops\n const stops = [\n [0, shade],\n [40, color],\n [60, color],\n [100, shade],\n ];\n\n // Add the gradient stops\n stops.forEach((stop) => {\n gradient.append('stop')\n .attr('offset', `${stop[0]}%`)\n .attr('style', `stop-color: ${stop[1]}`);\n });\n });\n }\n\n /**\n * Draw the top oval of a curved funnel.\n *\n * @param {Object} svg\n * @param {Array} blockPaths\n *\n * @return {void}\n */\n drawTopOval(svg, blockPaths) {\n const centerX = this.settings.width / 2;\n\n // Create path from top-most block\n const paths = blockPaths[0];\n const topCurve = paths[1][1] + (this.settings.curveHeight / 2);\n\n const path = this.navigator.plot([\n ['M', paths[0][0], paths[0][1]],\n ['Q', centerX, topCurve],\n [' ', paths[2][0], paths[2][1]],\n ['M', paths[2][0], this.settings.curveHeight / 2],\n ['Q', centerX, 0],\n [' ', paths[0][0], this.settings.curveHeight / 2],\n ]);\n\n // Draw top oval\n svg.append('path')\n .attr('fill', this.colorizer.shade(this.blocks[0].fill.raw, this.settings.curveShade))\n .attr('d', path);\n }\n\n /**\n * Draw the next block in the iteration.\n *\n * @param {int} index\n *\n * @return {void}\n */\n drawBlock(index) {\n if (index === this.blocks.length) {\n return;\n }\n\n // Create a group just for this block\n const group = this.svg.append('g');\n const block = this.blocks[index];\n\n // Fetch path element\n const path = this.getBlockPath(group, index);\n\n // Attach data to the element\n this.attachData(path, block);\n\n let overlayPath = null;\n let pathColor = block.fill.actual;\n\n if (this.settings.addValueOverlay) {\n overlayPath = this.getOverlayPath(group, index);\n this.attachData(overlayPath, block);\n\n // Add data attribute to distinguish between paths\n path.node().setAttribute('pathType', 'background');\n overlayPath.node().setAttribute('pathType', 'foreground');\n\n // Default path becomes background of lighter shade\n pathColor = this.colorizer.shade(block.fill.raw, 0.3);\n }\n\n // Add animation components\n if (this.settings.animation !== 0) {\n path.transition()\n .duration(this.settings.animation)\n .ease(easeLinear)\n .attr('fill', pathColor)\n .attr('d', this.getPathDefinition(index))\n .on('end', () => {\n this.drawBlock(index + 1);\n });\n } else {\n path.attr('fill', pathColor)\n .attr('d', this.getPathDefinition(index));\n this.drawBlock(index + 1);\n }\n\n // Add path overlay\n if (this.settings.addValueOverlay) {\n path.attr('stroke', this.blocks[index].fill.raw);\n\n if (this.settings.animation !== 0) {\n overlayPath.transition()\n .duration(this.settings.animation)\n .ease(easeLinear)\n .attr('fill', block.fill.actual)\n .attr('d', this.getOverlayPathDefinition(index));\n } else {\n overlayPath.attr('fill', block.fill.actual)\n .attr('d', this.getOverlayPathDefinition(index));\n }\n }\n\n // Add the hover events\n if (this.settings.hoverEffects) {\n [path, overlayPath].forEach((target) => {\n if (!target) {\n return;\n }\n\n target\n .on('mouseover', this.onMouseOver)\n .on('mouseout', this.onMouseOut);\n });\n }\n\n // Add block click event\n if (this.settings.onBlockClick !== null) {\n [path, overlayPath].forEach((target) => {\n if (!target) {\n return;\n }\n\n target.style('cursor', 'pointer')\n .on('click', this.settings.onBlockClick);\n });\n }\n\n // Add tooltips\n if (this.settings.tooltip.enabled) {\n [path, overlayPath].forEach((target) => {\n if (!target) {\n return;\n }\n\n target.node().addEventListener('mouseout', () => {\n if (this.tooltip) {\n this.container.removeChild(this.tooltip);\n this.tooltip = null;\n }\n });\n target.node().addEventListener('mousemove', (e) => {\n if (!this.tooltip) {\n this.tooltip = document.createElement('div');\n this.tooltip.setAttribute('class', 'd3-funnel-tooltip');\n this.container.appendChild(this.tooltip);\n }\n\n this.tooltip.innerText = block.tooltip.formatted;\n\n const width = this.tooltip.offsetWidth;\n const height = this.tooltip.offsetHeight;\n const rect = this.container.getBoundingClientRect();\n const heightOffset = height + 5;\n const containerY = rect.y + window.scrollY;\n const isAbove = e.pageY - heightOffset < containerY;\n const top = isAbove ? e.pageY + 5 : e.pageY - heightOffset;\n\n const styles = [\n 'display: inline-block',\n 'position: absolute',\n `left: ${e.pageX - (width / 2)}px`,\n `top: ${top}px`,\n `border: 1px solid ${block.fill.raw}`,\n 'background: rgb(255,255,255,0.75)',\n 'padding: 5px 15px',\n 'color: #000',\n 'font-size: 14px',\n 'font-weight: bold',\n 'text-align: center',\n 'cursor: default',\n 'pointer-events: none',\n ];\n this.tooltip.setAttribute('style', styles.join(';'));\n });\n });\n }\n\n if (this.settings.label.enabled && block.label.enabled) {\n this.addBlockLabel(group, index);\n }\n }\n\n /**\n * @param {Object} group\n * @param {int} index\n *\n * @return {Object}\n */\n getBlockPath(group, index) {\n const path = group.append('path');\n\n if (this.settings.animation !== 0) {\n this.addBeforeTransition(path, index, false);\n }\n\n return path;\n }\n\n /**\n * @param {Object} group\n * @param {int} index\n *\n * @return {Object}\n */\n getOverlayPath(group, index) {\n const path = group.append('path');\n\n if (this.settings.animation !== 0) {\n this.addBeforeTransition(path, index, true);\n }\n\n return path;\n }\n\n /**\n * Set the attributes of a path element before its animation.\n *\n * @param {Object} path\n * @param {int} index\n * @param {boolean} isOverlay\n *\n * @return {void}\n */\n addBeforeTransition(path, index, isOverlay) {\n const paths = isOverlay ? this.overlayPaths[index] : this.blockPaths[index];\n\n let beforePath;\n let beforeFill;\n\n // Construct the top of the trapezoid and leave the other elements\n // hovering around to expand downward on animation\n if (!this.settings.isCurved) {\n beforePath = this.navigator.plot([\n ['M', paths[0][0], paths[0][1]],\n ['L', paths[1][0], paths[1][1]],\n ['L', paths[1][0], paths[1][1]],\n ['L', paths[0][0], paths[0][1]],\n ]);\n } else {\n beforePath = this.navigator.plot([\n ['M', paths[0][0], paths[0][1]],\n ['Q', paths[1][0], paths[1][1]],\n [' ', paths[2][0], paths[2][1]],\n ['L', paths[2][0], paths[2][1]],\n ['M', paths[2][0], paths[2][1]],\n ['Q', paths[1][0], paths[1][1]],\n [' ', paths[0][0], paths[0][1]],\n ]);\n }\n\n if (this.settings.fillType === 'solid' && index > 0) {\n // Use previous fill color, if available\n beforeFill = this.blocks[index - 1].fill.actual;\n } else {\n // Otherwise use current background\n beforeFill = this.blocks[index].fill.actual;\n }\n\n path.attr('d', beforePath)\n .attr('fill', beforeFill);\n }\n\n /**\n * Attach data to the target element. Also attach the current node to the\n * data object.\n *\n * @param {Object} element\n * @param {Object} data\n *\n * @return {void}\n */\n attachData(element, data) {\n const nodeData = {\n ...data,\n node: element.node(),\n };\n\n element.data([nodeData]);\n }\n\n /**\n * @param {int} index\n *\n * @return {string}\n */\n getPathDefinition(index) {\n const commands = [];\n\n this.blockPaths[index].forEach((command) => {\n commands.push([command[2], command[0], command[1]]);\n });\n\n return this.navigator.plot(commands);\n }\n\n /**\n * @param {int} index\n *\n * @return {string}\n */\n getOverlayPathDefinition(index) {\n const commands = [];\n\n this.overlayPaths[index].forEach((command) => {\n commands.push([command[2], command[0], command[1]]);\n });\n\n return this.navigator.plot(commands);\n }\n\n /**\n * @param {Object} event\n * @param {Object} data\n *\n * @return {void}\n */\n onMouseOver(event, data) {\n const children = event.target.parentElement.childNodes;\n\n // Highlight all paths within one block\n [...children].forEach((node) => {\n if (node.nodeName.toLowerCase() === 'path') {\n const type = node.getAttribute('pathType') || '';\n\n if (type === 'foreground') {\n select(node).attr('fill', this.colorizer.shade(data.fill.raw, -0.5));\n } else {\n select(node).attr('fill', this.colorizer.shade(data.fill.raw, -0.2));\n }\n }\n });\n }\n\n /**\n * @param {Object} event\n * @param {Object} data\n *\n * @return {void}\n */\n onMouseOut(event, data) {\n const children = event.target.parentElement.childNodes;\n\n // Restore original color for all paths of a block\n [...children].forEach((node) => {\n if (node.nodeName.toLowerCase() === 'path') {\n const type = node.getAttribute('pathType') || '';\n\n if (type === 'background') {\n const backgroundColor = this.colorizer.shade(data.fill.raw, 0.3);\n select(node).attr('fill', backgroundColor);\n } else {\n select(node).attr('fill', data.fill.actual);\n }\n }\n });\n }\n\n /**\n * @param {Object} group\n * @param {int} index\n *\n * @return {void}\n */\n addBlockLabel(group, index) {\n const paths = this.blockPaths[index];\n\n const formattedLabel = this.blocks[index].label.formatted;\n const fill = this.blocks[index].label.color;\n\n // Center the text\n const x = this.settings.width / 2;\n const y = this.getTextY(paths);\n\n const text = group.append('text')\n .attr('x', x)\n .attr('y', y)\n .attr('fill', fill)\n .attr('font-size', this.settings.label.fontSize)\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'middle')\n .attr('pointer-events', 'none');\n\n // Add font-family, if exists\n if (this.settings.label.fontFamily !== null) {\n text.attr('font-family', this.settings.label.fontFamily);\n }\n\n this.addLabelLines(text, formattedLabel, x);\n }\n\n /**\n * Add