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