Funnel and Funnelarea Charts in JavaScript

How to make a D3.js-based funnel chart in javascript.

Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.

Basic Funnel Plot

var gd = document.getElementById('myDiv');
var data = [{type: 'funnel', y: ["Website visit", "Downloads", "Potential customers", "Invoice sent", "Closed delas"], x: [13873, 10533, 5443, 2703, 908], hoverinfo: 'x+percent previous+percent initial'}];

var layout = {margin: {l: 150}, width:600, height: 500}

Plotly.newPlot('myDiv', data, layout);

Setting Marker Size and Color

var gd = document.getElementById('myDiv');

var data = [{type: 'funnel',
             y: ["Sales person A", "Sales person B", "Sales person C", "Sales person D", "Sales person E"],
             x: [1200, 909.4, 600.6, 300, 80], textposition: "inside", textinfo: "value+percent initial",
             hoverinfo: 'percent total+x', opacity: 0.65, marker: {color: ["#59D4E8", "#DDB6C6", "#A696C8", "#67EACA", "#94D2E6"],
             line: {"width": [4, 2, 2, 3, 1, 1], color: ["#3E4E88", "#606470", "#3E4E88", "#606470", "#3E4E88"]}},
             connector: {line: {color: "royalblue", dash: "dot", width: 3}}}];

var layout = {margin: {l: 100}, width: 600, height: 500}

Plotly.newPlot('myDiv', data, layout);

Stacked Funnel

var gd = document.getElementById('myDiv');
var data = [{type: 'funnel', name: 'Montreal',
  y: ["Website visit", "Downloads", "Potential customers", "Requested price"],
  x: [120, 60, 30, 20],
  textinfo: "value+percent initial"},
  {
     type: 'funnel',name: 'Toronto',
    y: ["Website visit", "Downloads", "Potential customers", "Requested price", "invoice sent"],
    x: [100, 60, 40, 30, 20], textposition: "inside", textinfo: "value+percent previous"},
  {
    type: 'funnel',name: 'Vancouver',
    y: ["Website visit", "Downloads", "Potential customers", "Requested price", "invoice sent", "closed deals"],
    x: [90, 70, 50, 30, 10, 5], textposition: "outside", textinfo: "value+percent total"}];

var layout = {margin: {l: 130, r: 0}, width: 600, funnelmode: "stack", showlegend: 'true'}

Plotly.newPlot('myDiv', data, layout);

Funnelarea Plot

var gd = document.getElementById('myDiv');
var data = [{type: 'funnelarea', values: [5, 4, 3, 2, 1], text: ["The 1st", "The 2nd", "The 3rd", "The 4th", "The 5th"],
      marker: {colors: ["#59D4E8", "#DDB6C6", "#A696C8", "#67EACA", "#94D2E6"],
                line: {color: ["#3E4E88", "#606470", "#3E4E88", "#606470", "#3E4E88"], width: [2, 1, 5, 0, 3]}},
      textfont: {family: "Old Standard TT", size: 13, color: "black"}, opacity: 0.65}];

var layout = {margin: {l: 200 , r: 200}, funnelmode: "stack", showlegend: 'True'}

Plotly.newPlot('myDiv', data, layout);

Multi Funnelarea

var gd = document.getElementById('myDiv');
var data = [{type: 'funnelarea', scalegroup: "first", values: [500, 450, 340, 230, 220, 110],
    textinfo: "value", title: {position: "top center", text: "Sales for Sale Person A in U.S."},
    domain: {x: [0, 0.5], y: [0, 0.5]}},
{
    type: 'funnelarea', scalegroup: "first", values: [600, 500, 400, 300, 200, 100], textinfo: "value",
    title: {position: "top center", text: "Sales of Sale Person B in Canada"},
    domain: {x: [0, 0.5], y: [0.55, 1]}},
{
    type:'funnelarea', scalegroup: "second", values: [510, 480, 440, 330, 220, 100], textinfo: "value",
    title: {position: "top left", text: "Sales of Sale Person A in Canada"},
    domain: {x: [0.55, 1], y: [0, 0.5]}},
{
  type: 'funnelarea', scalegroup: "second", values: [360, 250, 240, 130, 120, 60],
  textinfo: "value", title: {position: "top left", text: "Sales of Sale Person B in U.S."},
  domain: {x: [0.55, 1], y: [0.55, 1]}}];

var layout = {width: 600,shapes: [
            {x0: 0, x1: 0.5, y0: 0, y1: 0.5},
            {x0: 0, x1: 0.5, y0: 0.55, y1: 1},
            {x0: 0.55, x1: 1, y0: 0, y1: 0.5},
            {x0: 0.55, x1: 1, y0: 0.55, y1: 1}]}

Plotly.newPlot('myDiv', data, layout);