Comment créer un tracker COVID-19 en JavaScript

Vous cherchez un projet rapide pour mettre en pratique vos compétences en développement Web? Vous avez probablement vu de nombreux trackers et graphiques COVID différents tout au long de la pandémie - voici comment créer les vôtres avec un minimum d'effort.

Vous apprendrez quelques techniques utiles en JavaScript, notamment comment récupérer des données distantes à partir d'une API et comment utiliser une bibliothèque de graphiques pour les afficher. Allons-y.

Ce que vous allez construire

Ce guide vous aidera à démontrer les bases de l'utilisation d'une API à l'aide de JavaScript. Vous apprendrez à récupérer des données à partir d'une source distante. Vous verrez également comment utiliser une bibliothèque de graphiques pour afficher les données récupérées.

Tout le code utilisé dans cet article est disponible dans un GithubGenericName dépôt.

Explorer la source de données

Pour obtenir les derniers chiffres liés au COVID, nous utiliserons maladie.sh qui se décrit comme une "Open Disease Data API".

Cette API est excellente car :

• Il dispose de nombreuses sources de données différentes, chacune offrant des formats légèrement différents
• Il est bien documenté, non pas avec des exemples, mais avec beaucoup de détails sur la façon dont chacun des maladie.sh les terminaux fonctionnent
• Il renvoie JSON, qui est facile à utiliser à partir de JavaScript
• Il est totalement ouvert et gratuit, aucune authentification requise

Ce dernier point est particulièrement important: de nombreuses API nécessitent que vous passiez par un processus OpenAuth compliqué, ou ne sont tout simplement pas disponibles pour JavaScript exécuté dans un navigateur.

Pour ce tutoriel, nous utiliserons le Données du New York Times pour les États-Unis à partir de disease.sh. Ce paramètre comprend des données sur la durée de la pandémie (depuis le 21 janvier 2020), dans un format facile à utiliser. Jetez un oeil à quelques données de la point final de la maladie.sh nous allons utiliser :

Si vous avez l'habitude de traiter avec JSON, vous pourrez peut-être le lire sans aucun problème. Voici un petit extrait dans une mise en page plus lisible :

[{
 "date":"2020-01-21",
 "cas":1,
 "décès":0,
 "mis à jour":1643386814538
},{
 "date":"2020-01-22",
 "cas":1,
 "décès":0,
 "mis à jour":1643386814538
}]

L'API renvoie un simple tableau d'objets, chaque objet représentant un point de données avec une date, des cas, etc.

Configurer le HTML

Pour l'instant, nous allons mettre en place un squelette HTML très simple. En fin de compte, vous devrez inclure quelques ressources externes, mais cela suffit pour commencer :

Cas de Covid, États-Unis

Récupération des données à l'aide de JavaScript

Commencez simplement par obtenir les données de l'API et affichez-les dans la console du navigateur. Cela vous aidera à vérifier que vous pouvez extraire du serveur distant et traiter la réponse. Ajoutez le code suivant à votre covid.js déposer:

var API = ' https://disease.sh/v3/covid-19/nyt/usa';
récupérer (API)
 .then (réponse => réponse.json())
 .puis (données => {
 console.log (données);
 });

L'API Fetch JavaScript est une alternative plus récente à XMLHttpRequest (lisez-la en détail sur MDN). Il utilise une promesse qui facilite un peu la programmation asynchrone avec rappels. En utilisant ce paradigme, vous pouvez enchaîner plusieurs étapes asynchrones.

Après avoir récupéré l'URL requise, utilisez le ensuite méthode de la Promesse pour gérer le cas de réussite. Analysez le corps de la réponse en tant que JSON via le json() méthode.

En rapport: Les fonctions de flèche JavaScript peuvent faire de vous un meilleur développeur

Puisque ensuite() renvoie toujours une promesse, vous pouvez continuer à enchaîner pour gérer chaque étape. Dans la deuxième étape, pour l'instant, enregistrez simplement les données dans la console afin de pouvoir les inspecter :

Vous pourrez interagir avec l'objet affiché dans la console pour inspecter les données de l'API. Vous avez déjà fait beaucoup de progrès, alors passez à l'étape suivante lorsque vous serez prêt.

En rapport: Débogage en JavaScript: connexion à la console du navigateur

Affichage des données à l'aide de billboard.js

Au lieu d'enregistrer les données, traçons-les à l'aide d'une bibliothèque JavaScript. Préparez-vous à cela en mettant à jour le code précédent pour qu'il ressemble à ceci :

récupérer (API)
 .then (réponse => réponse.json())
 .puis (données => {
 plotData (données);
 });
fonction plotData (données) {
}

Nous utiliserons le billboard.js bibliothèque pour nous donner un graphique simple et interactif. billboard.js est basique, mais il prend en charge quelques types de graphiques différents et vous permet de personnaliser les axes, les étiquettes et tous les ingrédients standard d'un graphique.

Vous aurez besoin d'inclure trois fichiers externes, alors ajoutez-les au HEAD de votre html :

Essayez billboard.js avec le graphique le plus basique. Ajoutez ce qui suit à plotData():

bb.générer({
 bindto: "#covid-all-us-cases",
 Les données: {
 tapez: "ligne",
 Colonnes: [
 [ "données", 10, 40, 20 ]
 ]
 }
});

le lier à La propriété définit un sélecteur qui identifie l'élément HTML cible dans lequel générer le graphique. Les données sont pour un ligne graphique, avec une seule colonne. Notez que les données de la colonne sont un tableau composé de quatre valeurs, la première valeur étant une chaîne agissant comme le nom de ces données ("données").

Vous devriez voir un graphique qui ressemble un peu à ceci, avec trois valeurs dans la série et une légende l'étiquetant comme "données":

Tout ce qu'il vous reste à faire est d'utiliser le réel Les données de l'API dans laquelle vous passez déjà plotData(). Cela nécessite un peu plus de travail car vous devrez le traduire dans un format approprié et demander à billboard.js de tout afficher correctement.

Nous allons tracer un graphique qui montre l'historique complet du cas. Commencez par construire deux colonnes, une pour l'axe des x qui contient les dates, et une pour la série de données réelles que nous tracerons sur le graphique :

var keys = data.map (a => a.date),
 cas = data.map (a => a.cases);
keys.unshift("dates");
cas.unshift("cas");

Le travail restant nécessite des ajustements à l'objet panneau d'affichage.

bb.générer({
 bindto: "#covid-all-us-cases",
 Les données: {
 x: "dates",
 tapez: "ligne",
 Colonnes: [
 clés,
 cas
 ]
 }
});

Ajoutez également ce qui suit axe propriété:

 axe: {
 X: {
 tapez: "catégorie",
 cocher: {
 compter: 10
 }
 }
 }

Cela garantit que l'axe des x affiche seulement 10 dates afin qu'elles soient bien espacées. Notez que le résultat final est interactif. Lorsque vous déplacez votre curseur sur le graphique, le panneau d'affichage affiche les données dans une fenêtre contextuelle :

Découvrez la source de ce tracker dans GitHub.

Variantes

Découvrez comment vous pouvez utiliser les données source de différentes manières pour modifier ce que vous tracez à l'aide de billboard.js.

Affichage des données pour une seule année

Le graphique global est très chargé car il contient beaucoup de données. Une façon simple de réduire le bruit est de limiter la période, à une seule année par exemple (GitHub). Vous avez juste besoin de changer une ligne pour ce faire, et vous n'avez pas besoin de toucher le plotData fonctionner du tout; il est assez général pour gérer un ensemble réduit de données.

Dans la seconde .ensuite() appeler, remplacer :

plotData (données);

Avec:

plotData (data.filter (a => a.date > '2022'));

le filtre() La méthode réduit un tableau en appelant une fonction sur chaque valeur du tableau. Lorsque cette fonction revient vrai, il conserve la valeur. Sinon, il le rejette.

La fonction ci-dessus renvoie true si la valeur est Date propriété est supérieure à « 2022 ». Il s'agit d'une simple comparaison de chaînes, mais cela fonctionne pour le format de ces données qui est année-mois-jour, un format très pratique.

Affichage des données avec moins de granularité

Plutôt que de limiter les données à une seule année, une autre façon de réduire le bruit consiste à en supprimer la majeure partie, mais à conserver les données d'un intervalle fixe (GitHub). Les données couvriront alors toute la période d'origine, mais il y en aura beaucoup moins. Une approche évidente consiste à ne conserver qu'une seule valeur de chaque semaine, en d'autres termes, une valeur sur sept.

La technique standard pour ce faire est avec le % opérateur (module). En filtrant sur le module 7 de chaque indice de tableau égal à 0, on retiendra une valeur sur 7 :

plotData (data.filter((a, index) => index % 7 == 0));

Notez que, cette fois, vous devrez utiliser une autre forme de filtre() qui utilise deux arguments, le second représentant l'index. Voici le résultat :

Affichage des cas et des décès dans un seul graphique

Enfin, essayez d'afficher à la fois les cas et les décès sur un seul graphique (GitHub). Cette fois, vous devrez changer le plotData() méthode, mais l'approche est essentiellement la même. Les principaux changements sont l'ajout des nouvelles données :

décès = data.map (a => a.deaths)
...
colonnes = [ clés, cas, décès ]

Et des ajustements pour s'assurer que billboard.js formate correctement les axes. Notez en particulier les modifications de la structure de données appartenant à l'objet passé à bb.générer:

Les données: {
 x: "dates",
 colonnes: colonnes,
 axes: { "cases": "y", "deaths": "y2" },
 les types: {
 cas: "barre"
 }
}

Maintenant, définissez les axes multiples à tracer avec un nouveau type spécifique au cas séries.

Tracer les résultats de l'API à l'aide de JavaScript

Ce didacticiel montre comment utiliser une API simple et une bibliothèque de graphiques pour créer un tracker COVID-19 de base en JavaScript. L'API prend en charge de nombreuses autres données avec lesquelles vous pouvez travailler pour différents pays et inclut également des données sur la couverture vaccinale.

Vous pouvez utiliser une large gamme de types de graphiques billboard.js pour l'afficher, ou une bibliothèque de graphiques différente. Le choix t'appartient!

Comment créer un graphique avec Chart.js

Afficher des données dynamiques avec JavaScript n'a jamais été aussi facile.

Lire la suite

A propos de l'auteur