Datasets d'exemple:
Pre-requis
Il vous faut un environement de dev web (un editeur de code et un serveur HTTP). Si vous n'en avez pas et/ou ne savez pas comment en mettre un en place vous pouvez regarder ce petit guide.
A partir de la, je pars du principe que vous avez un dossier vide ouvert dans VSCode, soit parce que vous savez faire, soit parce que vous avez suivi le guide ci-dessus.
Intro
On va apprendre a traiter de la donnee et la visualiser avec javascript.
La visualisation et le traitement de donnees est un excellent outil que plus de personnes devrait maitriser, au moins parce que ca vous entraine a mieux envisager des statistiques quand on vous les presente. Mais aussi ca vous aide a mieux piloter des projets, qu'il soient des projets pour vous, pour des entreprises, ou des projets citoyens.
Aussi, c'est pratique de le faire en javascript parce que ca vous fait travailler le langage de programmation le plus versatile a l'heure actuelle mais aussi parce c'est le langage que les navigateurs web sont capables d'executer nativement.
Aux premiers abords, programmer des dessins semblera plus dur que de juste prendre un crayon, ou pire... mais ca offre l'avantage d'etre precis sur les characteristiques du dessin et donc permet de representer exactement les ecarts present dans nos data, et ca permet de dessiner des representations complexes bien plus facilement que si on devait les dessiner.
Imaginer dessiner ca, avec precision!
Ah et puis en programmant on peut faire des systemes interactifs, cliquez sur l'image ci-dessus pour jouer avec.
Data
Ceci est une intro, il n'y a pas de pre-requis autre que le setup d'un environement de developpement, ce qui veux aussi dire qu'on ne va pas commencer par mettre en place un force-directed graph comme on vient d'en voir.
Logging
Pour commencer, voyons comment s'afficher la data la plus simple possible, de la maniere la plus primaire possible.
Creez un nouveu fichier myScript.js.
et un nouveau fichier myFirstViz.html dans lequel vous collerez ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="myScript.js"></script>
</body>
</html>
Tout ceci nous donne une page web qui n'as pas de contenu mais qui execute le javascript present dans le fichier myScript.js et donc si on colle le code suivant dans myScript.js ...
console.log(42);
... et qu'on ouvre la console dans la page myFirstViz.html (en appuyant sur F12) on verra ceci
