Repository: sunpy/sunpy

Issue:
Unclear which way round colourmap is in Map quicklook
I have a map with data scaled from 0 > 1, and quicklooking it in a notebook gives me the following output:

![Screenshot 2021-01-12 at 13 36 00](https://user-images.githubusercontent.com/6197628/104321238-43fa9a00-54db-11eb-947c-12e8d08e8ce5.png)

It's not clear from looking at this (maybe I'm missing something?) whether black/white areas of the map are high/low values.


Discussion:
Well, the white areas should be the high values and the black areas should be the low values, but there's certainly no color bar to make that clear.  A color bar can probably be integrated with the histogram plot to avoid taking up additional real estate.

(Hmm, it might not be *too* insane to consider adding Javascript handling for mousing over the image...)
I've tagged this as a feature request, as I think there should be some way to work out which way round the values are from the quicklook. Maybe there's a clever way of labelling (or colouring?) the histogram.

Resolving patch:
diff --git a/sunpy/map/mapbase.py b/sunpy/map/mapbase.py
--- a/sunpy/map/mapbase.py
+++ b/sunpy/map/mapbase.py
@@ -328,16 +328,42 @@ def _repr_html_(self):
         if fig.canvas is None:
             FigureCanvasBase(fig)
         ax = fig.subplots()
-        ax.hist(finite_data.ravel(), bins=100, histtype='stepfilled')
+        values, bins, patches = ax.hist(finite_data.ravel(), bins=100)
+        norm_centers = norm(0.5 * (bins[:-1] + bins[1:])).data
+        for c, p in zip(norm_centers, patches):
+            plt.setp(p, "facecolor", cmap(c))
+        ax.plot(np.array([bins[:-1], bins[1:]]).T.ravel(),
+                np.array([values, values]).T.ravel())
         ax.set_facecolor('white')
         ax.semilogy()
         # Explicitly set the power limits for the X axis formatter to avoid text overlaps
         ax.xaxis.get_major_formatter().set_powerlimits((-3, 4))
-        ax.set_xlabel('Pixel value')
+        ax.set_xlabel('Pixel value in linear bins')
         ax.set_ylabel('# of pixels')
-        ax.set_title('Distribution of pixels with finite values')
+        ax.set_title('Distribution of pixel values [click for cumulative]')
         hist_src = _figure_to_base64(fig)
 
+        # Plot the CDF of the pixel values using a symmetric-log horizontal scale
+        fig = Figure(figsize=(4.8, 2.4), constrained_layout=True)
+        # TODO: Figure instances in matplotlib<3.1 do not create a canvas by default
+        if fig.canvas is None:
+            FigureCanvasBase(fig)
+        ax = fig.subplots()
+        n_bins = 256
+        bins = norm.inverse(np.arange(n_bins + 1) / n_bins)
+        values, _, patches = ax.hist(finite_data.ravel(), bins=bins, cumulative=True)
+        for i, p in enumerate(patches):
+            plt.setp(p, "facecolor", cmap((i + 0.5) / n_bins))
+        ax.plot(np.array([bins[:-1], bins[1:]]).T.ravel(),
+                np.array([values, values]).T.ravel())
+        ax.set_facecolor('white')
+        ax.set_xscale('symlog')
+        ax.set_yscale('log')
+        ax.set_xlabel('Pixel value in equalized bins')
+        ax.set_ylabel('Cumulative # of pixels')
+        ax.set_title('Cumulative distribution of pixel values')
+        cdf_src = _figure_to_base64(fig)
+
         return textwrap.dedent(f"""\
             <pre>{html.escape(object.__repr__(self))}</pre>
             <table>
@@ -362,7 +388,13 @@ def _repr_html_(self):
                 <tr>
                 </tr>
                 <tr>
-                    <td><img src='data:image/png;base64,{hist_src}'/></td>
+                    <td><img src='data:image/png;base64,{hist_src}'
+                             src2='data:image/png;base64,{cdf_src}'
+                             onClick='var temp = this.src;
+                                      this.src = this.getAttribute("src2");
+                                      this.setAttribute("src2", temp)'
+                        />
+                    </td>
                 </tr>
             </table>""")
 


Test patch: