Funnel charts #3504
Comments
|
Another way to think about funnels is as lines... The point where two stages meet is the datum in this case, and the sloped segment between the points indicates the 'rate of loss' between points. |
|
I really dislike the version where the whole side is sloped - I get that this makes the analogy to an actual funnel clearer, but it makes the data value highly ambiguous. But connecting bars with a sloping region in the gap, like the amcharts example does, strikes me as really cool, and would be a nice addition to regular bar charts too. This came up recently, I can't seem to find it now, but it's a great effect for stacked bars with some sort of stack sorting, because it shows you when two series change order in the stack. At that point it would be fairly easy to imagine this just as another attribute to a bar chart to shift it to symmetric about the size-axis origin, but perhaps enough of the default attributes should change that it's worth making a trace type for it (and just use the bar code to render it) |
|
Yup, that about sums up my feelings after writing this up. I wonder if a new trace type might not be better just in terms of usability, rather than having to juggle |
|
Oh I was thinking of this not as stacked at all, but a single trace of horizontal bars of equal height. That's how the amcharts example does it, and it shows you all the relevant information clearly: the total starting size, the size and amount lost at each stage, and it's intuitive that each stage is a subset of the previous stage. The way that highcharts example shows it, where the vertical size of each segment is different, strikes me as totally inappropriate. Yes, it shows you the size at each stage (at least if you can figure out how to interpret the sloping sides), but the total stack size is completely meaningless and there's no way to visually see what's lost at each stage. |
|
OK, so then a pie-like thing makes sense, if we want to be able to let people have different colours for each stage. I actually think that separate legend items per stage could be problematic if we allow click-to-hide :) |
|
Related potential use for a bar trace positioned symmetrically about the origin of the size axis: check out the "neutral" trace here https://peltiertech.com/charting-survey-results/:
The final piece we'd need to make this plot I guess is an attr to say "stack this trace on the negative side" for the "hate" and "dislike" traces. Or perhaps that would happen automatically if "neutral" is the third trace in the stack but it has an attribute saying "position this trace symmetrically"? |
|
So what can we converge on in terms of an API here? The key question in my mind is: is this pie-like in the sense that one funnel = one trace? Or bar-like in the sense that one funnel stage = one trace? In general I feel like this is quite pie-like, even perhaps to the point of not actually rendering axes etc. |
|
Definitely one funnel = one trace. I'm not sure it has any practical implications but to my mind it's much more like horizontal bars than pie. Perhaps we don't draw them by default, but I certainly think we want it drawn on cartesian axes, so that you can overlay it with other traces matching at least the category axis, and probably so you can stack funnels like https://stackoverflow.com/questions/45421748/making-a-stacked-funnel-chart-in-excel |
|
Ok for one funnel per trace. It’s very common to want each bar a different color however (much more than to segment each bar like in the image above) so I would want built in support for this, like in pie. |
|
|
|
So that's interesting: I guess there are two ways of seeing funnel charts. It's either "each step contains a subset of the previous step" meaning each unit appears in N stages. Or it's "each step contains a unit in its current position" meaning each unit is accounted for in one stage at a time. |
|
Note that at the moment we're not considering building the ability to make the above chart with the sloping sides, as it's very ambiguous/incorrect to encode something with height while you're narrowing the width. @chriddyp do you think it's very important to support this kind of thing with a constant slope? |
|
Right, I guess that's like "here's what's in our sales funnel right now" in which case "total" does have a real meaning, it's the sum of all deals the team is working on. But there's also no need that successive stages must decrease in size - averaged over time they would, but that's not necessarily true in one snapshot because they refer to different items. |
|
|
|
The pie analogy works for the snapshot case but I don’t see how it handles the successive parts of a whole case. Want to elaborate on the API you’re imagining? |
|
(still discussing with @chriddyp actually, but basically we would not support the successive parts of whole case if we went pie-like, @alexcjohnson ) |
|
OK, discussion concluded... original plan still stands. Let's add one more bullet though:
|
|
If we wanted a pie-like funnel we could create a second |
Isn't a pie-like funnel a |
Not really: I meant in the sense of "parts of whole" |
|
FYI in whatever program produced that example, the value is encoded in the max width, not the area. Look what happens when you overlay the two sides: In fact I think if you area-encode with constant thickness, you're forced into strange situations like a boundary line bigger than the one above despite the same or smaller value. Consider a step 100-100-100-50-50-50, there's an extra degree of freedom (you could make the 100's look better if the 50's look worse) but I think you'll always get stuff like this (grey is the midpoint to show value encoding): |
|
Surely there is a stable optimum such that all points along the edge are connected with minimum internal angles, that doesn’t look nearly as jagged as your thing above. |
|
Maybe not though... I see that two equally sized adjacent bars causes a problem. |
|
Yeah my example is ridiculous, but that's the point, I really don't think you can do better. There's only one extra degree of freedom so if you make the 100s look better the 50s look worse, and vice versa. Using the max width is visually appealing because the last bar is straight so the overall chart looks like a physical funnel, but interpretation is bizarre, you have to read it as something like "at this stage we have value Y but then in the next stage it's going to drop to Z." Could we get away with sloped connectors between rectangular data bars, like the amcharts example? That way the stage values and inter-stage reductions are separate visual elements and it's all very clear what's what. I suppose another option that might make more intuitive sense would be to encode the value in the minimum width of the trapezoid. That way you can read each stage fairly naturally as "at this stage we reduced from value X (the previous stage) to value Y (this stage). So looking at that one trapezoid you can see the two key metrics for the stage: the remaining value and what was lost getting there. The disadvantage though is people who are used to the dumb but more common max-width encoding would be disoriented. |
|
Right. OK let' stick with normal rectangular bars and rely on diagonal connectors to make things look funnel-y. |
|
In respect to conversation above, this thing appear to be quite similar to |
|
OK so let's focus on the Yes, we will need to be able to specify the marker as a bar: color, length, line-width, line-color etc. We will also need to be able to specify the connector-lines and connector-fill, as well as the bar gap and width etc. (similar to waterfall in a way). Orientation as well. |
|
Very nice! I would remove connector.mode: I think we should support only "between" |
|
What about negative sizes? For the moment one could pass negative sizes and the connectors intersect. But in that case (& if we want to support them then) we may need another color container... |
|
See above: we said “no negative values”... doesn’t make sense semantically in a funnel. |
|
FWIW |
|
Thanks @alexcjohnson for the pointer to |
|
For both Note that I think that for For |
|
New funnel prototype with |
|
updated funnel prototype with auto hide axis when there are only funnels visible in data. |
|
@archmoj looking good - which branch is that on? |
|
@etpinard thanks for looking at it. That is on https://github.com/plotly/plotly.js/tree/funnel-finalist |
|
Second prototype of the day now it is possible to center the inside text using |
|
New prototype with filled in-between areas i.e. thanks to @nicolaskruchten feedback. |
|
Oh yeah, so nice! can we default the text to not rotate like it does? i.e. stay horizontal? |
|
For textinfo: I think we need to distinguish between "percentage of total" and "percentage of previous" and allow people to specify both/either/neither. |
Perhaps also "percentage of first", like this one? |
|
@nicolaskruchten Good point related to |
or to the sum of all values... |
Yes that can make sense too. So should we have all the 3 rather similar to |
|
Right I forgot pct of first of course |
|
And yes this should be available to hoverinfo AND hovertemplate please |
|
Here is the updated prototype which displays those 3 ratios. |
|
And this the development branch: fix3777-textinfo-waterfall-fin...funnel-new-proto . |
|
Updated prototype with |
|
@archmoj I gave your fix3777-textinfo-waterfall-fin...funnel-new-proto a first look. It's looking pretty good! I only noticed two "major" things:
Once these are addressed, please PR away 🚀 The other comments are minor. |
and others
Funnel charts are kind of interesting because they're kind of like stacked bar charts, with variable width bars, often with sloping sides, which makes for the potential for double-encoding. A standard stacked bar chart has each segment with the same width, and the height of the segment encodes the datum. On the other extreme you can have bars where each are the same height, and the width encodes the datum, like this: https://www.amcharts.com/demos/funnel-chart/
In both of those cases, the area is proportional to the datum. If you start sloping the sides, then the area no longer matches the datum and it's just the height: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/funnel/
So we could maybe add some options to
barto make the version without sloping sides, but it may make more sense to create a new trace type here. We'll want some special legend and color handling, as well as some computations for hovertemplate like 'percentage of total' and 'percentage difference with previous stage' etc.The text was updated successfully, but these errors were encountered: