| Conférencier |
Transcription |
| jopowe |
Bonjour, bienvenue à ma conférence. |
| |
Cette présentation fait suite à une discussion au sein de la communauté des utilisateurs de JMP. Le Dr Anderson Mayfield est biologiste marin à la NOAA et à l'Université de Miami. |
| |
Il étudie la santé des coraux récifaux. Il a présenté ses travaux lors de notre émission spéciale JMP On Air pour la Journée de la Terre. Il interviendra également à cette conférence. |
| |
Dans ce message publié sur le forum des utilisateurs de JMP, il a partagé cette image. Comme vous pouvez le voir, elle comporte de nombreux éléments graphiques représentant des coraux ou des récifs coralliens. |
| |
et ils représentent de multiples données, le tout dans un seul petit graphique, un peu comme dans un jeu vidéo lorsqu'on a les statistiques des joueurs. |
| |
Et ils planent autour du joueur pendant qu'il se déplace dans la scène. Vous comprenez sans doute maintenant pourquoi j'ai intitulé ma conférence : « Qu'obtient-on en combinant un jeu vidéo, un biologiste marin et JMP ? » Passons à la suite. |
| |
Je vais vous parler des solutions basées sur le jeu, ou inspirées du jeu, possibles dans JMP, notamment l'utilisation de scripts graphiques personnalisés. |
| |
Cartes personnalisées. Ensuite, je vais vous parler d'une application web de visualisation de nuages de points 3D que j'ai développée et de la manière dont j'y ai intégré des ensembles de données JMP. |
| |
Voici un exemple de script graphique. |
| |
Voici un exemple d'utilisation de cartes personnalisées. Et voici mon application de nuage de points 3D. |
| |
Alors, commençons. Pour illustrer l'utilisation des scripts graphiques personnalisés, voici un petit exemple. |
| |
Et lorsque j'ouvre JMP et que j'exécute |
| |
ce petit graphique, et en fait, je vais parler de ça. |
| |
J'utilise cet ensemble de données fictif que j'ai créé de toutes pièces. Il s'agit essentiellement d'une migration de poissons descendant de la Grande Barrière de corail jusqu'à Sydney. |
| |
Pour accéder aux scripts graphiques, il vous suffit d'aller dans « Personnaliser ». |
| |
Et ce petit bouton « + » permet d'ajouter un nouveau script. Il est vide par défaut, mais nous avons quelques exemples dans JMP. |
| |
J'aime bien le script polygone. Il est très simple : il dessine un triangle. Si je l'applique à mon graphique, on voit bien un triangle. |
| |
Et tout cela nous a pris trois lignes de code : définir la transparence, choisir une couleur de remplissage, puis dessiner le polygone. |
| |
Mais ce que nous cherchons à savoir, c'est comment intégrer cela concrètement dans un script. Le moyen le plus simple de le voir est d'appuyer sur le bouton « Répondre ». |
| |
Vous enregistrez ensuite le script dans la fenêtre de script. Voici le script : il commence par le lancement de ma petite plateforme bivariée avec la latitude et la longitude. Plus bas, une instruction dispatch contient un script d'ajout d'image. |
| |
Puis les trois lignes de l'échantillon. |
| |
Voici donc un exemple très simple d'utilisation d'un script graphique. |
| |
Voici un script graphique que je vais intégrer. Il dessine ces barres flottant au-dessus de chaque point. |
| |
Et la première chose que je fais dans cette application, c'est de régler la transparence, puis de dessiner l'arrière-plan de mon petit graphique. |
| |
Un pour la faim, un pour la force et un pour la vitesse. |
| |
Je vais maintenant vous montrer le script complet, car il dépend d'autres éléments. Il utilise notamment ces constantes que j'ai définies principalement pour les couleurs, l'arrière-plan et quelques autres détails. |
| |
Voici ma fonction de dessin de barres. Elle prend en paramètres une position, une longueur et une couleur. Elle peut donc être utilisée pour chaque barre. Si j'exécute ce script… |
| |
Voilà, vous avez le graphique avec le petit |
| |
Des sortes de dispositifs de surveillance de la santé inspirés des jeux vidéo, planant au-dessus de chaque poisson tandis qu'ils nagent et descendent le courant est-australien jusqu'à Sydney. |
| |
Ceci va vous donner une idée, en gros une explication étape par étape du fonctionnement de cette fonction. Nous avons commencé avec un simple marqueur à l'écran, et pour chaque marqueur, nous avons défini l'origine des pixels. |
| |
Ensuite, on commence à dessiner le fond, mais cela prend plusieurs étapes. La première fois qu'on définit l'épaisseur du trait, on ne voit rien. |
| |
Ensuite, nous définissons la couleur, qui sera noire. Puis nous effectuons un déplacement vers et une ligne qui dessine le fond avec un trait très épais. |
| |
Pour chaque barre, nous allons définir sa couleur, la positionner, puis tracer une ligne. Ensuite, nous dessinons le fond, nous définissons sa couleur et il se prolonge le long de la barre. Et bien sûr, nous répétons l'opération pour les deux autres lignes. |
| |
Vous pouvez désormais utiliser de nombreuses fonctions graphiques. Consultez la section relative aux fonctions graphiques dans la documentation de référence de la syntaxe JSL ; vous pouvez créer tout ce que vous souhaitez. Alors, lancez-vous ! |
| |
Ensuite, je vais parler de l'utilisation des cartes personnalisées. |
| |
Excusez-moi. |
| |
Pour utiliser des cartes personnalisées, il vous suffit de fournir deux tables. La première définit toutes les formes que vous souhaitez utiliser, et la seconde nomme ces formes. |
| |
Pour cette colonne « Nom », il vous suffit d'ajouter une propriété de type « Rôle de la carte » (définition de nom de forme). Je vous montrerai cela dans un instant. |
| |
Pour prendre un exemple très simple, il nous faut bien sûr une classe Big. Et je vais vous donner un exemple très simple. |
| |
Je vais aussi chercher une carte avec seulement deux rectangles. Je vais ouvrir ces fichiers. |
| |
Donc, comme je l'ai dit, c'est une carte très petite. Et juste pour vous montrer ces coordonnées, j'ai un petit |
| |
Voici un script qui illustre les points. |
| |
Si je surligne ces quatre éléments du haut, il s'agit du rectangle supérieur, et les quatre suivants forment le rectangle inférieur. |
| |
La valeur du haut correspond au poids, celle du bas à la taille. Et si vous regardez la propriété de la colonne, |
| |
Il s'agit du rôle de la carte, de la définition du nom de la forme. |
| |
Une fois cette carte prête, nous pourrons ouvrir le mode Grande Classe. |
| |
On ne peut pas la réutiliser directement. Il faut d'abord empiler les colonnes « hauteur » et « poids ». On va donc ouvrir des tableaux. Je vais les empiler. |
| |
Et maintenant, j'ai un tableau dont ces colonnes sont empilées. |
| |
Vous voyez que l'étiquette comporte une hauteur et un poids alternés, et ce que nous devons faire pour la relier au fichier de carte, c'est ajouter une autre propriété de colonne. |
| |
Celui-ci se trouve tout en bas, encore une fois le rôle de la carte. Mais nous n'allons pas dire définition du nom en forme, nous allons dire utilisation du nom en forme et nous devons choisir le |
| |
fichier de carte, le nom du fichier de carte. |
| |
Et définissez également la colonne sur nom. |
| |
Et voilà, c'est terminé. Maintenant que nous avons ça, je peux l'utiliser dans un graphique. |
| |
Le graphique que nous recherchons utilise essentiellement la colonne d'étiquettes pour la forme de la carte, ce qui définit les formes supérieure et inférieure, puis nous pouvons glisser-déposer la colonne de données qui contient toutes les données. |
| |
dans le rôle de la couleur. Et voilà, c'est un résumé de tous les élèves de la Grande Classe, mais nous voulons vraiment obtenir |
| |
Une par élève. Si je la fais glisser dans le rouleau, c'est un peu serré, mais je vais l'espacer en créant des niveaux par ligne et en fixant ce nombre à 10. |
| |
Voilà. C'est exactement ce que je recherchais. Ce graphique peut s'avérer utile. |
| |
à elle seule. |
| |
Passons maintenant à quelque chose d'un peu plus compliqué. |
| |
En fait, si vous faites quelque chose de plus compliqué, vous pourriez utiliser le module complémentaire de création de cartes personnalisées. |
| |
Et c'est un excellent module complémentaire. Il permet d'importer une image puis de la reproduire par-dessus. |
| |
Une fois que vous avez terminé de tracer toutes les formes, cliquez sur « Terminer avec des données aléatoires », et le programme générera… |
| |
Vous aurez besoin des deux fichiers de formes, ainsi que d'un jeu de données aléatoires pour tester votre carte personnalisée. Voici un exemple avec quatre variables et une variable centrale. Il s'agit donc d'une version carrée de la carte présentée dans la diapositive originale. |
| |
Ce n'était pas exactement ce que nous recherchions. Nous voulions quelque chose de rond, et je crois que c'est le Dr Mayfield qui l'a appelé une tarte complexe. |
| |
Je ne sais pas si c'est un terme officiel, mais j'ai décidé de construire ces choses avec des scripts. |
| |
Je voulais donc créer des fichiers de formes et m'assurer d'obtenir exactement ce que je recherchais : quatre formes avec un élément au centre. |
| |
Et puis je me suis dit : « Bon, je suis programmeur. J'aime en faire un peu plus et être un peu plus flexible. » |
| |
Je me suis dit que certaines personnes voudraient peut-être faire la même chose, mais avec seulement deux variables plus une variable moyenne ou centrale, voire plus. |
| |
Et je me suis dit que ce serait peut-être bien de pouvoir aussi créer différentes formes, comme un losange ou un carré. Bon, je ne suis pas un génie. J'ai eu de la chance. Et Xan Gregg a justement répondu à une question qui demandait comment créer ce diagramme polaire dans JMP. |
| |
Et voilà. |
| |
Voilà, c'est parti ! |
| |
Ils recherchaient une forme comme celle-ci, qui ressemble beaucoup à ce dont j'avais besoin. |
| |
Le travail de Xan est vraiment excellent. C'est un script flexible qui permet de générer des secteurs autour d'un cercle, mais il manquait seulement le centre et la possibilité de nommer les fichiers selon une convention particulière que je souhaitais. |
| |
Mais ce n'était pas trop difficile. Et c'est ce que fait mon script. Quand vous exécutez une recette de tarte complexe, vous ouvrez le créateur de tartes complexes et vous ajoutez des ingrédients. Tout d'abord, vous devez indiquer le nombre de formes. |
| |
Et ensuite, il faudra décider si vous allez le centrer, soit en haut, soit légèrement sur le côté. |
| |
Il y a ensuite une variable pour la régularité. |
| |
Il vous faudra ensuite indiquer le rayon intérieur, pour préciser si vous souhaitez plus ou moins de remplissage, ainsi que le rayon extérieur. |
| |
Bien sûr, l'étape suivante consiste à exécuter le script, qui générera |
| |
ces |
| |
Vous trouverez ici des fichiers de formes, ainsi qu'un exemple de test, comme pour le créateur de camemberts personnalisés ou l'extension de carte personnalisée. Voici un exemple de camembert complexe à cinq éléments, avec cinq formes. |
| |
et la douceur à régler sur sept. Vous pourriez utiliser cinq ou six et ce serait probablement encore acceptable s'ils doivent être |
| |
Dessiné très petit. La taille importe peu. Ce qui compte, c'est le rapport entre le rayon intérieur et le rayon extérieur. C'est à peu près ce que le Dr Mayfield avait en tête ; j'ai donc conservé quatre pour le rayon intérieur et neuf pour le rayon extérieur. |
| |
Voyons donc comment utiliser concrètement ces éléments. Comme pour la démo « Big Class », nous allons devoir empiler les colonnes. Mais une différence notable est que je ne dispose pas des variables de résistance et de santé dans mon fichier de formes. Elles sont en fait absentes. |
| |
Dans le fichier de formes, ils sont nommés wedge 1, 2, 3 et |
| |
centre. |
| |
Je vais donc devoir construire un |
| |
fichier qui sera |
| |
relier les deux. |
| |
Alors, tout d'abord, j'ai cet exemple d'école à petits bâtiments empilés, |
| |
ce que j'ai fait en empilant les colonnes santé, force et vitesse. |
| |
Et voici le fichier de formes que... le fichier de formes nommé que je vais utiliser. |
| |
Notez qu'elle possède une propriété de colonne |
| |
rôle de la carte, |
| |
Bien, définition du rôle de la carte. |
| |
Et c'est indispensable lorsque vous créez vos propres formes personnalisées. |
| |
Donc, le fichier lié, les colonnes de la carte à la forme, je l'ai construit essentiellement en listant les étiquettes à l'intérieur de mon |
| |
fichier empilé. |
| |
Puis, dans une autre colonne, intitulée « Nom de la forme », j'ai listé les formes et leurs noms. |
| |
Il est important que le nom de la forme ici |
| |
ont une propriété qui a pour rôle de carte, mais celle-ci a pour nom de forme. |
| |
Et cette colonne d'étiquette de données aura un ID de lien afin qu'elle puisse être virtuellement rattachée à mon tableau empilé. |
| |
Maintenant que j'ai mis en place tous ces tableaux, |
| |
L'étape suivante consiste à construire un graphique. |
| |
Maintenant, la procédure est similaire à celle que j'ai suivie précédemment. La seule différence est qu'au lieu de simplement glisser l'étiquette vers la forme de la carte, j'utilise maintenant une jointure virtuelle de colonne, que je glisse vers la forme de la carte pour obtenir la forme souhaitée. Il me reste à ajouter les données à la colonne de couleur. |
| |
Ensuite, ajoutez le nom pour l'emballage. Et voilà tous mes poissons avec |
| |
Un graphique pour chacun. Pour obtenir le bon dégradé, je vais dans « Dégradé » et c'est celui-ci. |
| |
Je veux m'assurer que le vert est bon, donc je vais inverser les couleurs. |
| |
Et voilà. C'est le |
| |
Cette carte est utile en soi, car elle permet d'observer chaque poisson et de voir comment il se porte. Mais je souhaite évidemment l'améliorer un peu plus. |
| |
Ce que je souhaite faire, c'est pouvoir intégrer ces images dans une infobulle. |
| |
Pour ce faire, nous allons créer un tableau de données. |
| |
Rendez-moi le fichier que j'avais et cette image. |
| |
Donc, ce que cela va faire ici, c'est que sous les triangles rouges se trouve une fonction de création de tableau de données. Et cela va générer un nouveau tableau de données. |
| |
Avec toutes ces images, c'est vraiment utile, surtout si on ajoute un lien. Je transformerais ça en identifiant de lien pour pouvoir y accéder depuis mon petit fichier scolaire et ainsi trouver le graphique correspondant à chaque personnage. |
| |
Bon, en fait, j'ai ça enregistré dans un autre fichier et je vais l'ouvrir. Je l'ai appelé « images de santé ». |
| |
Nous n'en avons donc plus besoin. |
| |
Et nous n'avons plus besoin du fichier empilé. |
| |
Mais ce dont nous avons besoin, c'est de l'exemple de la petite école par lequel j'ai commencé. |
| |
Maintenant, la première chose à faire pour que ces éléments apparaissent dans le |
| |
Le graphique sert à définir cette colonne d'image, cette colonne virtuelle, |
| |
comme indiqué. |
| |
Vous pouvez également le faire avec un graphique simple. |
| |
Nous avons donc déjà un exemple… Bon, je vais rouvrir ceci. Pourquoi pas ? Mon script de course, juste pour vous montrer que je pars de zéro. Mais comme j’ai étiqueté cette colonne, maintenant, quand je survole l’un de ces graphiques, vous obtenez… les trois |
| |
Vous pouvez ajouter des informations à ce graphique et épingler autant de caractères que vous le souhaitez. |
| |
Voilà donc une façon d'utiliser ces graphiques. |
| |
Une autre solution consiste à utiliser un marqueur. |
| |
Et les éléments graphiques que vous allez obtenir flotteront au-dessus des points et remplaceront les formes en losange que j'avais auparavant. |
| |
Je vais ressortir ces images sur la santé, la petite école, et même ce graphique. |
| |
Donc, pour l'instant, nous avons ces diamants. Afin de leur donner ces formes-là, |
| |
nous avons dû en ajouter un autre |
| |
Un badge apparaît dans cette colonne de jointure virtuelle. Il devient très populaire, alors utilisez-le comme marqueur. Un nouveau badge s'affiche donc. Et derrière moi, |
| |
Vous verrez que ces images ont été intégrées à la scène. Un dernier détail : je n'apprécie pas vraiment ce contour blanc autour de l'image. Il est en fait intégré à l'image du graphique. |
| |
Une des solutions consiste à utiliser un script qui repère les zones blanches et modifie le canal alpha pour les rendre transparentes. On obtient ainsi des graphiques impeccables. |
| |
Forme ronde, pas fond carré. Vous pourriez aussi agrandir le marqueur. |
| |
Et nous pouvons aller jusqu'à 11. |
| |
Ça vous plaît ? C'est à peu près ce que j'avais ; 10 aurait probablement été mieux. Mais j'aime bien aller jusqu'à 11. Bon, voilà. |
| |
Utilisons les marqueurs. Nous voulons créer un graphique un peu plus complexe. C'est ce que le Dr Anderson Mayfield recherchait : une carte thermique derrière les marqueurs. C'est assez complexe, mais JMP peut le gérer. Il s'agit en fait d'une courbe de niveau. |
| |
Voici donc une autre version de petite école. Mais cette fois-ci, j'ai les températures océaniques. |
| |
tout en bas |
| |
et elles sont cachées pour ne pas apparaître comme des points réels. |
| |
J'ai donc déjà créé des images pour celui-ci. |
| |
En fait, ce sont les mêmes images que celles que j'avais créées auparavant. |
| |
Et je vais commencer par |
| |
Voilà pour la fin, pour que vous puissiez voir où je veux en venir. En gros, je veux ces graphismes. |
| |
En survolant le contour, on aperçoit ici quelques légendes qui indiquent de quoi il s'agit. |
| |
Ça ne devrait pas être trop difficile. Je vais commencer par une partie du travail, avec une carte déjà placée et les coordonnées de latitude et de longitude déjà définies sur les axes x et y. |
| |
La première chose que je veux faire, c'est ajouter un contour. |
| |
Et il nous faut ajouter un peu de couleur, alors je fais glisser le rôle de température sur le rôle de couleur et je vais ajuster le nombre de niveaux sur ce contour. |
| |
Modifiez légèrement l'opacité et ajoutez un peu de lissage. |
| |
Ensuite, je veux le rendre un peu transparent. |
| |
Ajoutons un 0,6 à cela. |
| |
C'est à peu près la même chose qu'avant. Pour ajouter les marqueurs, il y a deux façons de procéder : soit en cliquant sur les points tout en maintenant la touche Maj enfoncée, soit en les faisant glisser. Pour les faire glisser, |
| |
Vous pouvez ensuite redéfinir la taille du marqueur. |
| |
en faisant cela par |
| |
Je vais aller ici et faire autre chose, et utilisons 10 cette fois-ci. Je pense que 11 était un peu trop grand. Très bien, ça a l'air bien. On y est presque. Nous voulons travailler sur cette légende. Comment intégrer ces couleurs ? Eh bien, nous avons déjà le rôle de santé. |
| |
Et vous pouvez glisser le curseur ici, dans le coin, pour ajouter une deuxième couleur. Ça perturbe un peu votre graphique au départ. |
| |
On peut régler ça. Le problème, c'est que le contour n'a pas vraiment besoin du rôle de santé. Donc, si on le désactive, on retrouve ce qu'on voulait. |
| |
L'étape suivante consiste donc à ajouter la couleur à la légende. Nous pouvons ensuite la personnaliser comme précédemment. |
| |
On va en faire un peu plus cette fois-ci. Je veux quatre étiquettes. |
| |
Je veux que ça commence à cinq heures et que ça monte jusqu'à |
| |
20. |
| |
Oh, je voulais aussi inverser les couleurs. |
| |
Voilà, ça ressemble à ça, c'est presque fini. Je veux juste peaufiner un peu les détails. Il y a deux ou trois choses à corriger dans la légende. |
| |
Allez donc dans les paramètres de la légende et supprimez les éléments qui ne semblent pas apporter grand-chose, puis déplacez la légende de santé tout en haut. |
| |
Voilà. Je pense donc avoir atteint au mieux ce que je recherchais. |
| |
Je peux donc m'en débarrasser. Je ne pense pas que tout le monde en ait encore besoin. |
| |
Mais je voudrais en ajouter un tout petit peu plus. |
| |
Pourquoi ne pas ajouter cette légende ? On ne savait pas vraiment à quoi servait chaque élément de ce graphique : faim, vitesse, force et santé. Heureusement, on a ça. |
| |
Fichier de correspondance. Il associe le nom de la colonne à sa forme. |
| |
Et je vais juste aborder ce sujet un instant. |
| |
Vous pouvez donc constater ici que j'ai étiqueté toutes les lignes et la colonne des étiquettes de données. Cela signifie que lorsque vous créez un graphique, |
| |
Tout sera étiqueté. C'est vraiment très simple. Il suffit de prendre le nom de la forme et de le glisser dans le rôle de carte, et voilà, le graphique est terminé. |
| |
Donc, si je veux intégrer cela à ma scène, le meilleur moyen est de le sélectionner, de cliquer sur le signe plus, puis de le copier. |
| |
Ensuite, vous ouvrez une application de retouche d'images et vous l'enregistrez sur votre disque dur. Et bien sûr, je l'ai déjà fait. Donc je vais… |
| |
Montrez-le une fois que vous l'aurez, et je dois remettre mon graphique en place. |
| |
Waouh, je peux juste glisser ça dedans. |
| |
Et voilà ! Ah, elle n'y est pas. Bon, il y a une solution : allez dans « Personnaliser ». Elle a été placée en arrière-plan car, normalement, quand on glisse une image, on glisse une image d'arrière-plan. |
| |
Il ne nous reste plus qu'à… dégager le passage pour que vous puissiez voir ce qui se passe… avancer. Voilà. |
| |
Et voilà. C'est devant. J'aimerais ajouter un peu de transparence, car c'est un peu trop lumineux à mon goût. |
| |
Alors, mettons 0,8. |
| |
Et maintenant, il ne nous reste plus qu'à le traîner dans le coin et c'est pratiquement terminé. |
| |
Bon, il y avait beaucoup de choses à faire et cela impliquait de nombreux fichiers. Récapitulons donc tous les fichiers utilisés. J'ai utilisé mon outil de création de diagrammes complexes pour générer les deux fichiers de carte nécessaires, ainsi que les fichiers de formes. J'ai pris une petite école et je l'ai empilée. |
| |
J'ai créé cette colonne pour définir le fichier de mappage qui devait pointer vers le fichier de nommage ayant le rôle de mappage. J'ai utilisé une référence de lien pour effectuer une jointure virtuelle avec le fichier « small school stacked ». |
| |
Ensuite, j'ai créé un graphique que je voulais transformer en tableau de données et l'enregistrer dans mon fichier health images.jmp. |
| |
Bien sûr, il a fallu relier virtuellement le tout à la petite école d'origine pour que je puisse réaliser le graphique. |
| |
Puis j'ai fait la même chose avec les températures océaniques des petites écoles, mon lien faisant référence aux images de santé. |
| |
J'ai simplement... j'ai converti ma colonne en fichier de formes et j'ai dessiné la légende du graphique que j'ai essayé de réaliser avec les températures océaniques, et j'ai utilisé... je l'ai simplement utilisée en la faisant glisser. |
| |
Voilà pour les démonstrations 2D que je voulais faire. Faisons une petite pause et plongeons maintenant dans le monde de la 3D, et même du web. |
| |
application. |
| |
D'accord. |
| |
Voici donc mon application web de création de nuages de points 3D. |
| |
Et ce que je vais vous montrer, c'est comment j'ai importé les données de JMP. |
| |
Mon application était basée sur le nuage de points 3D de JMP. Ceci est donc simplement un rappel de son aspect. |
| |
Et maintenant, j'ai une petite démo de ça. |
| |
En gros, il possède… Je vais vous montrer quelques-unes de ses fonctionnalités, à commencer par la possibilité de sélectionner différents ensembles de données. Voici l'ensemble de données sur les diamants. |
| |
Et bien sûr, ce dessin représente des points. C'est tout le principe. Ils sont dessinés avec cette petite forme sphérique, je vous expliquerai comment faire dans un instant. |
| |
Mais vous pouvez aussi le faire pivoter, comme dans JMP, zoomer, le déplacer d'avant en arrière. |
| |
Il y a aussi des infobulles. En bas à droite, j'ai dessiné des axes et une grille, et j'ai ajouté quelques éléments de personnalisation. Pas grand-chose. |
| |
Vous pouvez modifier l'arrière-plan, choisir la couleur des murs. Essayons d'y ajouter une touche de bleu. |
| |
Oui, ça ne vous plaira peut-être pas. Mais ce n'est qu'une démo. Vous pourrez ensuite modifier la taille des marqueurs. |
| |
C'est disponible sur le web. |
| |
Bon, alors quand j'ai commencé cette application, la première chose que je voulais savoir, c'était si elle fonctionnerait bien sur le web. Fonctionnerait-elle correctement sur mon iPhone ou mon iPad ? |
| |
Ces machines n'étant pas aussi puissantes que mon ordinateur de bureau, j'ai créé un modèle 3D intégré ainsi que trois ensembles de données aléatoires comportant un nombre croissant de points. Je suis ensuite allé utiliser… |
| |
25 000 était la valeur que je jugeais acceptable pour des appareils de faible consommation, mais on peut aller beaucoup plus haut avec des appareils de forte puissance. |
| |
Alors je me suis dit que je devrais essayer d'utiliser de vraies données, et j'ai trouvé le fameux jeu de données Iris, au format CSV (variables séparées par des virgules). |
| |
Et je l'ai importé. Mais j'ai dû écrire du code pour le convertir en mes structures internes. |
| |
Et je me suis dit : « JMP possède de nombreux ensembles de données. Autant les importer. » J'ai donc importé des données sur les voitures, les diamants et la cytométrie. La seule différence résidait dans la cytométrie, qui ne disposait pas d'une base de données très satisfaisante. |
| |
Il s'agissait d'une catégorie relative à l'utilisation de la couleur, et ils ont dû modifier ma demande pour qu'elle accepte un graphique sans couleur. |
| |
L'application est donc assez simple. Il n'y en a qu'une : une application web d'une seule page. Il y a donc un seul fichier HTML. J'ai quelques fichiers JavaScript et j'utilise quelques bibliothèques tierces, une police et une texture ; cette texture représente la sphère qui sert à dessiner les formes. |
| |
La technique que j'utilise, issue de l'industrie du jeu vidéo, est celle des particules ou des systèmes de particules. Elle est très courante dans les jeux de simulation et la visualisation 3D. On peut ainsi créer des effets impressionnants comme le feu, la fumée, les feux d'artifice et les nuages. |
| |
Et j'avais déjà travaillé un certain temps sur un moteur de jeu commercial par le passé, et ma responsabilité consistait en fait à prendre le système de particules et à l'améliorer. |
| |
J'avais donc déjà une certaine expérience dans ce domaine. Enfin, c'était dans l'univers C++, pas JavaScript. Mais comme j'ai travaillé un certain temps sur HTML5 interactif et JMP, je me suis dit qu'il était temps de voir si je pouvais m'y essayer. |
| |
J'ai combiné deux de mes passions pour créer une version web utilisant des systèmes de particules. J'ai eu de la chance : j'ai trouvé la bibliothèque Three.js. |
| |
Il gère le dessin 3D accéléré par le matériel, possède une excellente documentation et propose de nombreux exemples de code, notamment des systèmes de particules, ce qui a grandement facilité la création de mon application. |
| |
Et en fait, la partie la plus difficile pour moi a été de comprendre comment y importer les données depuis JMP. |
| |
Mais je vais... je partagerai le script pour cela. La seule chose que j'ai faite, c'est de veiller à ce que ces objets soient faciles à utiliser. |
| |
Dans mon application, j'ai créé un tableau d'objets JavaScript et j'ai ajouté une valeur minimale et maximale pour les colonnes numériques, ce qui m'évite de les calculer en JavaScript. JMP est d'ailleurs très performant pour ce genre de calculs. |
| |
Pour la catégorie, dans la colonne couleur, j'ai dû utiliser un dictionnaire de catégories. Concrètement, il s'agit d'une liste contenant les noms des catégories, et on accède à ces valeurs par un index commençant à zéro. Voilà comment fonctionne cette structure. |
| |
J'ai pensé qu'il serait intéressant de créer une interface utilisateur. Et en fait, c'était très simple. Je vais vous la montrer dans un instant. Il me suffit de limiter les colonnes à des valeurs numériques pour x, y et z. |
| |
Ensuite, limitez-la à une colonne catégorielle pour le rôle de la couleur. |
| |
Alors, jetons un coup d'œil à ce code. |
| |
Très bien, je vais tout d'abord vous donner un exemple d'ensemble de données très simple. |
| |
Ensuite, la configuration du dialogue s'est avérée très simple. J'ai utilisé la boîte de dialogue des colonnes et j'ai spécifié les valeurs souhaitées pour les colonnes numériques et la colonne de couleur, en veillant à ce que le type de modélisation soit catégoriel, c'est-à-dire ordinal et nominal. |
| |
Ensuite, je récupère les données des colonnes et je construis les objets JavaScript nécessaires. Voici les chaînes de caractères contenant les valeurs minimales et maximales. Et ceci consiste simplement à créer une chaîne de caractères à partir de ces objets. |
| |
Et s'il y a une colonne de couleur, je ferai la même chose. C'est un peu plus compliqué car je dois extraire ces chaînes de caractères et les insérer dans l'objet JavaScript. |
| |
Et enfin, il ne reste plus qu'à enregistrer ceci dans un fichier texte. |
| |
Alors essayons. |
| |
Bien sûr, je vais utiliser Big Class, donc le fichier sera bien petit. |
| |
Et |
| |
Je lance donc le script. |
| |
Il m'a ensuite demandé : « Que souhaitez-vous pour mon XYZ ? » J'ai déjà sélectionné la taille et le poids, et l'âge est une colonne numérique, je l'utiliserai donc également. Quant au sexe, c'est un bon choix pour la couleur. |
| |
Et voilà, c'est terminé. En fait, le résultat affiché ici m'indique où se trouve le fichier. |
| |
Il se trouve que j'ai ça sur la diapositive suivante. Alors, passons à celle-ci. |
| |
Alors, je parie que vous vous êtes toujours demandé à quoi ressemblerait une classe Big en JavaScript. Eh bien, la voici. Vous pouvez donc voir les trois |
| |
Les colonnes numériques contiennent les valeurs minimale et maximale, et la colonne « couleur » un dictionnaire de F et M pour les catégories ; 0 signifie femme et 1 signifie homme. Voilà pour conclure cette présentation ! J’espère qu’elle vous a plu. |
| |
Merci d'avoir regardé, et si vous avez des questions, n'hésitez pas à les poser. |
