Color-Name Aware Optimization to Enhance the Perception of Transparent Overlapped Charts

TL;DR

This work tackles the difficulty of interpreting translucent, overlapped charts by introducing Color-Name Aware (CNA) optimization, which automatically assigns colors, opacities, and rendering order to maximize perceptual coherence. The method formalizes three design targets—Within-class Association, Between-class Disassociation, and Color Separability—via an objective $E(P,A,O)=\omega_1 E_{WA}-\omega_2 E_{BD}+\omega_3 E_{CS}$ and is optimized with a customized simulated annealing process that enforces perceptual constraints. By leveraging color-name similarity and a region-aware mixing framework with a membership matrix, CNA improves distribution estimation and class discrimination in crowdsourced studies, outperforming standard alpha blending and visualization-specific baselines. The approach generalizes to other multi-class visuals such as parallel coordinates and Venn diagrams and is available as an open-source web tool, enabling practical adoption for transparent visualization design where color-blending artifacts previously hinder interpretation.

Abstract

Transparency is commonly utilized in visualizations to overlay color-coded histograms or sets, thereby facilitating the visual comparison of categorical data. However, these charts often suffer from significant overlap between objects, resulting in substantial color interactions. Existing color blending models struggle in these scenarios, frequently leading to ambiguous color mappings and the introduction of false colors. To address these challenges, we propose an automated approach for generating optimal color encodings to enhance the perception of translucent charts. Our method harnesses color nameability to maximize the association between composite colors and their respective class labels. We introduce a color-name aware (CNA) optimization framework that generates maximally coherent color assignments and transparency settings while ensuring perceptual discriminability for all segments in the visualization. We demonstrate the effectiveness of our technique through crowdsourced experiments with composite histograms, showing how our technique can significantly outperform both standard and visualization-specific color blending models. Furthermore, we illustrate how our approach can be generalized to other visualizations, including parallel coordinates and Venn diagrams. We provide an open-source implementation of our technique as a web-based tool.

Figures (15)

• Figure 1: Results of applying our approach (right-most) to optimize three overlapping histograms. (a) shows the input component distributions; (b, c, d) illustrates the results of applying three comparable benchmarks: standard alpha blending, local color blending wang2008color, and hue-preserving color blending chuang2009hue using base colors from the Tableau-10 palette and a uniform opacity of $\alpha=0.5$. By comparison, our approach (e), which embodies a color-name aware optimization, auto-generates optimal color, transparency and rendering order settings, ensuring discriminability for all segments while improving whole-from-parts perception. Our technique can also optimize other overlapped visualizations, including Venn diagrams (f vs. g).
• Figure 2: Preprocessing of the objective function. The input distributions are shown in (a). Rendering these three histograms (b) results in six regions $\{R_1, ..., R_6\}$, with some regions representing an intersection of two or more histograms. The binary membership matrix (c) lists the membership for each region, with $\mathbf{M}_{i,j}$ indicating whether region $i$ belongs to histogram (i.e., class) $j$. For example, the region $R_4$ belongs to the 1st class and 2nd class, which are classes A and B. The neighborhood graph (d) indicates region adjacency, with node size corresponding to the size of the region.
• Figure 3: The influence of different weight settings ($\omega_1$, $\omega_2$, $\omega_3$) on the final colorization results, showing the contribution of each of the three objective-function terms individually. (a) illustrates the effects of optimizing within-class association only (1, 0, 0). (b) shows between-class discrimination only (0, 1, 0). (c) illustrates the effect of maximizing color separability (0, 0, 1). (d) illustrates the final result with all three terms equally weighted (1, 1, 1). The legend also depicts the optimized rendering order (from top to bottom). The input distributions are the same as those shown in \ref{['fig:structure']}-a.
• Figure 4: Different initializations (left) and the corresponding optimization results (right). The plots of E(P,A,O) versus the number of iterations illustrate the convergence of the proposed method (middle).
• Figure 5: Illustration for the three tasks used in our experiments: (a) distribution estimation, (b) class discrimination, and (c) user preference. The correct answer for the distribution estimation task is option B, while the correct number of classes in the discrimination task is three classes.