Contenu du cours

Réalisez un graphique animé de séries temporelles

L’application periodic series permet de créer plusieurs visualisations animées, telles que des séries temporelles ou des graphiques radiaux. Il est ainsi possible de visualiser des évolutions dans le temps et de les comparer.

Dans ce tutoriel, nous expliquons comment réaliser une série temporelle avec periodic series, à l’aide de la plateforme Koumoul, sans que vous n'ayez besoin de programmer.

Dans notre exemple, nous cherchons à observer les variations de températures semaine par semaine à Rennes, sur l’ensemble de l’année 2019. Pour réaliser cette visualisation, vous avez besoin de ces données, d’être connecté à votre compte Koumoul et de quelques minutes.

Les concepts et libellés à appliquer dans cet exemple sont les suivants :

  • date = concept : date d’évènement + libellé : Date (UTC) ;
  • t = libellé : Température.

Attention ! Lorsque vous avez effectué toutes ces modifications, pensez bien à cliquer sur le bouton appliquer pour que les changements soient bien effectués. Si les éléments sont encore en orange, cela signifie que vous n’avez pas encore validé.

Une fois ces changements effectués, vous pouvez maintenant valider votre brouillon. Attendez de nouveau les 6 étapes afin que le reste du jeu s’importe. Votre fichier est maintenant disponible et prêt à être utilisé.

Configuration de la visualisation

Pour créer votre visualisation periodic series, descendez la page de votre jeu de données récemment importé jusqu’à la partie utilisations, puis cliquez sur configurer une visualisation.

Parmi la liste d’applications disponibles sur la plateforme Koumoul, choisissez la visualisation periodic series, ajoutez un titre à votre visualisation et cliquez sur enregistrer.


Vous êtes redirigé sur la page de configuration de votre visualisation.

Commencez par vérifier que le jeu de données que vous avez importé est bien sélectionné dans la partie jeux de données.

Dans cette visualisation, nous souhaitons observer les variations de températures semaine par semaine pour la station météorologique de Rennes, sur l’ensemble de l’année 2019. Pour cela, nous commençons donc par sélectionner les données que nous voulons présenter dans l’onglet données de la configuration. Dans la partie champ de mesure, nous sélectionnons température et moyenne dans la partie métrique.

L’unité de température du jeu de données que nous utilisons est le Kelvin. Pour convertir les températures en degrés Celsius, il faut entrer la formule permettant la conversion dans la partie transformer la valeur : val-273.15.


Dans la partie rendu, nous configurons le rendu visuel de notre visualisation. Dans notre exemple, nous avons décidé de montrer la variation des températures par semaine : après avoir choisi le type de graphique que nous souhaitons présenter, ici graphique en lignes, nous sélectionnons dans la partie période : jour, semaine, mois ou année.

Il ne reste plus qu’à remplir, dans l’onglet unité, l’unité dans laquelle les données sont représentés sur le graphique, ici en degrés Celsius : °C.


Cliquez sur valider pour sauvegarder votre visualisation, celle-ci est désormais configurée, prête à être publiée.

Intégrez votre visualisation à votre site

Vous pouvez intégrer votre visualisation sur un autre site en copiant le code à l’aide du bouton d'action intégrer dans un site à droite. Votre code devrait ressembler à celui-ci :

<iframe src="https://koumoul.com/data-fair/app/variation-temperature-rennes-en-2019?embed=true" width="100%" height="500px" style="background-color: transparent; border: none;"></iframe>

Pour que votre visualisation soit accessible à tous les visiteurs de votre site, activez l'accès au public dans la page d'édition de vos données et la page de configuration votre visualisation.

Lorsque vous l’intégrerez dans votre site, vous obtiendrez le rendu suivant :

Conclusion

Vous avez maintenant toutes les informations pour créer une série temporelle avec periodic series sur la plateforme Koumoul et trouver le code pour pouvoir l’intégrer sur un site externe.

N'hésitez pas à nous contacter pour toute information complémentaire. Si vous souhaitez aller plus loin, nous pouvons aussi réaliser des visualisations personnalisées.

Données utilisées

Si vous avez des remarques sur ce cours, n'hésitez pas à nous contacter pour nous en faire part.