Graphiques

Les graphiques permettent de représenter de manière visuelle et condensée un ensemble d'informations. Ces informations sont traditionnellement numériques majoritairement.

Cette spécification vise à la définition d'une définition simple permettant de définir différents types de graphique indépendamment du moteur de rendu utilisé.

Théorie

Les graphiques permettent d'afficher plusieurs types de données :

  • Mesure (valeur unique souvent attendue dans un intervalle donné)
  • Matrice à 2 dimensions
  • Matrice à n dimensions
  • Arbre
  • Graphe

Les matrices à 2 dimensions sont les plus utilisées.

Types de représentation

Chaque types de données permet différentes types de représentations :

  • Valeur (value) : Une valeur affichée de manière absolue. Exemple : Compteur numérique
  • Niveau (level) : Une valeur affichée entre un minimum et un maximum. Exemple : Jauge, Compteur analogique
  • Répartition (distribution) : Zones dont la superficie est proportionnelle à la valeur relativement à l'ensemble. Exemples : Jauge multi-valeurs, Camembert/Donut, Diagramme polaire, Histogramme empilé, Carte choroplèthe
  • Catégorie (category) : Valeurs regroupées par nom. Exemples : Histogramme, Radar…
  • Cartésien (cartesian) : Une abscisse temporelle ou numérique, une ou plusieurs ordonnées avec les valeurs des séries placées en fonction. Exemples : Ligne, Marche, Spline… (empilé ou non)
  • Répartition arborescente (tree-distribution) : Zones dont la superficie est proportionnelle à la valeur relativement à l'ensemble ainsi qu'à leur voisins. Exemples : Treemap, Camemberts à n niveaux
Type de représentation Représentation C3 Chart Dygraphs
value text
level gauge
level meter Compteur à aiguille
distribution pie
distribution donut
distribution polar
distribution bar
distribution choropleth
category histogram
category radar
category xline
category xspline
cartesian line ✔ (time)
cartesian spline ✔ (time)
cartesian step ✔ (time)
cartesian points Nuage de points
tree-distribution treemap
tree-distribution nested-pie ?

Chaque type de représentation attend un type de données :

  • value : 1 série à valeur unique
  • level : 1 série à valeur numérique unique, comportant un minimum et un maximum
  • distribution : 1 série à n structures (avec libellé et valeur)
  • category : 1 série à n valeurs (catégories) et 1 série ou plus à n valeurs numériques
  • cartesian : ≥ 1 série à n coordonnées cartésiennes (les valeurs pour les abscisses et ordonnées sont obligatoirement numériques ou temporelles)
  • tree-distribution : 1 série arborescente à n valeurs

Séries

Les données sont organisées en séries. Une série est nommée identifiable et comporte un jeu de données normées en fonction de son type.

Dans le cas d'une matrice, les séries forment ensemble le tableau à 2 dimensions.

Exemples des types de séries sous format YAML

---
series:
  measure:
    first:  154
    second: 12.35
    third:  "2015-08-02"
    fourth: "2015-08-02T12:12:12"
    fifth:  "Hello world!"
    sixth:  <Geometry>
  matrix:
    first: [12, 578, 584, 5458, 78, 454, 56]
    fourth: ["2015-08-02T12:12:12", "2015-08-03T12:12:12", "2015-08-04T12:12:12", "2015-08-05T12:12:12"]
    fifth: ["Hello", "World", "Some", "Other", "Text"]

Types de données

Les types de données utilisées sont :

  • String Texte
  • Numeric Numérique
  • Date Date
  • Datetime Date & Heure
  • Geometry Géométrie spatiale

Légende

Chaque graphe comporte de manière optionnelle une légende

API

L'API permet de définir de manière interopérable comment afficher quelles données.

Exemple “cartésien” en YAML:

---
chart:
  type: cartesian             # Ou line, spline, step, points
  series:
    minimal_temperature:
      values: [ ... ]
      unit: celsius
      type: spline            # Ou spline, step, step-start, step-end
    maximal_temperature:
      values: [ ... ]
      unit: celsius
    wind_speed:
      values: [ ... ]
      unit: kilometer_per_hour
    read_at:
      type: datetime
      label: "Relevé à"
      abscissa: true
      values: [ ... ]

Exemple “catégorie” en YAML:

---
chart:
  type: histogram
  series:
    minimal_temperature:
      values: [ ... ]
      unit: celsius
    maximal_temperature:
      values: [ ... ]
      unit: celsius
    average_wind_speed:
      values: [ ... ]
      unit: kilometer_per_hour
      type: xline
    month:
      abscissa: true
      type: string
      values: [ ... ]
  ordinates:
    temperature:  
      label: "Température"
      series: [minimal_temperature, maximal_temperature]

type

Peut être un type de représentation ou une représentation (Voir la théorie pour la liste complète). Si une type de représentation est spécifié comme distribution, la première représentation sera utilisée pour afficher, c'est à dire histogram dans ce cas-là.

series

Value

  series:
    amount:
      label: "Montant"
      value: 125.25

Level

  series:
    progress:
      label: "Avancement"
      value: 95
      min: 0
      max: 100

Distribution

  series:
    languages:
      label: "Langues"
      values: [["Chinese", 100000023], ["English", 122285645], ["German", 88454540], ["Tamaziɣt", 5454540000], ["Portuguese", 454548546645]]

Ou

  series:
    languages:
      label: "Langues"
      values: 
      - label: "Chinese"
        value: 100000023
      - label: "English"
        value: 122285645
      - label: "German"
        value: 88454540
      - label: "Tamaziɣt"
        value: 5454540000
      - label: "Portuguese"
        value: 454548546645

Category

  series:
    languages:
      label: "Langues"
      values: [ ... ]
      category: true
    speakers_count:
      label: "Nombre de locuteurs"
      values: [ ... ]
    countries_count:
      label: "Nombre de pays"
      values: [ ... ]

Cartesian

  series:
    languages:
      label: "Recensement"
      values: [ ... ]
      type: time
      abscissa: true
    speakers_count:
      label: "Nombre de locuteurs"
      values: [ ... ]
    countries_count:
      label: "Nombre de pays"
      values: [ ... ]

Tree-distribution

  tree-distribution : 1 série arborescente à n valeurs

legend