[front] style: Improve Distribution Histogram readability

[adrausch]

• [ ] Make the chart denser (smaller chart, smaller font, less space)
• [ ] Show which bucket the user is in
• [ ] increase histogram granularity (buckets of size 1 instead of 2, or maybe variable sizes)

[GresilleSiffle]

Hello, I got some questions regarding the description.

The distribution histogram is what is called "Criteria scores distribution" in the front end right?

Make the chart denser (smaller images, smaller font, less space)

(a) What does it mean exactly to make the chart denser? The current chart appears to me already dense.

(b) Are there any image in this chart?

(c) If we want less space, I think we need to specify which space should be reduced. For instance, the padding of the parent container is important for readability, so maybe it can be kept in desktop?

[GresilleSiffle]

increase histogram granularity (buckets of size 1 instead of 2, or maybe variable sizes)

In the back end, in the Entity model we can increase the numbers of bins by replacing:

distribution, bins = np.histogram(np.clip(values, *range), range=range)

by

distribution, bins = np.histogram(np.clip(values, *range), bins=20, range=range)

This will automatically make increase the granularity of the data displayed in the front end. One little downside we could address: it's now hard to read the horizontal axis values, even on desktop. The chart automatically crops some values like 80 to 90.

[glerzing]

Les lignes verticales en pointillés sont un peu bizarres, ce serait plus logique qu'elles partent de [-80, -40, 0, 40, 80] plutôt que de [-70, -30, 10, 50, 90].

Aussi, ça me paraîtrait plus logique que les marques en bas indiquent [-80, -60, -40, -20, 0, 20, 40, 60, 80] ou bien juste [-80, -40, 0, 40, 80] plutôt que ["-80 to 60", "40 to -20", "0 to 20", "40 to 60", "> 80"]. Après je ne sais pas, c'est peut-être une contrainte de la librairie. Il est peut-être faisable de le faire en insérant du CSS.

[aidanjungo]

I think in the same time we could also round the value we display on the barchart

[GresilleSiffle]

I think in the same time we could also round the value we display on the barchart

This has been solved already in the main branch :ok_hand:

Aussi, ça me paraîtrait plus logique que les marques en bas indiquent [-80, -60, -40, -20, 0, 20, 40, 60, 80] ou bien juste [-80, -40, 0, 40, 80] plutôt que ["-80 to 60", "40 to -20", "0 to 20", "40 to 60", "> 80"]. Après je ne sais pas, c'est peut-être une contrainte de la librairie. Il est peut-être faisable de le faire en insérant du CSS.

Should be solved by the PR https://github.com/tournesol-app/tournesol/pull/1459

[GresilleSiffle]

About the first bullet point:

Make the chart denser (smaller chart, smaller font, less space)

We think with @aidanjungo we have reached an acceptable style for now.