feat: reverse fill color for histograms (#4374)

Histogram reverse sorts by step number and, previously, the first step
was the darkest while the last step was the faintest. While this works
for most colors, it does not work well for gray based colors.

Now, it is true that we have a different set of color palettes in time
series and it is less of the problem but now that we let users tweak the
run color, it is easy to imagine user picked color being a problem in
the histograms.

To alleviate the problem, we gave the most important step, the last one,
the most salient color.

Author: stephanwlee

tensorboard/plugins/histogram/vz_histogram_timeseries/vz-histogram-timeseries.ts

@@ -419,10 +419,10 @@ class _VzHistogramTimeseries
       .scaleLinear()
       .domain(xScale.domain())
       .range([0, outlineCanvasSize]);
-    var outlineColor = d3
+    const fillColor = d3
       .scaleLinear()
       .domain(d3.extent(data, timeAccessor))
-      .range([color.darker(), color.brighter()])
+      .range([color.brighter(), color.darker()])
       .interpolate(d3.interpolateHcl);
     var xAxis = d3.axisBottom(xScale).ticks(Math.max(2, width / 20));
     var yAxis = d3
@@ -548,19 +548,19 @@ class _VzHistogramTimeseries
             ')'
         )
         .style('stroke', function (d) {
-          return mode === 'offset' ? 'white' : outlineColor(timeAccessor(d));
+          return mode === 'offset' ? 'white' : fillColor(timeAccessor(d));
         })
         .style('fill-opacity', function (d) {
           return mode === 'offset' ? 1 : 0;
         })
         .style('fill', function (d) {
-          return outlineColor(timeAccessor(d));
+          return fillColor(timeAccessor(d));
         });
     var hoverEnter = histogramEnter.append('g').attr('class', 'hover');
     var hoverUpdate = histogramUpdate
       .select('.hover')
       .style('fill', function (d) {
-        return outlineColor(timeAccessor(d));
+        return fillColor(timeAccessor(d));
       });
     hoverEnter.append('circle').attr('r', 2);
     hoverEnter.append('text').style('display', 'none').attr('dx', 4);