Skip to content

Exemples étudiés durant le cours de dataviz avec p5.js

Notifications You must be signed in to change notification settings

dsaadesignv/Dataviz-p5js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 

Repository files navigation

Dataviz-p5js

Boucle for et Array

noloop

version en ligne avec l'éditeur p5js.


array

version en ligne avec l'éditeur p5js.


array

version en ligne avec l'éditeur p5js.


Charger des data depuis un fichier .csv

csv

  • 03a - sketches/03-loadCSV-a
    • Données stockées dans un fichier .csv externe (données séparées par des virgules)
    • Chargement des données dans une fonction globale preload() avec loadTable()
    • Propriétés et fonctions de l'objet table : table.columns (header des colonnes) ; getRowCount() (renvoie le nombre de lignes) ; getColumn() (stocke les valeurs d'une colonne dans un tableau).
    • Variable t qui augmente de 1 tant qu'elle est plus petite que 40. Condition if(){ }.
    • Fonction text(variable, x, y);

version en ligne avec l'éditeur p5js.


csv

version en ligne avec l'éditeur p5js.


csv

  • 03c - sketches/03-loadCSV-c
    • Tracé vectoriel de la ligne avec beginShape() et endShape(), et la fonction curveVertex().
    • Modulo % pour savoir si un nombre est un multiple d'un autre nombre. Pour savoir si un nombre est un multiple de 50, on évalue le reste de la division du nombre par 50 : if(h%50==0). Si il reste 0, ce nombre est bien un multiple de 50;

version en ligne avec l'éditeur p5js.


Charger des data depuis un fichier .json ou .geojson

json

  • 04a - sketches/04-loadJSON-a
    • Chargement d'un fichier de données JSON avec la fonction loadJSON.
    • Récupération des valeurs en parcourant l'objet JSON. Exemple pour la magnitude : let earthquakeMag = earthquakes.features[i].properties.mag;
    • Structure conditionnelle pour créer la grille : if(posX < width-100){ posX += 50; }else{ posY += 50; posX = 50; }.

version en ligne avec l'éditeur p5js.


json

  • 04b - sketches/04-loadJSON-a
    • Chargement d'un fichier de données JSON avec la fonction loadJSON.
    • Fonction img.resize() pour redimensionner le fond de carte en fonction de la taille du canvas.
    • Création d'une fonction convert(lat,lon) pour convertir les coordonnées de latitude et longitude en position x et y

version en ligne avec l'éditeur p5js.


slider

version en ligne avec l'éditeur p5js.


webgl

  • 04d - sketches/04-loadJSON-WEBGL-d
    • Création d'un canvas WEBGL en ajoutant le paramètre WEBGL à la fin de la fonction de création du canvas.
    • Création de sphères avec la fonction sphere(rayon).
    • Fonctions de transformation 3D : rotateX, rotateY et rotateZ.
    • Fonction mouseWheel(event) pour surveiller l'utilisation de la molette ou du scroll du pad. La valeur récupérée est affectée la variable permettant de contrôler le zoom (posZ).
    • Création d'une fonction convert(lat,lon) pour convertir les coordonnées GPS en coordonnées cartésiennes x, y et z.
    • Fonction sin(nb) pour faire "clignoter" les sphères. Très utile pour récupérer une valeur entre -1 et 1, et s'en servir de facteur.

version en ligne avec l'éditeur p5js.


Javascript et p5.js

scroll

  • 05a - sketches/05-js-scroll
    • Récupération de la valeur scrollY avec window.addEventListener
    • Création du canvas dans un élément "parent" avec la fonction canvas.parent()
    • Positionnement fixe avec CSS position:fixed

version en ligne


setinterval

  • 05b - sketches/05-js-setinterval
    • setInterval(fonction, délai en ms) permet de répéter des instructions à intervalles réguliers
    • fonction arc() pour dessiner le "pie chart"
    • fonction lerp() pour interpoler la valeur de l'angle de 0 à la valeur souhaitée

version en ligne avec l'éditeur p5js.


setinterval2

version en ligne avec l'éditeur p5js.

About

Exemples étudiés durant le cours de dataviz avec p5.js

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published