DSFR Charts

Cette page a pour objectif de présenter l'ensemble des représentations graphiques proposées par la librairie DSFR Charts.
Tous les graphiques proposés sont disponibles dans le thème clair et dans le thème sombre. Il est possible de changer le thème affiché par l'intermédiaire du bouton en bas à droite.

I. Nuage de points

Le nuage de points est largement utilisée pour présenter plusieurs séries de données. C’est une représentation graphique qui est particulièrement utile lorsque les valeurs des données sur l'axe Y dépendent des valeurs d’un autre axe X.

1. Nuage de points simple

                      <div class="part_container">
                      <scatter-chart x='[[1, 5, 8], [1, 2, 15]]'y='[[30, 10, 20], [10, 20, 30]]
                      showline=true'></scatter-chart>
                      </div>

2. Nuage de points reliés

<div class="part_container">
<scatter-chart x='[[1, 5, 8], [1, 2, 15]]'y='[[30, 10, 20], [10, 20, 30]]
showline=true'></scatter-chart>
</div>

II. Graphique en ligne

Un graphique en ligne est un type de visualisation de données qui affiche les valeurs sous forme de points sur une ligne. Elle permet d’affiche une seule ligne ou en présenter plusieurs pour permettre la comparaison.

1. Graphique en ligne simple

<div class="part_container">
<line-chart x='[1, 2, 3, 4]'y='[10, 20, 30,40]'></line-chart>
</div>

2. Graphique en lignes multiples

<div class="part_container">
<multiline-chart x='[[1, 2, 3], [1, 2, 3]]'y='[[30, 10, 20], [10, 20, 30]]'>
</multiline-chart>
</div>

III. Diagramme en barres

Un diagramme en barres montre les dénombrements de valeurs pour les niveaux d'une variable catégorielle ou nominale. Les barres peuvent être présentées de manière horizontale, verticale ou être empilées.

1. Barres verticales

<div class="part_container">
<bar-chart x='[["4", "2", "3", "5"], ["4", "2", "3", "5"], ["4", "2", "3",
"5"]]'y='[[40, 50, 10, 5], [10, 20, 30, 12], [12, 12, 20, 23]]'></bar-chart>
</div>

2. Barres horizontales

<div class="part_container">
<bar-chart x='[["4", "2", "3", "5"], ["4", "2", "3", "5"], ["4", "2", "3",
"5"]]'y='[[40, 50, 10, 5], [10, 20, 30, 12], [12, 12, 20, 23]]' 
horizontal=true></bar-chart>
</div>

3. Barres empilées

<div class="part_container">
<bar-chart x='[["4", "2", "3", "5"], ["4", "2", "3", "5"], ["4", "2", "3",
"5"]]'y='[[40, 50, 10, 5], [10, 20, 30, 12], [12, 12, 20, 23]]' 
stacked=true></bar-chart>
</div>

IV. Graphique en ligne / Diagramme en barres

Il est également possible de combiner un graphique en ligne et un diagramme en barres, pour permettre la comparaison entre des données présentées différemment.

                    <div class="part_container">
                    <bar-line-chart x='[1, 2, 3]'y='[30, 10, 20]'ybar='[20, 15, 12]'>
                    </bar-line-chart>
                    </div>

V. Options de lignes verticales et horizontales

Sur tous les graphiques présentés ci-dessus (nuage de points, graphique en lignes, diagramme en barres) il est possible d'ajouter des lignes verticales et horizontales pour faciliter la lecture ou faire ressortir certains enseignements apportés par le graphique.

                    <div class="part_container">
                      <line-chart x='[1, 2, 3]'y='[10, 20, 30]'
                      hline='[15, 25]'
                      hlinename='["hmin", "hmax"]'
                      vline='[1.6, 2.3]'
                      vlinename='["vmin","vmax"]'
                      vlinecolor='["green-archipel", "orange-terre-battue"]'
                      hlinecolor='["blue-ecume", "red-marianne"]'></line-chart>
                      </div>

VI. Diagramme circulaire

Un diagramme circulaire permet de représenter un petit nombre de valeurs par des angles proportionnels à la fréquence de ces valeurs. Chacune des « parts » représente une catégorie de données qui forment un ensemble, et la taille de chaque « part » est proportionnelle à son poids dans l'ensemble. Le diagramme circulaire peut être plein ou creux.

1. Diagramme circulaire plein

                    <div class="part_container">
                      <pie-chart x='[1, 2, 3]'y='[10, 20, 30]'fill=true>
                      </pie-chart>
                      </div>

2. Diagramme circulaire creux (donut)

                    
                      <div class="part_container">
                      <pie-chart x='[1, 2, 3]'y='[10, 20, 30]'>
                      </pie-chart>
                      </div>

VII. Diagramme en étoile

Le diagramme en étoile ou radar chart a été conçu pour représenter une ou plusieurs séries de valeurs sur plusieurs variables quantitatives.

                    <div class="part_container">
                      <radar-chart
                      x='[["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                      ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                      ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"]]'
                      y='[[65, 59, 90, 81, 56, 55, 40], 
                      [28, 48, 40, 19, 96, 27, 100],
                      [12, 12, 20, 23, 13, 14, 15]]'
                      </radar-chart>
                    </div>

VIII. Jauge

La jauge permet d'afficher des valeurs numériques ou des mesures dans une plage, pour visualiser l'avancement d'un objectif par exemple.

                    
                      <div class="part_container">
                      <gauge-chart value=16 init=10 target=20 color="blue-france"></gauge-chart>
                      </div>

IX. Cartes

Les cartes permettent d’afficher une série de données réparties par département ou région. Les cartes sont actuellement disponibles aux niveaux départemental et régional, et il est également possible d’isoler une région pour en afficher les départements.

1. Découpage départemental

                    <div class="part_container">
                      <map-chart data="{"01": 72, "02": 83, "03": 67, "04": 36, "05": 47, 
                        "06": 96, "07": 77, "08": 75, "09": 57, "10": 58, "11": 38,
                        "12": 33, "13": 89, "14": 24, "15": 52, "16": 41,
                        "17": 79, "18": 38, "19": 42, "21": 25, "22": 26,
                        "23": 37, "24": 65, "25": 88, "26": 48, "27": 61, "28": 80, "29": 12, 
                        "30": 6, "31": 5, "32": 22, "33": 40,"34": 19, "35": 13, "36": 32, 
                        "37": 0, "38": 82, "39": 13, "40": 78, "41": 92, "42": 10, 
                        "43": 22, "44": 70,"45": 85, "46": 58, "47": 72, "48": 61,
                        "49": 27, "50": 47, "51": 41, "52": 44, "53": 29, "54": 22,
                        "55": 4,"56": 57, "57": 94, "58": 46, "59": 33, "60": 0, 
                        "61": 15, "62": 60, "63": 71, "64": 0, "65": 91, "66": 51,
                        "67": 56, "68": 19, "69": 44, "70": 92, "71": 96, "72": 51,
                        "73": 32, "74": 19, "75": 96, "76": 91, "77": 21,
                        "78": 48, "79": 72, "80": 52, "81": 48, "82": 57, "83": 38,
                        "84": 23, "85": 46, "86": 37, "87": 64, "88": 78,
                        "89": 100, "90": 85, "91": 87, "92": 46, "93": 89, "94": 18, 
                        "95": 72, "971": 48, "972": 28, "973": 35,
                        "974": 70, "976": 38, "2A": 63, "2B": "16"}"valuenat=10
                      name="Nom de l'indicateur">
                      </map-chart>
                    </div>

2. Découpage régional

                    <div class="part_container">
                      <map-chart data='{"84": 1, "32": 10, "93": 20, "44": 30, "76": 40,
                       "28": 50, "75": 60, "24": 70,"53": 80, 
                       "94": 90, "52": 100, "01": 95, "02": 85,
                        "03": 75, "04": 65, "06": "55", "27": 100, "11": 35}'valuenat=10
                      name="Nom de l'indicateur"level="reg">
                      </map-chart>
                      </div>

3. Régions

                    
                      <div class="part_container">
                      <map-chart-reg data='{"01": 72, "02": 83, "03": 67, "04": 36, "05": 47,
                        "06": 96, "07": 77,"08": 75, "09": 57, "10": 58, "11": 38,
                        "12": 33, "13": 89, "14": 24, "15": 52, "16": 41,
                        "17": 79, "18": 38, "19": 42, "21": 25, "22": 26,
                        "23": 37, "24": 65, "25": 88, "26": 48, "27": 61, 
                        "28": 80, "29": 12, "30": 6, "31": 5, "32": 22, "33": 40,
                        "34": 19, "35": 13, "36": 32, "37": 0, "38": 82,
                        "39": 13, "40": 78, "41": 92, "42": 10, "43": 22, "44": 70,
                        "45": 85, "46": 58, "47": 72, "48": 61, "49": 27,
                        "50": 47, "51": 41, "52": 44, "53": 29, "54": 22, "55": 4,
                        "56": 57, "57": 94, "58": 46, "59": 33, "60": 0,
                        "61": 15, "62": 60, "63": 71, "64": 0, "65": 91, "66": 51,
                        "67": 56, "68": 19, "69": 44, "70": 92, "71": 96,
                        "72": 51, "73": 32, "74": 19, "75": 96, "76": 91, "77": 21,
                        "78": 48, "79": 72, "80": 52, "81": 48, "82": 57, 
                        "83": 38, "84": 23, "85": 46, "86": 37, "87": 64, "88": 78,
                        "89": 100, "90": 85, "91": 87, "92": 46, "93": 89,
                        "94": 18, "95": 72, "971": 48, "972": 28, "973": 35,
                        "974": 70, "976": 38, "2A": 63, "2B": "16"}'valuenat=10
                    name="Nom de l'indicateur"region='93'>
                    </map-chart-reg>
                    </div>

X. Les couleurs

Les couleurs utilisables sont restreintes aux couleurs illustratives du DSFR. Ces couleurs ont des valeurs différentes selon si la page est affichée en thème clair ou en thème sombre. Voici la liste des couleurs disponibles avec leurs deux teintes :

green-bourgeon

blue-ecume

purple-glycine

pink-macaron

yellow-tournesol

orange-terre-battue

brown-cafe-creme

beige-gris-galet

green-emeraude

blue-cumulus

pink-tuile

yellow-moutarde

brown-caramel

green-menthe

brown-opera

green-archipel

green-tilleul-verveine

XI. Accessibilité

Pour permettre d'offrir une alternative à la visualisation des données et ainsi s'adapter tous les publics, il est possible d’accompagner les graphiques d’une présentation des résultats sous la forme de tableaux.

<div class="part_container">
<table-chart 
x='[["A","B","C","D","E","F","G","H","I","J"],
["A","B","C","D","E","F","G","H","I","J"]]'
y='[[40, 50,40,39,49,40, 50,40,39,49],
[30, 150,340,379,439,40, 50,40,39,49],
[30, 150,340,379,439,40, 50,40,39,49],
[30, 150,340,379,439,40, 50,40,39,49],
[30, 150,340,379,439,40, 50,40,39,49],
[30, 150,340,379,439,40, 50,40,39,49],
[30, 150,340,379,439,40, 50,40,39,49],
[30, 150,340,379,439,40, 50,40,39,49]]'
varname='Jours'></table-chart>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.