Skip to content

Instantly share code, notes, and snippets.

@denisemauldin
Forked from ronakrrb/Funnel
Created April 17, 2018 15:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denisemauldin/12e819cfba9cf3119db588bcef54272c to your computer and use it in GitHub Desktop.
Save denisemauldin/12e819cfba9cf3119db588bcef54272c to your computer and use it in GitHub Desktop.
Funnel Chart Layout built in d3.js
sales_process value
Leads 70
Phone Calls 61
Pitches 46
Negotiations 29
Final Closure 15
This examples shows the sales funnel in an organisation i.e.
1. Number of leads created.
2. Number of leads to whom phone calls were made.
3. Number of leads pitched to whom phone calls were made.
4. Number of leads whom were pitched, negotiated.
5. Number of final closure.
<html>
<head>
<style>
body {
font: 10px sans-serif;
}
.arc path {
stroke: #fff;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://s3-ap-southeast-1.amazonaws.com/charts.pykih.com/gists/funnel.js"></script>
<script>
var width = 700,
height = 450,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#255aee","#3a6fff","#4f84ff","rgb(101,154,302)","rgb(122,175,323)", "rgb(144,197,345)", "rgb(165,218,366)"]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
d3.csv("data.csv", function(error, data) {
var funnel = d3.funnel()
.size([width,height])
.mouth([100,100])
.value(function(d) { return d.value; });
var line = d3.svg.line()
.interpolate('linear-closed')
.x(function(d,i) { return d.x; })
.y(function(d,i) { return d.y; });
var g = svg.selectAll(".funnel-group")
.data(funnel(data))
.enter().append("g")
.attr("class", "funnel-group");
g.append("path")
.attr("d", function (d){ return line(d.coordinates); })
.style("fill", function(d) { return color(d.sales_process); });
g.append("text")
.attr({
"y": function (d,i) {
if(d.coordinates.length === 4) {
return (((d.coordinates[0].y-d.coordinates[1].y)/2)+d.coordinates[1].y) + 5;
} else {
return (d.coordinates[0].y + d.coordinates[1].y)/2 + 10;
}
},
"x": function (d,i) { return width/2;}
})
.style("text-anchor", "middle")
.text(function(d) { return d.sales_process; });
d3.select("body").append("table")
.attr({
"id" : "footer",
"width": width + "px"
})
d3.select("body #footer").append("tr")
.attr({
"class" : "PykCharts-credits",
"id" : "credit-datasource"
})
.append("td")
.style("text-align","left")
.html("<span style='pointer-events:none;'>Credits: </span><a href='http://pykcharts.com' target='_blank'>"+ "Pykcharts" +"</a>");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment