Vertically distributed funnel diagram with d3js

I am using d3funnel diagram .

value: function _makePaths() {
        var paths = [];

        // Initialize velocity
        var dx = this.dx;
        var dy = this.dy;

        // Initialize starting positions
        var prevLeftX = 0;
        var prevRightX = this.width;
        var prevHeight = 0;

        // Start from the bottom for inverted
        if (this.isInverted) {
            prevLeftX = this.bottomLeftX;
            prevRightX = this.width - this.bottomLeftX;
        }

        // Initialize next positions
        var nextLeftX = 0;
        var nextRightX = 0;
        var nextHeight = 0;

        var middle = this.width / 2;

        // Move down if there is an initial curve
        if (this.isCurved) {
            prevHeight = 10;
        }

        var topBase = this.width;
        var bottomBase = 0;

        var totalArea = this.height * (this.width + this.bottomWidth) / 2;
        var slope = 2 * this.height / (this.width - this.bottomWidth);

        // This is greedy in that the section will have a guranteed height and
        // the remaining is shared among the ratio, instead of being shared
        // according to the remaining minus the guranteed
        if (this.minHeight !== false) {
            var height = this.height - this.minHeight * this.data.length;
            totalArea = height * (this.width + this.bottomWidth) / 2;
        }

        var totalCount = 0;
        var count = 0;

        // Harvest total count
        for (var i = 0; i < this.data.length; i++) {
            totalCount += isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1];
        }
        //debugger

         var scale = d3.scale.linear().range([50, this.width]).domain([0,12000]);
         var scaley = d3.scale.linear().range([50, this.height-50 - ((this.height-50) / 2)]).domain([0,12000]);
         console.log(this.data)
        // Create the path definition for each funnel section
        // Remember to loop back to the beginning point for a closed path
        for (var i = 0; i < this.data.length; i++) {
            count = isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1];
            console.log(count)
            // Calculate dynamic shapes based on area
/*                  if(i< 3){
                    console.log(this.data[i+1][1])
                    bottomBase = scale(this.data[i+1][1]);
                }
                else{

                    //bottomBase = Math.sqrt((slope * topBase * topBase - 4 * area) / slope);
                    bottomBase = 0;
                }
                console.log("bottom"+bottomBase+"top"+topBase)
            dx = topBase / 2 - bottomBase / 2;
            topBase = bottomBase; */
            if (this.dynamicArea) {
                var ratio = count / totalCount;
                var area = ratio * totalArea;

                if (this.minHeight !== false) {
                    area += this.minHeight * (this.width + this.bottomWidth) / 2;
                }
                if(i< 3){
                    bottomBase = scale(this.data[i+1][1]);
                }
                else{
                    console.log("else"+"topBase"+topBase+"slope"+slope+"area"+area)
                    console.log("blah"+ (slope * topBase * topBase - 4 * area)/slope)
                    //bottomBase = Math.sqrt((slope * topBase * topBase - 4 * area) / slope);
                    bottomBase = topBase;
                }
                console.log("bottomBase-"+bottomBase)
                dx = topBase / 2 - bottomBase / 2;
                dy = area * 2 / (topBase + bottomBase);
                dy = scaley(this.data[i][1]) ;
                if (this.isCurved) {
                    dy = dy - this.curveHeight / this.data.length;
                }

                topBase = bottomBase;
            }

            // Stop velocity for pinched sections
            if (this.bottomPinch > 0) {
                // Check if we've reached the bottom of the pinch
                // If so, stop changing on x
                if (!this.isInverted) {
                    if (i >= this.data.length - this.bottomPinch) {
                        dx = 0;
                    }
                    // Pinch at the first sections relating to the bottom pinch
                    // Revert back to normal velocity after pinch
                } else {
                    // Revert velocity back to the intial if we are using
                    // static area (prevents zero velocity if isInverted
                    // and bottomPinch are non trivial and dynamicArea is false)
                    if (!this.dynamicArea) {
                        dx = this.dx;
                    }

                    dx = i < this.bottomPinch ? 0 : dx;
                }
            }
            console.log("dx"+dx)
            // Calculate the position of next section
            nextLeftX = prevLeftX + dx;
            nextRightX = prevRightX - dx;
            nextHeight = prevHeight + dy;

            // Expand outward if inverted
            if (this.isInverted) {
                nextLeftX = prevLeftX - dx;
                nextRightX = prevRightX + dx;
            }

            // Plot curved lines
            if (this.isCurved) {
                paths.push([
                // Top Bezier curve
                [prevLeftX, prevHeight, 'M'], [middle, prevHeight + (this.curveHeight - 10), 'Q'], [prevRightX, prevHeight, ''],
                // Right line
                [nextRightX, nextHeight, 'L'],
                // Bottom Bezier curve
                [nextRightX, nextHeight, 'M'], [middle, nextHeight + this.curveHeight, 'Q'], [nextLeftX, nextHeight, ''],
                // Left line
                [prevLeftX, prevHeight, 'L']]);
                // Plot straight lines
            } else {
                paths.push([
                // Start position
                [prevLeftX, prevHeight, 'M'],
                // Move to right
                [prevRightX, prevHeight, 'L'],
                // Move down
                [nextRightX, nextHeight, 'L'],
                // Move to left
                [nextLeftX, nextHeight, 'L'],
                // Wrap back to top
                [prevLeftX, prevHeight, 'L']]);
            }

            // Set the next section previous position
            prevLeftX = nextLeftX;
            prevRightX = nextRightX;
            prevHeight = nextHeight;
        }

        return paths;
    }

      

to create a funnel diagram in d3. I am trying to create a funnel chart that is vertically split at each level as well. something like this picture is an     image of a vertically split funnel diagram.

here is a fiddle for my code for a normal funnel chart
   simple custom funnel chart I want to convert it to a vertically split funnel chart at every level. what changes could i make with this function to get what i want

+3


source to share





All Articles