kirankumaramruthaluri · December 25, 2015 09:39
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Funnel Chart</title>
 </head>
 <body>
 	<div id="wrapper">

 	</div>
 	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 	<script>
    var data = [10,50,108,187,30,82,30];
    function sort_and_unique( my_array ) {
                my_array.sort();
                for ( var i = 1; i < my_array.length; i++ ) {
                          if ( my_array[i] === my_array[ i - 1 ] ) {
                                      my_array.splice( i--, 1 );
                          }
                      }
                      return my_array;
                  };
      sort_and_unique(data);
      data.sort(d3.ascending);
    var canvas = d3.select('#wrapper')
            .append('svg')
            .attr({'width':1100,'height':650});

    var area = d3.svg.line()
            .interpolate('linear-closed')
            .x(function(d){ return d.x; })
            .y(function(d){ return d.y; });
    var max1 = 536, max2 = 8;
    var colors = d3.scale.category10();
    var yx = d3.scale.linear()
            .domain([0,d3.max(data)])
            .range([0,573]);

    var px = function(d,i){ return (d+i*20); };
    var nx = function(d,i){ return (d-i*20); };
    
    var layers = d3.range(data.length).map(function(val,ind){
          if(!data[ind-1])
          {
            data[ind-1] = 0;
          }
      return {"values":[
        {'x':px(max2,val),'y':yx(data[ind])},
        {'x':nx(max1,val),'y':yx(data[ind])},
            {'x':nx(px(max1,1),val),'y':yx(data[ind-1])},
        {'x':px(nx(max2,1),val),'y':yx(data[ind-1])}
      ]};
    });
        
              
    var stack = d3.layout.stack()
            .values(function(d){ return d.values; });
    var group = canvas.append('g')
            .attr('transform','translate(38,0)');

    var path = group.selectAll('path')
            .data(stack(layers))
            .enter()
            .append('path')
            .attr('transform',function(d,i){ return 'translate(33,0)'; })
            .attr('d',function(d){ return area(d.values); })
            .style({'fill':function(d,i){ return colors(i); },'stroke':'#000','stroke-width':2});
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Funnel Chart</title>
	</head>
	<body>
	<div id="wrapper">

	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var data = [10,50,108,187,30,82,30];
	function sort_and_unique( my_array ) {
	my_array.sort();
	for ( var i = 1; i < my_array.length; i++ ) {
	if ( my_array[i] === my_array[ i - 1 ] ) {
	my_array.splice( i--, 1 );
	}
	}
	return my_array;
	};
	sort_and_unique(data);
	data.sort(d3.ascending);
	var canvas = d3.select('#wrapper')
	.append('svg')
	.attr({'width':1100,'height':650});

	var area = d3.svg.line()
	.interpolate('linear-closed')
	.x(function(d){ return d.x; })
	.y(function(d){ return d.y; });
	var max1 = 536, max2 = 8;
	var colors = d3.scale.category10();
	var yx = d3.scale.linear()
	.domain([0,d3.max(data)])
	.range([0,573]);

	var px = function(d,i){ return (d+i*20); };
	var nx = function(d,i){ return (d-i*20); };

	var layers = d3.range(data.length).map(function(val,ind){
	if(!data[ind-1])
	{
	data[ind-1] = 0;
	}
	return {"values":[
	{'x':px(max2,val),'y':yx(data[ind])},
	{'x':nx(max1,val),'y':yx(data[ind])},
	{'x':nx(px(max1,1),val),'y':yx(data[ind-1])},
	{'x':px(nx(max2,1),val),'y':yx(data[ind-1])}
	]};
	});


	var stack = d3.layout.stack()
	.values(function(d){ return d.values; });
	var group = canvas.append('g')
	.attr('transform','translate(38,0)');

	var path = group.selectAll('path')
	.data(stack(layers))
	.enter()
	.append('path')
	.attr('transform',function(d,i){ return 'translate(33,0)'; })
	.attr('d',function(d){ return area(d.values); })
	.style({'fill':function(d,i){ return colors(i); },'stroke':'#000','stroke-width':2});
	</script>
	</body>
	</html>