Axis ticks placement / tooltip issues

[theiliad]

This issue is highly visible in the area chart demos:
https://deploy-preview-412--carbon-charts-core.netlify.com

However it also exists in any chart that supports continuous scales.

Description:

Possible solutions:

• Refactor of axis ticks to line up more closely with datapoints presented in the graphs
• Sticky tooltips (could introduce its own set of disadvantages as well, still may be a possibility for users to enable if they believe that there's a continuous relationship between their datapoints...?)
• Clustering of datapoints within a tooltip (e.g. divide grid into regions that can activate tooltips on all the points within the region + possible extra styling to highlight those points on hover within the region...?)

Looking for options here

[theiliad]

More examples from https://carbon-design-system.github.io/carbon-charts:

[gvnmagni]

Hello! We’d make the tooltip working continuously over the chart with a snap to the closer datapoints. It would work the same as it is right now, but it could be attached not to grid ticks but generally free to span on the whole chart.
If there are more datapoints at the same moment in time, they will be all shown within the tooltip.

In addition to this, we would like to make the cursor line (blue dotted line in the image) on chart always visible, even if there are no datapoints highlighted. We know this would create an exception for this specific type of charts, so please consider this as a further improvement that would be great to discuss together

Do you think this could work?

PS please note that this design is a WIP by Accurat and has not been approved by the IBM design team yet

[theiliad]

Hello! We’d make the tooltip working continuously over the chart with a snap to the closer datapoints. It would work the same as it is right now, but it could be attached not to grid ticks but generally free to span on the whole chart.

Do you think this could work?

I sent your proposed solution to the design team.

At a glance though 2 issues still stand out to me:

1. We would now be potentially showing 2 tooltips on 1 chart at the same time
2. You would still miss the chance to see the comparative version of the tooltip for many axis ticks

[anne-stevens]

A few comments from Cognos Analytic's perspective:

1. In general, the information in the proposed tooltip is fairly sparse. In the line chart example above, there is only one measure (what ever is on the y-axis). Therefore, it is easy for the user to understand that the value in the tooltip refers to that measure. However, there are many charts that would have multiple measures projected onto one data point. If the tool tip doesn't identify what value is what measure, the user has to guess. Here's some examples:

Each point in this bubble chart has 3 measures: Quantity, Food Goal and Total Goal. The tooltip clarifies which value refers to which measure.

Another example, a treemap

This small multiples example has only one measure in the tooltip (Total Order Sales) but it identifies not just what is in the legend, but what is on the x-axis and what is in the small multiple as well (Date | Beverages | Church St). This is a case worth considering for the sake of accessibility since we rely on tooltip info for accessibility.

2. Aggregation type (eg. Sum, Avg, Min, Max, Mean, Mode). This is also important information for understanding the values in tooltips. Again, an accessibility issue.

[gvnmagni]

Thanks @theiliad

1. If you are referring to the black tooltip (date) and the white one (values), yes, we found this option in the Carbon_charts_Master sketch file and we thought it could be a good addition.

2. If I got the point correctly, you are referring to axis ticks such as March (as in the following image). We don't think it would be necessary, we would remove completely the tooltip from the axis ticks since we can't really say the values of each dataseries in that specific point.
   Those values are an assumption given by lines interpolation, not actual data, and therefore it would be misleading to display those values.
   Applied to other charts (such as charts with discrete axis) this behaviour will make it work as usual since we have datapoints on ticks

[anne-stevens]

3. The proposal above has a vertical reference line and a callout tooltip on the x-axis to highlight the item there and make it easy to understand what date the tooltip values relate to. Two issues:

• the solid black is very very bold. IMO it adds too much noise to the viz. What about just highlighting the x-axis label. Just a thought.
• did you consider a reference line and a callout tooltip on the y-axis? For a scatter plot with a measure on both axes, would there be reference lines and axis tooltips on both axes, or neither?

[anne-stevens]

4. Re. Multiple datapoints example above (2nd from the top), it looks like the tooltip has 2 values but that there aren't actually data points on the vertical reference line. I am assuming this because there are no circles data point symbols on the line there. If so, is the system interpolating the value based on how the curved line is drawn between known data points?

5. Re. the Single data point example above (bottom example) did you consider listing the values for all three data points on that date but just highlighting the value for the highlighted point? It would provide more context to the highlighted value and eliminate the need to hover over different points one at a time.

6. From Cognos Analytics experience, column names can be very long. If you don't have some rules for addressing max tooltip width (including truncation or text wrap) things can get out of control with huge wide tooltips that blot out a lot of the UI and become difficult to read.

[gvnmagni]

Hello Anne, thanks for the feedback, you pointed out important aspects of this issue.

1 - We totally agree, the tooltip should probably be adapted to difference charts

3 - You are right, the black tooltip is quite bold, we were primarily thinking about functionalities and not style, at least at the moment.
When necessary, a reference on the Y axis would be required as well.

4 - The tooltip has two values because there are two dots overlapped, we’d avoid displaying values of the lines, where we know it’s a graphical interpolation

5 - Following the original tooltip guidelines, that behaviour is given by the comparative tooltip

6 - Truncation should be probably applied in many areas, such as axis, legends and tooltips. I think this issue can be used to reference to this specific topic: -> Issue 347

[theiliad]

4 - The tooltip has two values because there are two dots overlapped, we’d avoid displaying values of the lines, where we know it’s a graphical interpolation

I think it's a good idea to not assume an interpolation between data points by default and not show the sticky tooltip, however I think when there is a real domain within your datapoints you should be able to pass in a flag and get the sticky tooltip behaviour.

6 - Truncation should be probably applied in many areas, such as axis, legends and tooltips. I think this issue can be used to reference to this specific topic: -> Issue 347

We've added truncation to chart titles where you'd see truncated text and a tooltip onHover, however for tooltips and axis there are no specs on truncation.

[gvnmagni]

Hi! We designed a series of guidelines for each chart typology. You can find the sketch file with all the specs at this link and you’ll see a preview attached to this comment.

A couple of notes:

• please consider that these are structural guidelines, the style applied to tooltip might be not consistent with the actual status of the carbon charts development. It would be great to get some feedback from Mike and the rest of the design team especially for the black tooltip on axis.
• feedback and consideration are more than welcome, we’d be happy to discuss together any possible change

Let us know!

[theiliad]

Looks great so far. Looking forward to get design to look at these

[anne-stevens]

Thanks Giovanni,   Here's my two cents: Black x-axis tooltip/label: I'm repeating myself, but I think the black axis label is too bold and distracting.  Simply bolding the existing axis label would be a more subtle and probably just as effective.  Some of your examples show concise abbreviated x-axis labels such as "Jan" 'Feb', but full length black axis tooltips such as 'Tuesday, 13 August 2020'.  I have a couple of issues with this: (a) it makes the black axis tooltip even bigger and more distracting, (b) The 'Jan' 'Feb' axis labels come form the dataset.  The full length name and year might not be in the data set.  Even if they are, it is a lot of work for the system to go back into the data to determine the year and full day name just for a hover tooltip.  I could see this affecting performance time.  (c) What if Month was on the x-axis and there were 4 years of data?  In that case, the data plotted for Jan actually represents Jan 2014, Jan 2015, Jan 2016 and Jan 2017 (i.e all the Januaries in the data set).  What would the black tooltip read in that case?  If it lists all four Januaries, it could get pretty long winded, not to mention big.  If you do use the black axis tooltip, I would rather see the same content as the axis label, or an untruncated version of the axis label. Including totals in tooltips I like a lot Sometimes Average would be more relevant than Sum total.  For example, the overlapping area chart. Stacked bar chart example: This is an example of where a Sum total would also be good. Summarization type I believe that summarization/aggregation type (Avg, Sum, Min, Max, Count, Mode, Count distinct) should be included in the tooltip, especially if the information is not included in the axis label. Tooltips on colour legend and axis labels Have you considered adding them.  Increases the number of ways to read the chart inforamtion.  Improves accessibility.  For example: Legend member tooltip with corresponding bar highlighting X-axis label tooltip with corresponding bar highlighting Multi select If I select multiple points on, say a map or bubble chart, what happens?  Will the tooltip show the data for all and put a total for all?  Tableau maps does a nice job of this.  Include both Measure name and value in tooltip Some of your examples do this well, such as: Others don't.  For example, this bar chart shows only the value.  It forces the reader's eyes to dart around to the y-axis to figure out what that value relates to. I would prefer to see it as such ------------------------------------------------- |  2019 Q1                                         | |  Clicks unique (Sum)           31500. |-------------------------------------------------   7.  Include more information in the tooltip, for accessibility 1.  Treemap with 'Myanmar 2%' tooltip could be:   ----------------------------------------------------- |  Asia > Myanmar                                  | |  Visitors by country (Avg)              2%  | -----------------------------------------------------   2.  With both size and heat scale, it could scale as so:   ----------------------------------------------------- |  Asia > Myanmar                                  | |  Visitors by country (Avg)              2%  | |  Change with PY (Avg)                29%  | -----------------------------------------------------   8.  Alluvial chart 1. Did you consider putting left and right axis labels outside the chart rather than inside?  They could be handled like typical y-axis labels and would reduce covering up the bands in the chart.    9.  Scatter and bubble charts 1.  Typically these have continuous measures on both axes.  Your example has categorical on x-axis (month or day).  For the typical case, it would be nice to hover over a point and get two blue dotted reference lines, one pointing to value on x-axis and the other to the value on the y-axis.    Hope the feedback is useful,   Anne Stevens__ Data visualization strategy User experience design   IBM Cognos Analytics | IBM Data and AI     ----- Original message -----From: Eliad Moosavi <[email protected]>To: carbon-design-system/carbon-charts <[email protected]>Cc: anne-stevens <[email protected]>, Comment <[email protected]>Subject: [EXTERNAL] Re: [carbon-design-system/carbon-charts] Axis ticks placement / tooltip issues (#478)Date: Tue, Feb 11, 2020 11:24 AM  Looks great so far. Looking forward to get design to look at these —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.  

[gvnmagni]

Thanks Anne, a few explanations:

Black x-axis tooltip/label:

The comparative tooltip (continuous) is the overall approach, in case of values on ticks it could work exactly as you suggest, it will just need a little exception. We totally agree that the black is really bold, this should be considered as a structural guide

(b) The ‘Jan’ ‘Feb’ axis labels come from the dataset. The full length name and year might not be in the data set. Even if they are, it is a lot of work for the system to go back into the data to determine the year and full day name just for a hover tooltip. I could see this affecting performance time.

This is a specific case that works when user upload data, we would like to set up overall rules that could give a guidance on a higher level. The charts’ code will handle longer and shorter date formats, starting from this, each following case and application will need to be considered independently (tools, editorial print,…).

(c) What if Month was on the x-axis and there were 4 years of data? In that case, the data plotted for Jan actually represents Jan 2014, Jan 2015, Jan 2016 and Jan 2017 (i.e all the Januaries in the data set). What would the black tooltip read in that case? If it lists all four Januaries, it could get pretty long winded, not to mention big..

If I got the point, this could be a line chart with 4 lines (one per each year) or a stacked chart. In both case the black tooltip should say just “January” and single elements should say “2014”, or “2015”, once hovered

Including totals in tooltips.

Totally agree! Additional indicators are super important, within the tooltip there could be any of these it just needed to the specified within the code, when designing the chart application. Including all of the indicators could be too much, even if, in the future, we might consider building an additional tooltip version that could be a more exhaustive version of this one, with room for more than one indicator.

Tooltips on colour legend and axis labels

If I got this correctly, this behaviour would happen with the comparative tooltip as well, hovering directly on the chart. It could be interesting to have an interaction on axis labels, I’m afraid that it would be a bit too much if we have the comparative tooltip working as well.

Multi Select
If I select multiple points on, say a map or bubble chart, what happens? Will the tooltip show the data for all and put a total for all? Tableau maps does a nice job of this.

We would disable comparative tooltips for bubble charts and scatterplot, since it depend on the cursor coordinates, it might include too many datapoint or elements, resulting in a really confusing tooltips.
Given the complexity of maps, we’d prefer to work on their tooltips once they are developed, it will depends a lot on the choices made on the design side.

Include both Measure name and value in tooltip
————————————————————————
| 2019 Q1 |
| Clicks unique (Sum) 31500. |
————————————————————————

We’d suggest to have a generic tooltip rule that works in most of the cases, but for sure it would be interesting to build up different cases and exceptions that could cover all of the needs.

Alluvial chart / Did you consider putting left and right axis labels outside the chart rather than inside? They could be handled like typical y-axis labels and would reduce covering up the bands in the chart.

This would be interesting to see, we’d need a good truncating function for labels but we are totally open to this

Scatter and bubble charts
Typically these have continuous measures on both axes. Your example has categorical on x-axis (month or day). For the typical case, it would be nice to hover over a point and get two blue dotted reference lines, one pointing to value on x-axis and the other to the value on the y-axis.

We tried that and we thought it could be to messy (please consider that we’d have only the tooltip on single elements for these charts), but we had both version (see attached image). I’d love to know what do you think about these

[theiliad]

@gvnmagni in the descriptive tooltip example, what if the user hasn't provided a title for the y-axis?

[anne-stevens]

Thanks for the reply, Giovanni.  I don't know if you could tell on wednesday's call, but the audio quality was poor and I only got the gist of what you were saying.  I appreciate the detail below.    Comments added inline in blue   Anne Stevens__ Data visualization strategy User experience design   IBM Cognos Analytics | IBM Data and AI     ----- Original message -----From: Giovanni Magni <[email protected]>To: carbon-design-system/carbon-charts <[email protected]>Cc: anne-stevens <[email protected]>, Comment <[email protected]>Subject: [EXTERNAL] Re: [carbon-design-system/carbon-charts] Axis ticks placement / tooltip issues (#478)Date: Thu, Feb 13, 2020 4:54 AM  Thanks Anne, a few explanations: Black x-axis tooltip/label: The comparative tooltip (continuous) is the overall approach, in case of values on ticks it could work exactly as you suggest, it will just need a little exception. We totally agree that the black is really bold, this should be considered as a structural guide (b) The ‘Jan’ ‘Feb’ axis labels come from the dataset. The full length name and year might not be in the data set. Even if they are, it is a lot of work for the system to go back into the data to determine the year and full day name just for a hover tooltip. I could see this affecting performance time. This is a specific case that works when user upload data, we would like to set up overall rules that could give a guidance on a higher level. The charts’ code will handle longer and shorter date formats, starting from this, each following case and application will need to be considered independently (tools, editorial print,…).  Your call.  I don't like the idea of even bigger black axis tooltips, if that is what would result.  (c) What if Month was on the x-axis and there were 4 years of data? In that case, the data plotted for Jan actually represents Jan 2014, Jan 2015, Jan 2016 and Jan 2017 (i.e all the Januaries in the data set). What would the black tooltip read in that case? If it lists all four Januaries, it could get pretty long winded, not to mention big.. If I got the point, this could be a line chart with 4 lines (one per each year) or a stacked chart. In both case the black tooltip should say just “January” and single elements should say “2014”, or “2015”, once hovered.  What I had in mind was this very common use case: a single line chart with 3 years of data: As you can see on the left, there are 3 years of data (2014, 2015, 2016) and each year has 12 months.  The line chart only has one line because it represents the sum total ridership for 3 Januaries, 3 Febs, 3 Marches etc.  I could show this live if you wanted.  Trust me, I tested the behaviour.  It is pretty standard. So my question was, what would the axis tooltip say in this case?  Would it have to say 'Jan 2014, Jan 2015, Jan 2016'?  If so, that would get wordy.  It's a scale issue.   Including totals in tooltips. Totally agree! Additional indicators are super important, within the tooltip there could be any of these it just needed to the specified within the code, when designing the chart application. Including all of the indicators could be too much, even if, in the future, we might consider building an additional tooltip version that could be a more exhaustive version of this one, with room for more than one indicator.   IMO aggregation/summarization method must be included on the axis labels at least.  Without it, it really is not possible to interpret the chart.  For example average ridership per month in the example above is very different from sum total ridership per month.  Could be in the tooltip too. Tooltips on colour legend and axis labels If I got this correctly, this behaviour would happen with the comparative tooltip as well, hovering directly on the chart. It could be interesting to have an interaction on axis labels, I’m afraid that it would be a bit too much if we have the comparative tooltip working as well. Multi SelectIf I select multiple points on, say a map or bubble chart, what happens? Will the tooltip show the data for all and put a total for all? Tableau maps does a nice job of this. We would disable comparative tooltips for bubble charts and scatterplot, since it depend on the cursor coordinates, it might include too many datapoint or elements, resulting in a really confusing tooltips.Given the complexity of maps, we’d prefer to work on their tooltips once they are developed, it will depends a lot on the choices made on the design side. Include both Measure name and value in tooltip————————————————————————| 2019 Q1 || Clicks unique (Sum) 31500. |———————————————————————— We’d suggest to have a generic tooltip rule that works in most of the cases, but for sure it would be interesting to build up different cases and exceptions that could cover all of the needs.  Up to you.  IMO I think this is the most generic and scalable approach. Alluvial chart / Did you consider putting left and right axis labels outside the chart rather than inside? They could be handled like typical y-axis labels and would reduce covering up the bands in the chart. This would be interesting to see, we’d need a good truncating function for labels but we are totally open to this.  Agree about the truncation.  Truncation needs to be addressed generally. Scatter and bubble chartsTypically these have continuous measures on both axes. Your example has categorical on x-axis (month or day). For the typical case, it would be nice to hover over a point and get two blue dotted reference lines, one pointing to value on x-axis and the other to the value on the y-axis. We tried that and we thought it could be to messy (please consider that we’d have only the tooltip on single elements for these charts), but we had both version (see attached image). I’d love to know what do you think about these —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.  

[theiliad]

@anne-stevens can't see any blue text in your comments

[anne-stevens]

That's weird.  I'm attaching screen grabs.     ___  

…

___  

___     ___       Anne Stevens__ Data visualization strategy User experience design   IBM Cognos Analytics | IBM Data and AI     ----- Original message -----From: Eliad Moosavi <[email protected]>To: carbon-design-system/carbon-charts <[email protected]>Cc: anne-stevens <[email protected]>, Mention <[email protected]>Subject: [EXTERNAL] Re: [carbon-design-system/carbon-charts] Axis ticks placement / tooltip issues (#478)Date: Thu, Feb 13, 2020 5:43 PM  @anne-stevens can't see any blue text in your comments —You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe.  

[gvnmagni]

Russel, this image shows the functionality applied to the original case (linechart)