denisemauldin/Funnel

## data.csv

          
            sales_process
            value

            
              Leads
              70

            
              Phone Calls
              61

            
              Pitches
              46

            
              Negotiations
              29

            
              Final Closure
              15

## Funnel
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.

## index.html
<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>
	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>