Design System — Graphiques

les graphiques

Système propre Réagencer — il se pose les mêmes questions qu'un guide data-viz sérieux (anatomie, ordres de couleurs par type, alternatives haut contraste, light-to-dark chronologique, double échelle) et y répond avec notre ADN : vert signal, encre, papier. Calculs en D3.js (échelles, axes, empilement, lignes).

← Design system

Ordres de couleurs

Standard — barres / colonnes / lignes

1

2

3

4

5

6

Haut contraste — séries denses

1

2

3

4

5

6

Séquentiel (mint) — chronologique, light-to-dark

1

2

3

4

5

6

Double échelle — une famille par axe

Axe 1

Axe 2

Barres / colonnes

Délégation aux agents

Tâches déléguées à un agent, par fonction

%

0102030405060RecrutementRéunionReportingSupport

Source : Exemple illustratif

Montée en charge

Côte à côte — progression par année

202420252026
010203040506070RecrutementRéunionReportingSupport

Override chronologique

Catégories chronologiques → rampe light-to-dark (mint)

202420252026
010203040506070RecrutementRéunionReportingSupport

Lignes

Recomposition du travail

Part du temps, % — ordre standard

ExécutionCoordinationDécisionApprentissage
020406080'19'20'21'22'23'24'25'26

Source : Exemple illustratif

Alternative haut contraste

Mêmes données — quand l'ordre standard ne sépare pas assez

ExécutionCoordinationDécisionApprentissage
020406080'19'20'21'22'23'24'25'26

Aires empilées

Composition du temps de travail

Part du temps, % — empilé (bas → haut)

%

ExécutionCoordinationDécisionApprentissage
020406080100'19'20'21'22'23'24'25'26

Source : Exemple illustratif

Double échelle

Effet ciseaux

Automatisation vs heures facturables — deux échelles

Tâches automatisées, %Heures facturables, indice
0102030405060020406080100'19'20'21'22'23'24'25'26

Réagencer — graphiques

← Design system