D3 Funnel
D3Funnel is an extensible, open-source JavaScript library for rendering
funnel charts using the D3.js library.
D3Funnel is focused on providing practical and visually appealing funnels
through a variety of customization options. Check out the examples page
to get a showcasing of the several possible options.
Usage
To use this library, you must include include D3.js and the D3Funnel
source file:
<script src="d3.min.js"></script>
<script src="d3-funnel.js"></script>
Basic
Drawing the funnel is relatively easy:
HTML
<div id="funnel"></div>
JavaScript
var data = [
["Plants", 5000],
["Flowers", 2500],
["Perennials", 200],
["Roses", 50]
];
var chart = new D3Funnel("#funnel");
chart.draw(data);
Advanced
The following options may also be specified through the second parameter to
D3Funnel.draw
(default values shown):
var options = {
width: 350,
height: 400,
bottomWidth: 1/3,
bottomPinch: 0,
isCurved: false,
curveHeight: 20,
fillType: "solid",
isInverted: false,
hoverEffects: false,
dynamicArea: false ,
animation: false,
label: {
fontSize: "14px",
fill: "#fff"
}
};
chart.draw(data, options);
You can also specify overriding colors for any data point (hex only):
var data = [
["Teal", 12000, "#008080"],
["Byzantium", 4000, "#702963"],
["Persimmon", 2500, "#ff634d"],
["Azure", 1500, "#007fff"]
];
Furthermore, you can even set colors for any data point label (hex only):
var data = [
["Teal", 12000, "#008080" "#080800"],
["Byzantium", 4000, "#702963"],
["Persimmon", 2500, "#ff634d" "#6f34fd"],
["Azure", 1500, "#007fff" "#07fff0"]
];
License
MIT license.