Cieran: Designing Sequential Colormaps via In-Situ Active Preference Learning

TL;DR

This work introduces Cieran, a tool that allows any data analyst to rapidly find quality colormaps while designing charts within Jupyter Notebooks, and employs an active preference learning paradigm to rank expert-designed colormaps and create new ones from pairwise comparisons.

Abstract

Quality colormaps can help communicate important data patterns. However, finding an aesthetically pleasing colormap that looks "just right" for a given scenario requires significant design and technical expertise. We introduce Cieran, a tool that allows any data analyst to rapidly find quality colormaps while designing charts within Jupyter Notebooks. Our system employs an active preference learning paradigm to rank expert-designed colormaps and create new ones from pairwise comparisons, allowing analysts who are novices in color design to tailor colormaps to their data context. We accomplish this by treating colormap design as a path planning problem through the CIELAB colorspace with a context-specific reward model. In an evaluation with twelve scientists, we found that Cieran effectively modeled user preferences to rank colormaps and leveraged this model to create new quality designs. Our work shows the potential of active preference learning for supporting efficient visualization design optimization.

Figures (10)

• Figure 1: Cieran allows analysts to quickly design a colormap for a visualization. Cieran creates a new colormap (left) and ranks existing expert-designed colormaps (the three sorted options to the right). After training Cieran, the user makes a selection using a slider widget, with the new and the most useful example colormaps sorted to the top. This gives users the final agency over the colormap design.
• Figure 2: Cieran is a path planning agent that helps rank and create sequential colormaps with a human in the loop. Cieran first constructs a graphical environment of possible colormap trajectories through a user-specified seed color based on expert demonstrations of colormaps (second subfigure). It then induces a model of aesthetic utility given a small number of pairwise comparison data (the third subfigure highlights the user's selection) collected through a Jupyter Widget, which adaptively and iteratively presents pairs of best candidate colormap examples applied to the user's target dataset. Using the learned utility model, Cieran will score all expert-designed colormaps (fourth subfigure), and create a new quality colormap via path planning (fifth subfigure).
• Figure 3: A visual explanation of the features and weights $\theta$ (Table \ref{['tab:params']}). $\{k_1, \dots, k_8\}$ describes the shortest distance from each of the perimeters in the $a^{*}$--$b^{*}$ plane to the colromap. $m$ is the slope of the colormap in the $L^{*}$--$C^{*}$ plane. These two colormaps represent two trajectories going through the same seed color #186E8D. The colormap on the left is recommended by Cieran when setting $\theta_1, \theta_2, \theta_3$ to $-0.5$, indicating a preference for a colormap that goes through greenish yellow tones. The colormap on the right is recommended when setting $\theta_2=0.5$, indicating a preference for a colormap that only miminizes distance to the green perimeter of the gamut, while also setting $\theta_{m}=-0.5$, indicating a preference for a colormap that is highly saturated at lower $L*$ values.
• Figure 4: Overview of the active learning-to-rank process (Algorithm \ref{['preference-learning']}). [Left] At each iteration, samples $W$ are first drawn from current $P_t(\theta)$ using Metropolis-Hastings. Next, these samples and the feature function $\Phi$ are used to acquire an informative query pair from the example colormap corpus (Eq. 6). [Middle] The user observes this query and makes a pairwise value judgment. [Right] User responses are used to update $P_t(\theta)$ using with the feature function $\Phi$ once again (Eqs. 1 through 5), and the iterative process continues.
• Figure 5: The three dataset stimuli used in our study. Participants designed colormaps for a discretely-binned 2D kernel density plot rendered in Seaborn Waskom2021. This plot was accompanied by black discrete histograms of the corresponding marginal distributions to the right (y distribution) and top (x distribution) of the heatmap.