Change funnel orientation

[rviquez]

trafficstars

Is there any way to change the funnel from a vertical view to a horizontal view? I haven't look into the code to check how that can be done but wanted to check first to see if there is any possibility to do this.

[jakezatecky]

There is no way to do this as it stands in the current implementation.

However, you can use SVG transformations to rotate the funnel. Assuming you wanted a left-to-right funnel, you could do the following after the funnel has been drawn:

d3.select('#funnel svg')
    .attr('transform', 'translate(0, ' + width + ')rotate(270)')
    .attr('width', height)
    .attr('height', width);

You can also rotate the labels such that they are oriented correctly. However, it's likely the text will overflow the block:

d3.selectAll('#funnel text').each(function () {
    var element = d3.select(this).attr(),
        x = element.attr('x'),
        y = element.attr('y');
    element.attr('transform', 'rotate(90, ' + x + ', ' + y + ')');
});

See complete example below:

https://jsfiddle.net/w8ch2c41/

[jakezatecky]

I am thinking about adding an option in a future release, such as the following:

{
    orientation: 'top-to-bottom',  // Default
    orientation: 'right-to-left',  // Opposite of most horizontal funnels
    orientation: 'bottom-to-top',  // Equivalent to `isInverted` option
    orientation: 'left-to-right'   // Most horizontal funnels
}

It might make sense to also allow a rotation degree (0 - 360). This would naturally complicate some of the math that goes on.

[dearsaturn]

Any word on the progress of this?

[jakezatecky]

@dearsaturn No recent progress on this. It is one of the more "doable" outstanding issues, so I might pick it up in the coming holidays when I have more availability.

[dearsaturn]

:100: happy holidays!

[jakezatecky]

While I could do a scale() then rotate(), that would really screw the dimensions of the text and look very bad. Will need to construct the resulting trapezoids according to a new paradigm and rotate the text as appropriate.

[amitb009]

Is there any way to divide funnel horizontally and vertically both? Please check the funnel digram designed by me. is this possible with d3. https://drive.google.com/file/d/0ByB4z_WuoNl0Wl9Kd2FINklJOUU/view?usp=sharing

[jakezatecky]

@amitb009 That is a very interesting visualization. It could be supported in a future version, but is not quite on the horizon. It is a bit different than this issue, though, so it might make sense to create a new issue allowing for block partitions.

[iftahb]

Dear Jake, Thanks for the very nice work. However, I am not sure I understand - does the funnel chart already support orientation change or not?

[jakezatecky]

No, it does not. It is a high priority enhancement, however, and will be included in the next feature release (whenever that is).

[iftahb]

Thanks! Any rough idea when you believe you will get to it?

Iftah

Sent from my iPhone

On 22 Oct 2018, at 20:26, Jake Zatecky <[email protected]mailto:[email protected]> wrote:

No, it does not. It is a high priority enhancement, however, and will be included in the next feature release (whenever that is).

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjakezatecky%2Fd3-funnel%2Fissues%2F23%23issuecomment-431905524&data=02%7C01%7C%7Cc3ffb0ee319c4b80770808d638438cf8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636758260114562210&sdata=calKTWyLis3M3BApdRkOUkarKDUia5MacdBF3iQEE0g%3D&reserved=0, or mute the threadhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAkwSARkBIFAKOF7N4dmhMt4yOqo0q39mks5unf_YgaJpZM4FaArw&data=02%7C01%7C%7Cc3ffb0ee319c4b80770808d638438cf8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636758260114562210&sdata=f2DeBO7rtByIwPJV0jG%2BXC2BKjz4FIlzfB2clA54vs8%3D&reserved=0.