visual-lab

chart-02-isotype

Isotype à taux de remplissage

Raconter une proportion en unités comptables (24 pictogrammes sur 40) au lieu d'un pourcentage abstrait.

chartslideweb349×146pxaucun benchmark

Télécharger le .zip

Le fragment RÉEL, dans son propre document, sur le sol de sa charte — pas une image. Ce que vous voyez est exactement ce que vous collerez.

Employer quand

Une part qui porte sur des ÊTRES ou des OBJETS dénombrables — clients, sièges, sites, jours. Le lecteur voit la quantité avant de lire le chiffre.

Éviter quand

La grandeur est continue (chiffre d'affaires, température, durée) : il n'y a rien à compter. Et au-delà d'environ 60 pictogrammes plus personne ne compte — passer à une barre.

Notes

La part remplie est portée par la classe is-on DANS LE HTML, pas par un :nth-child en CSS : changer la proportion ne doit pas obliger à éditer la feuille de style. Le pictogramme est dessiné en CSS (::before tête, ::after buste) — ni image, ni police d'icônes, donc net à toute taille et colorable par currentColor. Le total doit rester un nombre rond et lisible en grille (40 = 10×4, pas 37). Accessibilité : role=img et un aria-label qui donne la proportion en toutes lettres.

Mots-clés

graphiqueisotypepictogrammeproportionpourcentagedatavizcomptagepart

Le code

fragment — patterns/chart-02-isotype.html Télécharger
<!-- chart-02-isotype — fragment autonome. Couleurs via --vl-* uniquement. -->
<div style="padding:28px;border-radius:var(--vl-radius-sub);
     background:var(--vl-surface-dark);color:var(--vl-ink-invert);display:inline-flex;
     align-items:flex-end;gap:34px">
  <div>
    <div class="vl-iso__figure">4k</div>
    <div class="vl-iso__label">Clients to date</div>
  </div>
  <div class="vl-iso" role="img" aria-label="24 pictogrammes sur 40 remplis, soit 60 %">
    <i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i>
    <i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i>
    <i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i class="is-on"></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
</div>

<style>
.vl-iso__figure { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.vl-iso__label { margin-top: 8px; font-size: 11px; color: var(--vl-ink-invert-muted); }

/* Une proportion racontée en UNITÉS COMPTABLES : on voit 24 sur 40 avant de lire « 60 % ».
   C'est ce qu'un camembert ne sait pas faire. Au-delà de ~60 pictogrammes on ne compte plus
   rien : passer alors à une barre. */
.vl-iso { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px 5px; width: 195px; }
/* Le pictogramme est dessiné en CSS (tête + buste), sans image ni police d'icônes :
   il hérite de currentColor et reste net à n'importe quelle taille. */
.vl-iso i { position: relative; display: block; width: 13px; height: 18px; color: var(--vl-surface-light); }
.vl-iso i::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 6.5px; height: 6.5px; border-radius: 50%; background: currentColor;
}
.vl-iso i::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 13px; height: 9.5px;
  border-radius: 6px 6px 3px 3px; background: currentColor;
}
/* La part remplie est portée par une CLASSE dans le HTML, pas par un nth-child :
   changer la proportion ne doit pas obliger à éditer la feuille de style. */
.vl-iso i.is-on { color: var(--vl-accent-2); }
</style>
tokens de la charte — systems/ref-03-bento-dark-pitch.json Télécharger
:root {
  --vl-bg: #2E2E2E;
  --vl-board: #2E2E2E;
  --vl-surface-light: #FFFFFF;
  --vl-surface-dark: #111111;
  --vl-surface-tile: #3A3A3A;
  --vl-accent: #CFE3F5;
  --vl-accent-2: #8FBBE4;
  --vl-accent-3: #5E9BD6;
  --vl-ink: #111111;
  --vl-ink-muted: #6B6B6B;
  --vl-ink-invert: #FFFFFF;
  --vl-ink-invert-muted: #A0A0A0;
  --vl-hairline: #D5D5D5;
  --vl-hairline-invert: #4A4A4A;
  --vl-radius-card: 24px;
  --vl-radius-sub: 20px;
  --vl-radius-tile: 16px;
  --vl-gap: 12px;
}
les métadonnées — patterns/chart-02-isotype.json (télécharger) 
{
  "name": "Isotype à taux de remplissage",
  "family": "chart",
  "ref": "ref-03-bento-dark-pitch",
  "intent": "Raconter une proportion en unités comptables (24 pictogrammes sur 40) au lieu d'un pourcentage abstrait.",
  "when_to_use": "Une part qui porte sur des ÊTRES ou des OBJETS dénombrables — clients, sièges, sites, jours. Le lecteur voit la quantité avant de lire le chiffre.",
  "avoid_when": "La grandeur est continue (chiffre d'affaires, température, durée) : il n'y a rien à compter. Et au-delà d'environ 60 pictogrammes plus personne ne compte — passer à une barre.",
  "tags": [
    "graphique",
    "isotype",
    "pictogramme",
    "proportion",
    "pourcentage",
    "dataviz",
    "comptage",
    "part"
  ],
  "vars": [
    {
      "name": "--vl-accent-2",
      "role": "couleur de la part remplie",
      "default": "#8FBBE4"
    },
    {
      "name": "--vl-surface-light",
      "role": "couleur de la part vide",
      "default": "#FFFFFF"
    }
  ],
  "slots": [
    "figure",
    "label",
    "grid"
  ],
  "notes": "La part remplie est portée par la classe is-on DANS LE HTML, pas par un :nth-child en CSS : changer la proportion ne doit pas obliger à éditer la feuille de style. Le pictogramme est dessiné en CSS (::before tête, ::after buste) — ni image, ni police d'icônes, donc net à toute taille et colorable par currentColor. Le total doit rester un nombre rond et lisible en grille (40 = 10×4, pas 37). Accessibilité : role=img et un aria-label qui donne la proportion en toutes lettres.",
  "id": "chart-02-isotype"
}

À côté