adds y-axis scale to the histogram view #4349
Conversation
|
Thanks for adding this scale! However, I'd vote for a more visual approach (without specific numbers). The numbers don't add much value (since they depend on a lot of factors, such as sample size, and cannot really be interpreted). Instead, I'd suggest to only draw some horizontal lines which indicate the logarithm. Similar to the following pattern, multiple horizontal lines could be directly drawn into the canvas in a light blue (or gray) tone.
You can draw the lines by dividing the range of the histogram values into n equally-sized intervals (e.g., if the histogram covers values 0 to 1000; you could divide it into the ranges 0-200, 200-400, 400-600, 600-800, 800-1000). For the upper values of each interval, you calculate it's height in the logarithmic scale and draw the line there. This should reproduce the logarithmic visual from the picture above. |
|
Following your suggestion I could produce the following:
As there are almost only lines a the top of the axis, this does not look nice to me. I reworked this a bit to make this look more appealing. Now due to numeric instability the histogram looks quite different: my conclusion: either the histogram or the axis scale do not look so good. |
Why do you need to change the histogram itself? I would have thought, that you could simply divide the maximum value in 4 ranges and then you only have 3 lines on the axis. But let's talk about this in person! |
|
MichaelBuessemeyer
force-pushed
the
add-y-scale-to-histogram
branch
from
b6d6734
to
9fc1971
Compare
* smoothing is done by reducing the intensity value into the range from 1 to 10 and then taking the logarithm of these values
|
We agreed on the second version (2nd picture) |
|
@philippotto Everything should be ready for your second review. Lets wait for the CI to deploy a dev instance 👍 |
|
@philippotto I added the dev instance :) |
|
Awesome! Will review in a bit :) @fm3 In #4349 (comment) it seems as if the normalization and logarithmic transformation helps to bring out a two-gaussian-characteristic. Maybe this insight helps when performing a histogram normalization? Not sure, whether this is helpful, but it just crossed my mind. |
| @@ -122,7 +140,7 @@ class Histogram extends React.PureComponent<HistogramProps> { | |||
| ref={ref => { | |||
| this.canvasRef = ref; | |||
| }} | |||
| width={300} | |||
| width={canvasWidth} | |||
| // We use canvasHeight - 1 because else half of the top line would be cut off. | ||
| const lineHeight = Math.round(Math.log10(intervalSize * interval) * (canvasHeight - 1)); | ||
| ctx.moveTo(0, lineHeight); | ||
| ctx.lineTo(8, lineHeight); |
There was a problem hiding this comment.
Maybe extract the 8 as a lineWidth variable?
URL of deployed dev instance (used for testing):
Steps to test:
Issues:
[ ] Updated migration guide if applicable[ ] Updated documentation if applicable[ ] Adapted wk-connect if datastore API changes[ ] Needs datastore update after deployment