better readability and scalability in bar graphs with differing numbers of matches#125
better readability and scalability in bar graphs with differing numbers of matches#125AetheriumSlinky wants to merge 1 commit intomainfrom
Conversation
| return { x: Number(numberOfTurns), y: matchesLengthDictionary[numberOfTurns] }; | ||
| }); | ||
|
|
||
| const matchLengthsMaxY = Math.max(...matchesWithLengthsData.map(height => height.y)); // Finds the tallest column |
There was a problem hiding this comment.
your logic here works, but it is doing a little bit extra work than required.
Can we instead compute the maxY inside the .map on line 22? Basically initialize the "max" to the first value of the array, and everytime you loop to a new value in the .map, you can do a comparison to the existing max, and replace it if it is greater :)
There was a problem hiding this comment.
The same goes for your other usages :)
There was a problem hiding this comment.
I'm going to be using .reduce?
There was a problem hiding this comment.
in this case, no. ".map" is already looping through every element of matchesWithLenghtsData. The "iterator" or current value of each iteration is "numberOfTurns". If you do "matchesLenghtsDictionary[numberOfTurns]" you'll get the "y" value aka the match length for that particular match.
you can save that in a variable that is keeping track of your max, updating the max as you iterate AND find a new length that is larger than your existing saved max.
|
Screen caps of the before and after please! |
2 participants
Problem: some players have 20 matches, some have 200. The bar graph showing their placements (and the general one in Match Trends) had a fixed Y-maximum which made some graphs look very flat and somewhat unreadable.
Solution: this fix changes the maxY value of each bar graph to scale with the tallest column (and adds +5 to it) to make the graphs more readable.