Outils pour utilisateurs

Outils du site


public:specs_graphics_colors

Stratégie des couleurs de résultats graphiques

Objectif

Proposer les gammes de couleur pour les graphiques de TXM avec un maximum de contrastes chromatiques.

Méthode

Description de la méthode de travail pour atteindre l'objectif

Mail SLH du 27/08/2010
J'ai choisi 16 couleurs en tout.
Je les ai regroupées en 3 paquets de
trois tailles différentes (16, 10 et 5).
Quand on a à afficher n courbes, il
faut utiliser le paquet de m couleurs
le plus proche (m >= n) de n.
Quand n < m, il faut utiliser les
couleurs du paquet dans leur ordre
d'apparition.
Donc en gros, on affiche bleu <del>rouge</del>, puis rouge
<del>bleu</del>, vert, jaune, rose, puis on boucle
sur ces couleurs avec des tons différents.
L'idée des paquets est de toujours avoir
le maximum de contrastes chromatiques
pour n courbes à afficher. 

État de la plateforme

Avancement dans l'élaboration de la solution

Solution

État de l'art

Liste actuelle des couleurs avec le code couleur pour R. Cette liste est actuellement définie et utilisée par la commande Repartition (package org.txm.functions.repartition) et pour dessiner les graphiques de spécificités (barres et courbes) (Voir aussi: https://web.archive.org/web/20121022044903/http://research.stowers-institute.org/efg/R/Color/Chart/)

La liste :

  1. jeu de 16 couleurs :
                                                                                                                                                                                   
    • 26 bleu (#0000FF 0 0 255)
    • 552 rouge vif (#FF0000 255 0 0)
    • 258 vert foncé (#008B00 0 139 0)
    • 142 jaune (#FFD700 255 215 0)
    • 117 rose fusia (#FF1493 255 20 147)
    • 133 rouge foncé (#B22222 178 34 34)
    • 491 bleu foncé (#000080 0 0 128)
    • 257 vert clair (#00CD00 0 205 0)
    • 76 jaune ocre (#FFB90F 255 185 15)
    • 451 violet fluo (#FF00FF 255 0 255)
    • 121 bleu clair (#00BFFF 0 191 255)
    • 254 vert très clair (#00FF00 0 255 0)
    • 652 jaune fluo (#FFFF00 255 255 0)
    • 68 bleu fluo (#00FFFF 0 255 255)
    • 259 vert fluo (#ADFF2F 173 255 47)
    • 575 vert-bleu fluo (#54FF9F 84 255 159)
  2. jeu de 10 couleurs :
                                                                                                                 
    • 26 bleu (#0000FF 0 0 255)
    • 552 rouge vif (#FF0000 255 0 0)
    • 258 vert foncé (#008B00 0 139 0)
    • 142 jaune (#FFD700 255 215 0)
    • 117 rose fusia (#FF1493 255 20 147)
    • 133 rouge foncé (#B22222 178 34 34)
    • 121 bleu clair (#00BFFF 0 191 255)
    • 259 vert fluo (#ADFF2F 173 255 47)
    • 76 jaune ocre (#FFB90F 255 185 15)
    • 451 violet fluo (#FF00FF 255 0 255)
  3. jeu de moins de 10 couleurs : on utilise les premières couleurs de la palette 10

Prototypes

Prototype #1

[TXM 0.7.9, SJ]

Les palettes de couleurs ont été extraites de la couche R et transférées dans la couche abstraite de Charts engine (org.txm.chartsengine.core).

Elles sont hard-coded dans : /org.txm.chartsengine.core/src/org/txm/chartsengine/core/Theme.java (thème par défaut) et maintenant partagées entre les implémentations JFreeChart et R.

La seule item qui n'est pas hard-coded est la couleur de rendu monochrome (lorsque le mode de rendu de l'un des charts engine est fixé à monochrome). Cette couleur est définie par la préférence “charts_engine_monochrome_color” sour la forme “r,g,b”, ex.: “255,0,0” et modifiable dans la page de préférences du charts engine.

La définition des palettes est la suivante :

		this.setMonochromeColor(TXMPreferences.getString(ChartsEnginePreferences.PREFERENCES_NODE, ChartsEnginePreferences.MONOCHROME_COLOR));
		
		this.palette1 = new ArrayList<Color>(1);
		this.palette5 = new ArrayList<Color>(5);
		this.palette10 = new ArrayList<Color>(10);
		this.palette16 = new ArrayList<Color>(16);
		
		// palette 1
		this.palette1.add(Color.decode("#2F7ED8")); // Blue

		// palette 5
		this.palette5.add(new Color(255, 0, 0));
		this.palette5.add(new Color(0, 0, 255));
		this.palette5.add(new Color(0, 139, 0));
		this.palette5.add(new Color(255, 215, 0));
		this.palette5.add(new Color(255, 20, 147));
		
		// palette 10
		this.palette10.add(new Color(255, 0, 0));
		this.palette10.add(new Color(0, 0, 255));
		this.palette10.add(new Color(0, 139, 0));
		this.palette10.add(new Color(255, 215, 0));
		this.palette10.add(new Color(255, 20, 147));
		this.palette10.add(new Color(178, 34, 34));
		this.palette10.add(new Color(0, 191, 255));
		this.palette10.add(new Color(173, 255, 47));
		this.palette10.add(new Color(255, 185, 15));
		this.palette10.add(new Color(255, 0, 255));
		
		// palette 16
		this.palette16.add(new Color(255, 0, 0));
		this.palette16.add(new Color(0, 0, 255));
		this.palette16.add(new Color(0, 205, 0));
		this.palette16.add(new Color(255, 215, 0));
		this.palette16.add(new Color(255, 20, 147));
		this.palette16.add(new Color(178, 34, 34));
		this.palette16.add(new Color(0, 0, 128));
		this.palette16.add(new Color(0, 139, 0));
		this.palette16.add(new Color(255, 185, 15));
		this.palette16.add(new Color(255, 0, 255));
		this.palette16.add(new Color(0, 191, 255));
		this.palette16.add(new Color(0, 255, 0));
		this.palette16.add(new Color(255, 255, 0));
		this.palette16.add(new Color(0, 255, 255));
		this.palette16.add(new Color(173, 255, 47));
		this.palette16.add(new Color(84, 255, 159));

Une palette1 a été créée pour les graphes de type Partition Dimensions, eigenvalues ou tout autre graphique ayant une seule series.

Ces palettes sont accessibles ou éditables en Groovy via le point d'entrée du thème courant du moteur courant :

Theme theme = ChartsEngine.getCurrent().getTheme();

System.out.println(theme.getPalette5());
System.out.println(theme.getPalette1());

ArrayList<Color> palette5 = new ArrayList<Color>(5);
palette5.add(new Color(125, 16, 0));
palette5.add(new Color(26, 0, 255));
palette5.add(new Color(29, 13, 0));
palette5.add(new Color(25, 25, 0));
palette5.add(new Color(215, 0, 17));
theme.setPalette5(palette5)

La composante alpha n'est pas gérée à l'heure actuelle, il faut définir si cela peut être utile, après réflexion je dirais que oui.

Si un graphique contient plus de 16 items, la palette retournée est basée sur la palette 16 et remplie cycliquement en utilisant la méthode Color.brighter(), algo/code :

    // fill to match items count with brighter colors based on same palette
		if(itemsCount > 16)	{
		    for(int j = 0, k = 16; k < itemsCount; k++, j++) {
		    	if(j == 16)	{
		    		j = 0;
		    	}
		    	palette.add(this.palette16.get(j).brighter()); //$NON-NLS-1$
			}
		}

[Ajout SJ: 2021/07/12, TXM 0.7.9, 0.8.0, 0.8.1, 0.8.2alpha]

Un effet de bord potentiellement indésirable de l'implémentation est visible sur le graphique de Progression. Le nombre d'items étant modifiable dynamiquement, la palette utilisée n'est pas la même en fonction de l'ajout et de la suppression de requête. Ex. 1 requête, la palette1 est utilisée, si l'on ajoute une 2e requête, la palette5 est utilisée, changeant la couleur de l'item/courbe n° 1. Même phénomène lorsque l'on arrive à 11 requêtes.

Prototype #2

SJ : les spécifications ci-dessus ont été modifiées le 12/07/2021 (TXM 0.8.2alpha) et n'ont pas encore été implémentées. Voir ticket : http://forge.cbp.ens-lyon.fr/redmine/issues/3131

Version finale

Recette

Protocole de test

Alpha

Beta

État courant

Qui Quand Quoi

public/specs_graphics_colors.txt · Dernière modification : 12/07/2021 18:08 de sebastien.jacquot@univ-fcomte.fr