feat(experiments): violin plots #28073
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
PR Summary
This PR enhances experiment result visualization by replacing rectangular bars with violin plots to better represent probability distributions in the DeltaChart component.
- Added
generateViolinPathfunction in/frontend/src/scenes/experiments/MetricsView/DeltaChart.tsxusing normal distribution approximation for SVG path generation - Implemented gradient fills in violin plots to visually distinguish positive/negative regions
- Simplified delta markers from rectangles to lines for cleaner visualization
- Increased default bar height from 8px to 10px to accommodate violin plot shape
- Added dynamic width scaling based on bar height to maintain proportional violin shapes
1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
Comment on lines
+479
to
+513
| <linearGradient | ||
| id={`gradient-${metricIndex}-${variant.key}`} | ||
| x1="0" | ||
| x2="1" | ||
| y1="0" | ||
| y2="0" | ||
| > | ||
| {lower < 0 && upper > 0 ? ( | ||
| <> | ||
| <stop offset="0%" stopColor={COLORS.BAR_NEGATIVE} /> | ||
| <stop | ||
| offset={`${(-lower / (upper - lower)) * 100}%`} | ||
| stopColor={COLORS.BAR_NEGATIVE} | ||
| /> | ||
| <stop | ||
| offset={`${(-lower / (upper - lower)) * 100}%`} | ||
| stopColor={COLORS.BAR_POSITIVE} | ||
| /> | ||
| <stop | ||
| offset="100%" | ||
| stopColor={COLORS.BAR_POSITIVE} | ||
| /> | ||
| </> | ||
| ) : ( | ||
| <stop | ||
| offset="100%" | ||
| stopColor={ | ||
| upper <= 0 | ||
| ? COLORS.BAR_NEGATIVE | ||
| : COLORS.BAR_POSITIVE | ||
| } | ||
| /> | ||
| )} | ||
| </linearGradient> | ||
| </defs> |
There was a problem hiding this comment.
style: Multiple gradient definitions with the same stops are created for each variant. Consider moving the gradient definition outside the variant loop for better performance.
📸 UI snapshots have been updated3 snapshot changes in total. 0 added, 3 modified, 0 deleted:
Triggered by this commit. |
This reverts commit 12360ea.
60f7e4b to
23b59ee
Compare
|
Size Change: 0 B Total Size: 1.16 MB ℹ️ View Unchanged
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
We are currently showing rectangular bars for the credible interval distribution. This does not give an accurate representation of the underlying data. It is much more likely that the value is close to the center than towards the tails.
Changes
Use violin plots as they better represent the underlying probability distribution of the data. It becomes more visible that the value is likely to be closer to the center.
Before:
After:
Tooltip:
How did you test this code?
👀