A funnel chart implementation using d3.js
To begin, you must instantiate a FunnelChart. The options you can pass to the FunnelChart are the following (the only required option is data):
data = an array containing arrays of categories and engagement in order from greatest expected funnel engagement to lowest.
width & height = width & height of chart (default is 400 and 600)
bottomPct = the percentage of the width the bottom base of the funnel trapezoid takes up. The top base always takes up the entire width, but the percentage of the total width that the bottom base takes up can be changed. (default = 1/3)
To actually draw the FunnelChart, call the draw method of the FunnelChart. The draw method takes in a selector for an element that the FunnelChart should be drawn in and a speed (default = 2.5). Make sure that you already have an element that corresponds to the selector you use because d3-funnel-charts doesn't create elements; it just uses an element you already have in your HTML as a container.
Example:
<div id="funnelContainer"></div>
<script src="https://github.com/smilli/d3-funnel-charts/raw/master/d3.min.js"></script> // Make sure to include d3.js first
<script src="https://github.com/smilli/d3-funnel-charts/raw/master/d3-funnel-charts.min.js"></script>
<script type="text/javascript">
var data = [['Video Views', 1500], ['Comments', 300], ['Video Responses', 150]];
var chart = new FunnelChart({
data: data,
width: 650,
height: 450,
bottomPct: 1/4
});
chart.draw('#funnelContainer', 2);
</script>A demo of the above example can be found here
MIT