Scalar line charts need more precision on axis labels, tooltip

[psybuzz]

If TensorBoard loads a scalar chat with values (Wall time,Step,Value)

1579727534.794,64000,5.544368743896484
1579727944.389,126000,5.545065402984619
1579728140.318,166000,5.545552730560303
1579728495.964,222000,5.545528411865234

The values will be labeled on the y-axis as '5.55'. This lack of precision can be highly misleading. TB should be showing more significant digits when necessary, or perhaps at least an ellipsis '...'.

Similarly, the precise "Value" column in the hover-tooltip shows '5.55'. This means the only reliable way to get the precise values is by downloading the data as CSV or JSON.

[rithiksachdev]

Thanks, @psybuzz for your query but if you are the latest version of tensorboard you will find an alt + scroll option through which you can zoom in-out and also there is an option for smoothing which will help you to create a smooth continuous graph. You can also press alt and select a box to zoom in and get the precise value. In your case, if you want the maximum you can select the following area:-

Here is an example:-

[psybuzz]

Thanks, that's true! Since zooming exists as a workaround, I think this issue should be relatively lower priority.

In that particular example, zooming in still just showed a bunch of 5.55s in the y-axis, instead of the full 5.545552730560303. If TB indicated there was a bit more precision, or even showed just a single 5.55, I think it would be less misleading.

[rithiksachdev]

Great. I think we can add scale factor for easy zoom because while zooming in we are actually changing the scale so, we can take that scale as 0.001 or something of that sort to give the user another option. Should I work on it?

[psybuzz]

Hi, I'm not sure I fully understand the comment about adding a "scale factor for easy zoom". Could you help me understand what that addition looks like?

In my particular case, zooming actually didn't reveal more precision [1], so I think adding a '...' ellipsis with a tooltip next to each label on the y-axis might make sense. Does that UI make sense?

[1] https://imgur.com/a/1FUyPAd

[rithiksachdev]

Hi, Now I totally understand what you are saying and adding a '...' ellipsis with a tooltip will definitely solve the issue. I also want to contribute to the repo so, can you please assign me an issue?

[rithiksachdev]

Hi, Thanks @psybuzz for assigning to me this issue. Can you please give me an example to generate the graph like the one you attached in the link above.

[psybuzz]

Hi, thanks for the willingness to contribute! Code contributions are not expected, but very welcome.

I don't have a code snippet for the specific graph above, unfortunately. In TF2, the simplest Python script to write scalars is something like:

import tensorflow as tf

writer = tf.compat.v2.summary.create_file_writer('./logs')
writer.set_as_default()

tf.summary.scalar("cool tag", 1.3, step=0)

Using tf.summary.scalar, you can write numbers with float precision to try to reproduce the behavior above.

Sadly most demos/tutorials for writing Scalars do not use TF2, (e.g. this demo is a bit outdated https://github.com/tensorflow/tensorboard/issues/3058). https://www.tensorflow.org/api_docs/python/tf/summary/scalar https://www.tensorflow.org/tensorboard/scalars_and_keras#logging_custom_scalars

For more general questions about using TensorBoard, you may wish to ask on one of the TF forums

[rithiksachdev]

Hi, Thank you @psybuzz for your reply. I will definitely try to work on it and update you with a PR.

[rithiksachdev]

Hi, @psybuzz I read the https://github.com/tensorflow/tensorboard/tree/master/tensorboard/components/vz_line_chart2 and tried to improve the accuracy but it didn't actually work for me so, I thought another way of fixing this issue. I suggest that we can add a feature to extract data as you suggested earlier in CSV/JSON for a particular zoom axis and create a new graph for it or generate a graph and make it available as a downloadable png file. Also, adding ellipsis in this above case. What do you suggest @psybuzz?

[psybuzz]

Thanks for taking a look, no worries if it didn't work. In my opinion, fixing the line chart rendering still seems like the proper way to address this. It would be ideal if misleading information wasn't shown in the default state.

Downloading a line chart's CSV/JSON data or a PNG is actually already possible today! The "Show data download links" checkbox in the top left enables controls on each card to allow this.

[rithiksachdev]

Hi @psybuzz, I tried to do more research on how to fix the line chart and completely agree with your opinion. I am new to this growing community of tensorboard developers and checked out the CSV/JSON data download service recently. Please let me know if I could do some more research related to this topic, so that we can solve this issue. Also, thanks for your valuable comments and patience.

[Randl]

This also happens in case the values themselves are relatively large: One possible fix is to calculate tickstep and choose precision of formatter to be at least ceil(log(maximal value/tickstep)).