Si vous débutez avec JavaScript, sachez que c'est un excellent langage de programmation pour visualiser des données. La visualisation de données est aujourd'hui une compétence extrêmement pertinente, car nous sommes à l'ère du Big Data. Les outils de visualisation sont essentiels pour donner du sens à toutes ces données et en extraire des enseignements.
Voici donc un résumé de base sur la création de graphiques avec JavaScript.
Ce dont vous aurez besoin pour créer des graphiques avec JavaScript
Navigateur Internet
La première chose dont vous aurez besoin pour mettre en œuvre n'importe laquelle des centaines de Solutions JavaScript pour les diagrammes est un navigateur Internet. Chrome ou Firefox conviennent tous deux pour cet exercice.
Éditeur de texte
Vous aurez aussi besoin d'un éditeur de texte. Notepad fera l'affaire, mais l'idéal serait d'opter pour un éditeur de code avancé comme VS Code. Il vous offrira une expérience utilisateur plus confortable qui facilitera l'écriture de HTML5, CSS, JavaScript, etc. L'éditeur de code vous aidera à repérer les erreurs et à les corriger si votre code ne s'exécute pas.
Bibliothèque de graphiques
Enfin, vous aurez besoin d'une bibliothèque de graphiques pour générer celui dont vous avez besoin. Je recommande JSCharting, mais il en existe des tonnes parmi lesquelles choisir. Ce tutoriel sera donc consacré à JSCharting. JSCharting peut dessiner toutes sortes de graphiques en SVG et est facile à utiliser. Son API simplifie beaucoup de choses et constitue une bonne option pour se lancer.
Données
À moins de disposer déjà de données pour générer un graphique, vous devrez vous en procurer. Vous pouvez obtenir des données auprès d'organismes comme le CDC, l'OMS ou le PAM. Toute donnée qui met en relation deux valeurs conviendra. Même un graphique suivant la quantité de pluie dans une ville ou un pays par an fera l'affaire.
Comment créer des graphiques avec JavaScript
- Ajouter un graphique vierge
Vous devez d'abord télécharger un graphique vierge avec ceci. Ce fichier contient
- index.html
- js/index.js
Le fichier .html est vide, à l'exception d'un peu de code standard. Le fichier .js est complètement vide.
- Ouvrez le fichier index.html dans l'éditeur de code de votre choix et ajoutez une balise script pour inclure la bibliothèque JSCharting. Faites-le après la balise fermante </body>.
Le code devrait ressembler à ceci :
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>
- utilisez la même technique pour ajouter une balise script référençant un fichier .js vierge. Ajoutez-la après le script JSCharting. Cela devrait ressembler à ceci :
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>
- Enfin, ajoutez un emplacement réservé <div> dans le fichier HTML afin de définir l'endroit où le graphique doit être dessiné.
Cela devrait ressembler à ceci :
<body>
<div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>
- La div doit avoir un ID afin d'indiquer au graphique dans quelle div il doit être dessiné. Ici, l'ID est chartDiv.
Ouvrez le fichier .js et ajoutez un graphique vide en écrivant le code suivant :
JSC.Chart('chartDiv', {});
- Enfin, ouvrez le fichier index.html dans un navigateur. Vous pouvez glisser-déposer le fichier dans un navigateur comme Chrome. Vous verrez alors un petit logo JSC sur la page. Cette première étape est terminée pour envoi de graphiques avec JavaScript.
- Expérimentez un peu
Ajoutez quelques valeurs pour vous amuser avec le graphique. Remplacez le contenu du fichier .js par le code suivant :
JSC.Chart('chartDiv', {
type: 'horizontal column',
series: [
{
points: [
{x: 'Pommes', y: 50},
{x: 'Oranges', y: 42}
]
}
]
});
- Actualisez le navigateur où la page est chargée et vous devriez voir un graphique à barres. C'est parce que vous avez défini le type sur 'horizontal column' dans le code.
Passons maintenant aux choses sérieuses.
- Préparez vos données et assemblez-les
- Le format de données CSV signifie « comma separated values » (valeurs séparées par des virgules). Ce fichier contient des lignes, chacune représentant un enregistrement ou une entrée. La première ligne de valeurs contient les noms des valeurs séparées par des virgules : ce sont les colonnes. Les lignes suivantes contiennent les valeurs elles-mêmes. Par exemple :
Nom, âge
Milton, 45
Harry, 34
- Le format CSV est lisible, mais il en existe plusieurs variantes. Si les valeurs contiennent des virgules, comme des adresses postales, le format ne fonctionne pas tel quel. Chaque valeur doit donc être entourée de guillemets. Comme ceci :
“nom”, “âge”
“Milton”, “45”
“Harry”, “34”
- JSCharting propose de nombreux outils pour vous aider dans cette tâche. Vous n'avez plus à vous soucier du CSV, vous pouvez le convertir en JSON (JavaScript Object Notation). Cela donnera un tableau d'objets.
Commencez par télécharger ceci fichier de données du CDC pour un projet d'exemple. Vous pouvez ouvrir ce fichier CSV dans Excel. Vous devrez télécharger les données CSV en temps réel avec du code JavaScript. Le code peut sembler un peu confus, mais il est court. Vous pouvez également l'utiliser pour récupérer n'importe quel fichier CSV ou JSON sur internet. - Remplacez le contenu du fichier index.js par ceci :
fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
.then(function (response) {
return response.text();
})
.then(function (text) {
csvToSeries(text);
})
.catch(function (error) {
//Une erreur est survenue
console.log(error);
});
function csvToSeries(text) {
console.log(text);
}
- Le code complexe garantit que toutes les données sont disponibles immédiatement. C'est pourquoi il utilise une fonction fetch().
- le code then(…) est appelé lorsque la réponse arrive. La fonction convertit la réponse en texte puis le renvoie.
- le second argument de la fonction then(…) transmet le texte en argument.
- La fonction catch() précise ce qu'il faut faire si quelque chose se passe mal. Il peut s'agir de problèmes réseau, d'URL incorrectes, etc. Dans ces cas-là, l'erreur est envoyée à la console.
- Après cela, la fonction csvToSeries() transmet le texte à la console pour inspection.
- Tout assembler
À la fin du fichier index.js, ajoutez ce code pour afficher le graphique :
function renderChart(series){
JSC.Chart('chartDiv', {
series: series
});
}
actualisez le navigateur et vous aurez le graphique dont vous avez besoin.
Vous pouvez compléter vos connaissances sur les graphiques en JavaScript avec notre article sur les graphiques à barres.
