Matthew Petroff https://mpetroff.net mpetroff.net Sun, 29 Mar 2020 22:02:24 +0000 en-US hourly 1 A Case Study in Product Label Regressions https://mpetroff.net/2020/03/a-case-study-in-product-label-regressions/ https://mpetroff.net/2020/03/a-case-study-in-product-label-regressions/#respond Sun, 29 Mar 2020 22:02:24 +0000 https://mpetroff.net/?p=3195 Continue reading ]]> Sometime last year, the Shop & Shop and Giant (of Landover) grocery store chains began introducing redesigned packaging for their store brand products. The two chains share a parent company and share branding, so the labels only use the shared logo without a brand name. The old label designs heavily featured a white background, which made them easy to locate in the store.1 The new brand identity is less distinct, but whether it’s better or worse is a matter of taste. However, there are specific design decisions that were made on some of the labels that have fundamental issues.

In particular, I will focus on the labels for canned vegetables. As one would expect, both the old and new label designs feature the name of the vegetable along with a picture of a “serving suggestion.” Since many vegetables are similar in color, it is often easier to find one’s desired vegetable on the shelf by looking for the name, especially when a particular vegetable comes in multiple variants, such as green beans (whole, cut, diagonally cut, and French style). The old design featured a plain sans-serif font in a dark color on a solid white background, resulting in good contrast and readability. The new design, however, is a clear regression; it trades the consistent, easily readable font for a hodgepodge of different heavily-stylized display fonts on a busier background with lower contrast, which results in much worse readability. This loss of readability makes it take longer to locate a particular product on the shelf.

No salt added green beans cans: old design on left, new design on right

Many of the vegetables come in three variants, regular (“full salt”), low sodium, and no salt added. In the old designs, these were marked using text in a brightly-colored oval. Blue was used for no salt added, and red was used for low sodium; the regular variant did not include an oval. This design allowed one to quickly differentiate between the variants on the shelf. With the new design, these colored ovals were eliminated. The low sodium variant trades the black text on the regular variant for bright blue text and a distinctive blue bar above the text with a clearly readable “low sodium” label. This is an improvement over the old design as it makes the labeling more distinctive and easier to differentiate. Unfortunately, the same is not true for the no salt added variant, which, for some inexplicable reason, is labeled the same as the regular variant except for a small, blandly-colored circular badge in the corner. Instead, it should have been labeled with a distinctive color and a bar with a clearly readable “no salt added” label, similar to the low sodium variant, except using a different color.

Low sodium green beans cans: old design on left, new design on right

The font size was increased for the ingredients list, which is one of the only improvements in the new designs.


  1. It’s the closest I’ve seen to what’s suggested by xkcd: Brand Identity.  

]]>
https://mpetroff.net/2020/03/a-case-study-in-product-label-regressions/feed/ 0
Color Cycle Survey Update https://mpetroff.net/2020/01/color-cycle-survey-update/ https://mpetroff.net/2020/01/color-cycle-survey-update/#respond Fri, 31 Jan 2020 23:38:30 +0000 https://mpetroff.net/?p=3171 Continue reading ]]> Since my last update on the Color Cycle Survey, there have been no drastic changes, but responses have continued to trickle in. There are now ~13.7k total responses, with ~6k responses each for the six color and eight color components. This long-delayed—and somewhat brief—post serves as an update to my previously published six color analysis, while also extending it to eight colors.

➡ Click Here to Take Color Cycle Survey ⬅

I have only made minor changes to the previously detailed analysis procedures (see previous set ranking and order ranking posts for details), but there are now ~50% more responses, which has helped with training stability and has reduced uncertainty between different models in the network ensemble. The figure below shows the fifteen lowest ranked six-color color sets on the left and the fifteen highest ranked six-color color sets on the right.

Six-Color Ranked Color Sets Visualization

The accuracy for both the training and tests sets remained at 58%. The plot below shows the average six-color color set scores as a function of rank, with a 1-sigma error band.

Using the highest-ranked six-color set, the figure below shows the fifteen lowest ranked orderings on the left and the fifteen highest ranked orderings on the right.

Six-Color Ranked Color Cycles Visualization

Accuracy was similar to before, with an accuracy of 55% on the training set and an accuracy of 54% on the test set. The plot below shows the average ordering scores as a function or rank, with a 1-sigma error band.

Next, the same technique was extended to the eight-color color sets. The figure below shows the fifteen lowest ranked eight-color color sets on the left and the fifteen highest ranked eight-color color sets on the right.

Eight-Color Ranked Color Sets Visualization

The accuracy was 57% for both the training and test sets. The plot below shows the average eight-color color set scores as a function of rank, with a 1-sigma error band.

Using the highest-ranked eight-color set, the figure below shows the fifteen lowest ranked orderings on the left and the fifteen highest ranked orderings on the right.

Eight-Color Ranked Color Cycles Visualization

The accuracy was 55% on the training set and 53% on the test set. The plot below shows the average ordering scores as a function or rank, with a 1-sigma error band.

This is an incremental improvement over the previous results, as it just used extra data, while keeping the analysis procedure the same. The fact that accuracy was similar when the analysis was extended to eight-color color sets and color cycles is promising. I’d like to devise a method that combines both the six-color and eight-color color sets in the training process to maximize the use of the response data; I have a few ideas on how to do this but nothing concrete yet. I’ve also looked more into the idea of devising a color namability criterion by reanalyzing the xkcd Color Survey results. While my reanalysis has led to some interesting tidbits about color names, it didn’t really pan out as far as becoming a useful criterion for ranking the color sets at hand. I’ve been trying to clarify the licensing on the raw xkcd Color Survey responses database dump before writing up my findings, but so far, I have not received a reply from Randall Munroe (which is understandable). As always, more responses would be helpful. I had not originally intended for the survey to go on as long as it has, but as I’ve been busy with my normal (cosmology-related) research and as I’ve not received as many responses as I had hoped for, the survey remains open to responses. I plan on leaving it open until the analysis is close to final (at least a few more months), after which I’ll close the survey to responses and execute the final analysis runs.

]]>
https://mpetroff.net/2020/01/color-cycle-survey-update/feed/ 0
Figure Caption Color Indicators https://mpetroff.net/2019/11/figure-caption-color-indicators/ https://mpetroff.net/2019/11/figure-caption-color-indicators/#respond Sat, 23 Nov 2019 18:36:42 +0000 https://mpetroff.net/?p=3032 Continue reading ]]> .fccip-color-underline { text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 0.2em; text-decoration-skip-ink: auto; } .fccip-red { text-decoration-color: #d62728; } .fccip-red-square::after { content: "\25a0"; position: relative; display: inline-block; color: #d62728; } .fccip-blue { text-decoration-color: #1f77b4; } .fccip-blue-gray { text-decoration-color: #6a6a6a; } .fccip-blue-square::after { content: "\202f\25a0"; position: relative; display: inline-block; color: #1f77b4; } .fccip-blue-gray-square::after { content: "\202f\25a0"; position: relative; display: inline-block; color: #6a6a6a; } .fccip-blue-square-mono::after { content: "\25a0"; position: relative; display: inline-block; color: #1f77b4; margin-left: 0.2rem; top: -0.08rem; } .fccip-blue-diamond::after { content: "\25c6"; font-size: 0.85rem; position: relative; top: -0.05rem; display: inline-block; color: #1f77b4; } .fccip-orange { text-decoration-color: #ff7f0e; } .fccip-orange-gray { text-decoration-color: #878787; } .fccip-orange-square::after { content: "\202f\25a0"; position: relative; display: inline-block; color: #ff7f0e; } .fccip-orange-gray-square::after { content: "\202f\25a0"; position: relative; display: inline-block; color: #878787; } .fccip-orange-circle::after { content: "\25cf"; font-size: 1.2rem; position: relative; display: inline-block; color: #ff7f0e; } .fccip-gray { text-decoration-color: #ccc; } .fccip-gray-square::after { content: "\202f\25a0"; position: relative; display: inline-block; color: #ccc; } .fccip-dotted { text-decoration-style: dotted; } .fccip-caption { margin-left: 3em; margin-right: 3em; padding: 0.5em 0; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; }

Earlier this year, I became aware of a feature in GitHub-flavored Markdown that displays a colored square inline when HTML color codes are surrounded by backticks, e.g., #1f77b4. Although I only recently became aware of this feature, it dates back to at least 2017 and is similar to a feature that Slack has had since at least 2014. When I saw this inline color presentation, I immediately thought of its applicability to figure captions, particularly in academic papers; as a colorblind individual, matching colors referenced in figure captions to features in the figures themselves can be challenging at times due to difficulties with naming colors. Thus, I added similar annotations to figure captions in my recently submitted paper, Two-year Cosmology Large Angular Scale Surveyor (CLASS) Observations: A First Detection of Atmospheric Circular Polarization at Q Band:

Fig. 2. Frequency dependence of polarized atmospheric signal at zenith for the CLASS observing site, both for circular polarization (|V|, shown in blue) and linear polarization (\sqrt{Q^2+U^2}, shown in orange). The light gray bands indicate CLASS observing frequencies, with the lowest frequency band corresponding to the Q-band telescope.

Fig. 5. Example binned azimuth profiles are shown…angle cut. The profile in blue is from a zenith angle of 43.9° and a boresight rotation angle of −45°, the profile in orange is from a zenith angle of 46.7° and a boresight rotation angle of 0°, and the profile in red is from a zenith angle of 52.8° and a boresight rotation angle of +45°.

The first caption refers to a line plot, while the second caption refers to a scatter plot with best fit lines. These examples, as well as underlining examples elsewhere in this post, display best in a browser that supports changing the underline thickness via the text-decoration-thickness CSS property. At the time of writing, this includes Firefox 70+ and Safari 12.2+ but does not include any version of Chrome; however, browser underlining support is still subpar to the underline rendered by \LaTeX, so the reader is encouraged to view the figures in the paper.

While the primary purpose of these annotations is to improve accessibility for individuals with color vision deficiencies, they are also helpful when a paper is printed or displayed in grayscale. For example, it is much easier to distinguish blue and orange in grayscale with the annotations than without.

As this was an experiment, I included two different methods for visualizing the color, a thick colored underline under and a colored square following the color name. Since the colors are referring to solid lines in the plot, the underlines make sense because they match the plot features, e.g., a solid blue line. Likewise, a dotted underline might make sense for a dotted blue line, although it is more difficult to discern the color of the dotted line than the solid line. I am undecided as to whether or not including the colored square is a good idea. While it adds an additional visual cue, the main reason I included it was to increase the chances of at least one of the indicators making it past the editors and into the final published paper; as the paper is currently under review, it remains to be seen if either indicator survives the publication process.

For scatter plots, however, colored shapes make perfect sense. A scatter plot with red squares (), blue diamonds (), and orange circles () should include such shapes in the figure caption when the caption refers to the corresponding points. I am undecided as to whether or not the color names in such cases should be underlined, just as I am undecided as to whether or not line plots should included a colored square. Although I have not seen any color indicators, for either lines or scatter points, in the scientific literature, the use of shapes in figure captions is not a new practice. I have found examples dating from the mid-1950s through the early 2000s. The closest example I have found is in a 1997 paper1 that refers to a symbol with both its name and a graphical representation:

Fig. 5. Couette-Taylor experiments. Logarithmic…number. The black triangles (▲) are the results obtained with smooth cylinders, and the open ones (△) correspond to those obtained with the ribbed ones. The crosses (×) show for comparison…and Swinney [8].

Other examples include a 1967 paper2 (and a 1968 paper3) that uses graphical representations inline instead of symbol names:

Fig. 13. Additional…symmetries. Points marked with ■ are the excess…nuclei, points marked with □ the excess…N = Z. The points ▼ show the differences…larger Z-values. The points △ are the differences…for even-Z–odd-N nuclei.

and a 1955 paper4 that puts the figure legend inline in the figure caption:

Fig. 1. (p,n) cross sections in millibarns. ○—measured total…isotope; □—partial…isotope; ×—observed…estimate. Curves…of r0. The dotted bands indicate…energy.

There are other examples, e.g., this 1960 paper,5 that put the legend on separate lines at the end of the caption, but doing so isn’t really the same idea. There are also papers that treated line styles in the same manner as scatter plot symbols, such as this 1962 paper:6

Fig. 1. Counting rate…in pulses per cm2 sec. Maximum…is indicated by broken lines (– – –). The zone…has been shaded.

These examples should not be considered by any means exhaustive, since searching for this sort of thing is extremely difficult.7 In particular, while I don’t know of any prior publications that include color indicators, this does not mean that they do not exist. If anyone reading this is aware of any such examples, or of other interesting figure caption indicators, please let me know.

Adoption of visual color indicators such as the ones presented here would be a significant accessibility improvement, but it would require buy-in from both publishers and authors. The chances of success are unclear but would certainly be improved with advocacy.


Implementation

The \LaTeX color annotation command was defined as

% Black square
\usepackage{amsmath}

% Define color
\usepackage{xcolor}
\definecolor{tab:blue}{RGB}{31, 119, 180}

% Color underlines with breaks for descenders, based on:
% https://tex.stackexchange.com/a/75406
% https://tex.stackexchange.com/a/24771
% https://tex.stackexchange.com/a/321235
\usepackage{soul}
\usepackage[outline]{contour}
\newcommand \colorindicator[2]{%
  \begingroup%
  \setul{0.25ex}{0.4ex}%
  \contourlength{0.2ex}%
  \setulcolor{#1}%
  \ul{{\phantom{#2}}}\llap{\contour{white}{#2}} \textcolor{#1}{\tiny{$\blacksquare$}}%
  \endgroup%
}

and used with \colorindicator{tab:blue}{blue}. For HTML, this CSS

.color-underline {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.2em;
  text-decoration-skip-ink: auto;
}
.blue {
  text-decoration-color: #1f77b4;
}
.blue-square::after {
  content: "\202f\25a0";
  position: relative;
  display: inline-block;
  color: #1f77b4;
}

was used with <span class="color-underline blue blue-square">blue</span> to produce blue. A production implementation would probably involve a symbol web font to improve and normalize the symbol appearance and possibly a better way to draw underlines.


  1. Cadot, O., Y. Couder, A. Daerr, S. Douady, and A. Tsinober. “Energy injection in closed turbulent flows: Stirring through boundary layers versus inertial stirring.” Physical Review E 56, no. 1 (1997): 427. doi:10.1103/PhysRevE.56.427  

  2. Haque, Khorshed Banu, and J. G. Valatin. “An investigation of the separation energies of lighter nuclei.” Nuclear Physics A 95, no. 1 (1967): 97-114. doi:10.1016/0375-9474(67)90154-6  

  3. Aydin, C. “The spectral variations of CU Virginis (HD 124224).” Memorie della Societa Astronomica Italiana 39 (1968): 721. bibcode:1968MmSAI..39..721A  

  4. Blosser, H. G., and T. H. Handley. “Survey of (p, n) reactions at 12 MeV.” Physical Review 100, no. 5 (1955): 1340. doi:10.1103/PhysRev.100.1340  

  5. Evans, D. S., G. V. Raynor, and R. T. Weiner. “The lattice spacings of thorium-lanthanum alloys.” Journal of Nuclear Materials 2, no. 2 (1960): 121-128. doi:10.1016/0022-3115(60)90039-8  

  6. Vernov, S. N., E. V. Gorchakov, Yu I. Logachev, V. E. Nesterov, N. F. Pisarenko, I. A. Savenko, A. E. Chudakov, and P. I. Shavrin. “Investigations of radiation during flights of satellites, space vehicles and rockets.” Journal of the Physical Society of Japan Supplement 17 (1962): 162. bibcode:1962JPSJS..17B.162V  

  7. I found most of the above examples by performing full-text searches in NASA ADS for terms such as “black diamond” or “filled square” and looking through hundreds of results to find the few instances that included both the search terms and the symbols.  

]]>
https://mpetroff.net/2019/11/figure-caption-color-indicators/feed/ 0
Discernibility of (Rainbow) Colormaps https://mpetroff.net/2019/08/discernibility-of-rainbow-colormaps/ https://mpetroff.net/2019/08/discernibility-of-rainbow-colormaps/#respond Mon, 26 Aug 2019 01:57:08 +0000 https://mpetroff.net/?p=2974 Continue reading ]]> Earlier this month, the Turbo rainbow colormap was released and publicized on the Google AI Blog. This colormap attempts to mitigate the banding issues in the existing Jet rainbow colormap, while retaining the advantages of its high contrast; note that Turbo is not perceptually uniform, so care should be used where high accuracy is required, particularly for local differences. What particularly caught my attention was the fact that the author attempted to address the color vision deficiency-related shortcomings of Jet. I am of opinion that the creation of a colorblind-friendly rainbow colormap probably isn’t possible, since the confusion axes of color vision deficiencies become problematic once hue become the primary discriminator in a colormap instead of lightness;1 this made me a bit suspicious of the claim and prompted further investigation on my part. While the author’s attempt to consider color vision deficiencies in the creation of the colormap is laudable, it was unfortunately based on what I feel is a flawed analysis. Depth images visualized using the colormap were fed into an online color vision deficiency simulator, and the results were evaluated qualitatively by individuals with normal color vision; however, this particular simulator is, best I can tell, based on an outdated technique from a 1988 paper2 instead of the more recent and accurate approach of Machado et al. (2009).3 Below, I attempt what I feel to be a more accurate and quantitative analysis, which shows that Turbo isn’t really colorblind-friendly, despite the attempt to make it so.

Since rainbow colormaps are best suited for quickly judging values, their most important property is that colors in non-adjacent sections of the colormap are not confused.4 To evaluate this quantitatively, I devised the following metric. For each color in the colormap, the perceptual distance in CAM02-UCS5 is calculated for every additional color in the colormap. The weighted average of the perceptual distances is then taken, with the squares of the color location distances in the colormap used as weights. For color vision deficiencies, the method of Machado et al. (2009) is used to adjust the colors before the perceptual distance is calculated, as I did for randomly generating color sets and as was done in the development of Cividis;6 a severity of 100 was used, indicating deuteranopia, protanopia, and tritanopia. Thus, similar colors in distant locations in the colormap are penalized.

We will start with rainbow colormaps for our evaluation of colormaps by this metric, first considering Jet, the new Turbo colormap, and Matplotlib’s existing Rainbow colormap, which also attempts to address some of Jet’s shortcomings. In the plot legends, the abbreviations “Norm,” “Deut,” “Prot,” and “Trit” are used for normal color vision, deuteranopia, protanopia, and tritanopia, respectively. Higher perceptual distance, ΔE, is better, as are smoother and more consistent discernibility lines.

Discernibility plot of Jet colormap

Discernibility plot of Turbo colormap

Discernibility plot of Rainbow colormap

The discernibility lines for Turbo and Rainbow are much smoother than those for Jet, since both mitigate Jet’s significant banding issues. Although Jet’s banding issues are generally considered problematic, I, as a colorblind individual, find the banding to sometimes be a redeeming quality, since it makes it easier for me to match part of an image to the colorbar or other parts of the image. For normal color vision, Turbo’s discernibility line is smooth and fairly flat, a significant improvement over Jet, and a minor improvement over Rainbow, although Turbo arguably looks better. However, the discernibility lines for various color vision deficiencies are not nearly as uniform, for either Turbo or Rainbow. This means that for colorblind individuals some parts of the colormaps are considerably more difficult to discern than others, making data plotted with them liable to misinterpretation. Thus, while Turbo and Rainbow improve upon some of Jet’s shortcomings, neither is colorblind-friendly.

Next, we will consider cyclic rainbow colormaps. The classic, and severely flawed, version is the HSV colormap, and the improved version is Sinebow; in regards to non-cyclic rainbow colormaps, these are analogous to Jet and Turbo, respectively. Twilight, a perceptually uniform cyclic colormap, is also considered.

Discernibility plot of HSV colormap

Discernibility plot of Sinebow colormap

Discernibility plot of Twilight colormap

In evaluating the metric for these colormaps, their cyclic nature was taken into consideration in the colormap location distance calculation. Sinebow’s discernibility lines are much smoother than HSV’s, but neither does well for color vision deficiencies. Twilight is much more consistent and colorblind-friendly, although at the expense of average discernibility.

Now, we will consider two perceptually uniform linear colormaps, Viridis, the Matplotlib default, and Cividis a derivative designed with color vision deficiencies in mind.

Discernibility plot of Viridis colormap

Discernibility plot of Cividis colormap

The “V” shape of the metric for these colormaps is expected, since for a linear colormap, the center is closest to the greatest number of other colors. Note that the discernibility of Cividis, which was optimized with color vision deficiencies in mind, is the most consistent between normal color vision and various color vision deficiencies, although Viridis is also okay in this regard, and both are considerably better than any of the rainbow colormaps previously presented.

Finally, diverging colormaps will be evaluated. Here, we consider Matplotlib’s Coolwarm colormap and Peter Kovesi’s Blue-Gray-Yellow colormap.

Discernibility plot of Coolwarm colormap

Discernibility plot of Blue-Gray-Yellow colormap

These show a “V” shape, similar to linear colormaps, although this is less pronounced in Coolwarm. The Blue-Gray-Yellow colormap is linearly increasing in lightness and perceptually uniform, so its discernibility profile is much closer to that of perceptually uniform linear colormaps.

In summary, while Turbo does ameliorate many of the issues with Jet, neither Turbo nor any of the other rainbow colormaps evaluated here are colorblind-friendly, at least per the metric evaluated. It is likely that it is not possible to construct a rainbow colormap with such a property, unlike for linear, diverging, and cyclic colormaps. The Jupyter notebook used to evaluate the colormaps and produce the plots is available.


  1. It probably is possible to create a colorblind-friendly rainbow colormap for a particular type of color vision deficiency. However, creating such a colormap that simultaneously works for multiple types of color vision deficiencies as well as for normal color vision is what is likely impossible.  

  2. G. W. Meyer and D. P. Greenberg, “Color-defective vision and computer graphics displays,” in IEEE Computer Graphics and Applications, vol. 8, no. 5, pp. 28-40, Sept. 1988. doi:10.1109/38.7759  

  3. G. M. Machado, M. M. Oliveira, and L. A. F. Fernandes, “A Physiologically-based Model for Simulation of Color Vision Deficiency,” in IEEE Transactions on Visualization and Computer Graphics, vol. 15, no. 6, pp. 1291-1298, Nov.-Dec. 2009. doi:10.1109/TVCG.2009.113  

  4. When differences between adjacent colors are important, a perceptually uniform colormap should be used.  

  5. Luo M.R., Li C. (2013) CIECAM02 and Its Recent Developments. In: Fernandez-Maloigne C. (eds) Advanced Color Image Processing and Analysis. Springer, New York, NY. doi:10.1007/978-1-4419-6190-7_2  

  6. J. R. Nuñez, C. R. Anderton, and R. S. Renslow. “Optimizing colormaps with consideration for color vision deficiency to enable accurate interpretation of scientific data,” in PLoS ONE vol. 13, no. 7, pp. e0199239, Aug. 2018. doi:10.1371/journal.pone.0199239  

]]>
https://mpetroff.net/2019/08/discernibility-of-rainbow-colormaps/feed/ 0
Pannellum 2.5 https://mpetroff.net/2019/07/pannellum-2-5/ https://mpetroff.net/2019/07/pannellum-2-5/#comments Sun, 14 Jul 2019 01:58:28 +0000 https://mpetroff.net/?p=2962 Continue reading ]]> Pannellum 2.5 has now been released. As with Pannellum 2.4, this was a rather incremental release. The most noteworthy change is that equirectangular panoramas will now be automatically split into two textures if too big for a given device, which means images up to 8192 px across, covering all consumer panoramic cameras, now have widespread support. There has also been a significant improvement of the rendering quality on certain mobile devices (the fragment shaders now use highp precision), and support for partial panoramas has improved. Finally, there are an assortment of more minor improvements and bug fixes. See the changelog for full details. Pannellum also now has a Zenodo DOI (and a specific DOI for each new release).

]]>
https://mpetroff.net/2019/07/pannellum-2-5/feed/ 8