Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

fr:specs:charts [2016/08/26 21:06] (Version actuelle)
Ligne 1: Ligne 1:
 +====== 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é, [[https://​fr.wikipedia.org/​wiki/​Carte_choropl%C3%A8the|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
 +<code 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"​]
 +</​code>​
 +
 +=== 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:
 +<code 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: [ ... ]
 +</​code>​
 +
 +Exemple "​catégorie"​ en YAML:
 +<code 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]
 +</​code>​
 +==== 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 ===
 +<code yaml>
 +  series:
 +    amount:
 +      label: "​Montant"​
 +      value: 125.25
 +</​code>​
 +
 +=== Level ===
 +<code yaml>
 +  series:
 +    progress:
 +      label: "​Avancement"​
 +      value: 95
 +      min: 0
 +      max: 100
 +</​code>​
 +
 +=== Distribution ===
 +<code yaml>
 +  series:
 +    languages:
 +      label: "​Langues"​
 +      values: [["​Chinese",​ 100000023], ["​English",​ 122285645], ["​German",​ 88454540], ["​Tamaziɣt",​ 5454540000],​ ["​Portuguese",​ 454548546645]]
 +</​code>​
 +
 +Ou
 +
 +<code yaml>
 +  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
 +</​code>​
 +
 +
 +=== Category ===
 +<code yaml>
 +  series:
 +    languages:
 +      label: "​Langues"​
 +      values: [ ... ]
 +      category: true
 +    speakers_count:​
 +      label: "​Nombre de locuteurs"​
 +      values: [ ... ]
 +    countries_count:​
 +      label: "​Nombre de pays"
 +      values: [ ... ]
 +</​code>​
 +=== Cartesian ===
 +<code yaml>
 +  series:
 +    languages:
 +      label: "​Recensement"​
 +      values: [ ... ]
 +      type: time
 +      abscissa: true
 +    speakers_count:​
 +      label: "​Nombre de locuteurs"​
 +      values: [ ... ]
 +    countries_count:​
 +      label: "​Nombre de pays"
 +      values: [ ... ]
 +</​code>​
 +=== Tree-distribution ===
 +    tree-distribution : 1 série arborescente à n valeurs
 +
 +==== legend ====
 +
 +
 +
 +
 +
 +