Visualize both trimmed/untrimmed mean

In order to accommodate (a) the mean sometimes falling outside the colored middle-50% band, and (b) showing two different means, this also changes the visualization of the mean to a triangle. (Pretty common way to show mean, maybe because it's reminiscent of a fulcrum?)
mapbox · Oct 2, 2017 · 8c7c302 · 8c7c302
1 parent f90da62
commit 8c7c302
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/bench/benchmarks_view.js b/bench/benchmarks_view.js
@@ -90,6 +90,7 @@ class StatisticsPlot extends React.Component {
 
                         const {
                             mean,
+                            trimmedMean,
                             q1,
                             q2,
                             q3,
@@ -99,6 +100,8 @@ class StatisticsPlot extends React.Component {
                             argmax
                         } = v.summary;
 
+                        const tMax = t.domain()[1];
+
                         return <g key={i}>
                             <path
                                 fill="none"
@@ -148,18 +151,20 @@ class StatisticsPlot extends React.Component {
                                     stroke={color}
                                     strokeWidth={bandwidth}
                                     strokeOpacity={1} />
-                                <line // mean
-                                    x1={bandwidth / 2}
-                                    x2={bandwidth / 2}
-                                    y1={t(mean) - 0.5}
-                                    y2={t(mean) + 0.5}
-                                    stroke='white'
-                                    strokeWidth={bandwidth}
-                                    strokeOpacity={1} />
-                                {[mean].map((d, i) =>
+                                <use href="#up-arrow" // mean
+                                    style={{ stroke: color, fill: color, fillOpacity: 0.4 }}
+                                    transform={mean >= tMax ? 'translate(-10, 0)' : `translate(-5, ${t(mean)}) rotate(90)`}
+                                    x={0}
+                                    y={0} />
+                                <use href="#up-arrow" // trimmed mean
+                                    style={{ stroke: color, fill: color }}
+                                    transform={`translate(-5, ${t(trimmedMean)}) rotate(90)`}
+                                    x={0}
+                                    y={0} />
+                                {[mean, trimmedMean].map(d =>
                                     <text // left
                                         key={i}
-                                        dx={-6}
+                                        dx={-16}
                                         dy='.3em'
                                         x={0}
                                         y={t(d)}