Make compare previous great!

[paolodamico]

Is your feature request related to a problem?

See original comment, #4651 (comment). Currently when using "compare previous" option you're left deciphering what's actually going on with your graph. All you see is "day 0", "day 1" but that can be quite confusing.

Describe the solution you'd like

I would like to see the exact time periods in the relevant labels.

Describe alternatives you've considered

Additional context

Not sure if this is core analytics or core experience.

Thank you for your feature request – we love each and every one!

[marcushyett-ph]

+1 to this - I was really confused by this feature when dogfooding the product.

[paolodamico]

FYI @clarkus too

[clarkus]

I have some thoughts for improving this. I'll queue it up for after funnels.

[clarkus]

While this isn't specific to how we show graph series in the tooltip, there are examples of how we can clarify comparison ranges. For each option shown, display a color block, the graph series name, the time range, and optionally a control for hiding or showing that option in the chart. Color blocks and time ranges are how we distinguish ranges. For each metric, the primary range will be a solid color. The corresponding comparison range will be the same with a pattern overlaid. The time range for each will match the current time filter set on the chart... for example "last 30 days" compared to "previous 30 days". I am still working through this, but wanted to share the current idea in case it sparks discussion or gets us closer to a short term solution.

[marcushyett-ph]

This is great @clarkus... the line graph example Makes a lot of sense to me.

However I'm quite lost interpreting the bar chart example - I'm not sure if this is a visualization anyone will need - but I'm finding it very difficult to comprehend.

[clarkus]

The grouped bars above represent categorical data with comparison ranges applied. Another way to visualize this would be with a stacked bar chart, which is what we do today. We've heard from some users that the stacked bar chart isn't as valuable as this grouped bar layout. I can see how a comparison range doesn't really make a ton of sense when a lot of categories are shown this way. One thing that isn't represented above, and is a huge help to parse charts is a tooltip. Part of clarifying comparison ranges is going to be able to describe a point in time very clearly. I'm working through some of those changes today with scale in mind. Here's where I am so far, but I need to test it against other real cases to ensure it's going to scale.

Edit - another example for the same chart above but with a hover interaction that focuses on the current step. On hover, I'm showing a tooltip that annotates all the values for the current point on the axis. You can see how we're hitting some upper-bounds on the number of categories that can be described in the tooltip as well as for each step in the chart.

[clarkus]

Thoughts on this solution for clarifying comparison ranges? There is a lot more change in the illustrations above, but the basic solution is to clarify comparison ranges by appending the time window to the graph series name.

For example: pageviews (in the last 30 days) compared to pageviews (in the previous 30 days). This coupled with the work in #5229 could give us pretty clear and succinct labels for complex visualizations.

Any thoughts or feedback, @paolodamico @liyiy @alexkim205 @macobo

[paolodamico]

Sorry for the delay giving feedback here. In the first iteration I 100% agree with @marcushyett-ph, couldn't understand well what the categories well as the x-axis with just numbers was quite confusing.

The next iteration that includes the date in the x-axis makes it a lot clearer, though I was still confused by the "last 30 days" timeframe. Essentially what we're doing in this graph is showing you [for the highlighted example] Dec 6 (baseline) vs. Nov 6 (previous 30 days), so maybe we should just show exact dates to make this clear? (and maybe with less emphasis we keep showing the canonical timeframe). The thing is that: "Chrome (last 30d)" is quite confusing, because your data point is in fact a single day. Even more confusing if you try to compare "last 30d" vs. "previous 30d".

Thoughts?

[clarkus]

It's the time period (30 days) grouped by day, compared to the previous 30 days grouped by day. Exact dates could be more explicit, but also less obvious. If you're looking at a relative range (the 30 days previous to today), it's easiest to communicate that as a relative range. This comparison leans on that relative text pattern. I think we could make the exact dates available, but I feel should be shown secondary to the relative range. It's just more approachable.

What if we could adjust the tooltip depending on the specificity of the target? If you're hovering over the date on axis, or the general area behind it, we could show a summary for the whole date. If you're over a specific point, show just the details for that point. That would provide both absolute dates, and relative dates depending on your cursor position. I'm not sure how this would translate to keyboard navigation... maybe it'd act like tabs. You could focus into an axis point, then move sequentially through values for that point, and then to the next axis point. I can put some examples of this together next week.

[paolodamico]

That makes a lot of sense, particularly if we're very explicit around relative timeranges (e.g. "5 days ago" vs. just "last 30d"). We're being as explicit as with specific dates, but with the relevant context in mind. Not sure if different behaviors based on the cursor will be the best approach here, but worth giving it a shot and seeing how this looks. If we don't do this, we could simply have both ways of displaying the information in the same tooltip (as we have percentages and absolute values in funnels). In any case, I think some mockups here could help us decide better.

@alexkim205 do you think this is something you'd want to get involved in defining?

[clarkus]

Here's a revised concept. The legend (when shown) should reflect the time ranges the user specified in the date range control. The more specific that range, the more specific the value shown in the legend. The tooltip would summarize things using absolute values. This is a bit orphaned from the examples I included in previous comments, but the idea here is to use a tabular layout with comparison ranges. In this case, the layout should scale pretty well and we could even include simple comparison values.

In this example, the tooltip is describing a 1-year time range compared to the previous year. The tooltip labels the metric shown, the dates represented, the breakdown category names, corresponding values, and rates of change. More verbose metric names will affect the ability of this component to scale. Since we are labeling things clearly elsewhere in the chart, we might not need to repeat the metric in this context.

Edit - updated with more detail

Thoughts?

[Twixes]

Tabular style looks great to me.
I'm only a bit worried about "last x" v. "previous x" – "30 days" is a trivial case, but we often see less elegant periods too, especially with custom timeframes. Maybe we could be less specific and just show literally "selected period" v. "previous period"?

[clarkus]

Here's a concept that includes the controls used to set these parameters. I've modified them a bit for clarity, but the functional equivalents exist now. In this case, I'm relying on that date control for both inputting values, and summarizing the values set for the chart. In this case the user input a custom date range, so absolute values are shown. If the user had selected a relative range, that'd be shown instead. I've taken your suggestion and updated the legend to show "current" and "previous" just for simplicity. The main job here is assigning meaning to a color. The tooltip contains absolute dates for each range. For example, in this case we are comparing Dec 5 (current) to Nov 21 (previous).

[paolodamico]

Love this! And agreed, I think we could simply show the time frames relative to how the user selected them, but very explicitly too, i.e. if you selected last 30d, a point could be ("5d ago") or something like that.

[clarkus]

Some context from a user in slack today. I added emphasis to the relevant points for this issue.

So I noticed there is a default set of colors that are chosen based on the number of bars in the plot. In my bar chart I added the previous month's data and those same colors are chosen with now double the number of bars. I wanted more of a shade difference default choice for each bar. Right now if I have two bars Dark Blue and Light Blue are chosen. If I check previous month Teal and Orange bars are added. I feel the default when adding previous should be light version of the current color with better contrast options

The core problem being described is differentiation in the core palette, but also improved contrast while communicating a relationship between current and previous time ranges. Both items should be address be the changes proposed in this issue.

[paolodamico]

So unfortunately we have a bug that doesn't let us accurately measure who many discoveries are being made with this feature enabled. But in our next nail analytics sprint (1.30 2/2) I propose either making the compare experience awesome once and for all or getting rid of it altogether. Thoughts? @mariusandra @Twixes @pauldambra @clarkus

If this is tackled, #5918 needs to be inherently solved too.

[paolodamico]

Should be tackled together with #5473

[clarkus]

Comparison ranges are valuable and something I think users will miss if we remove it. Definitely in favor of keeping it and making it better.