Conférencier | Transcription |
| japo | Bonjour, bienvenue dans ma conférence. |
| La motivation de cette présentation était basée sur une discussion au sein de la communauté des utilisateurs JMP. Le Dr Anderson Mayfield est biologiste marin à la NOAA et à l'Université de Miami. |
| Il étudie la santé des coraux des récifs. Il a fait une présentation lors de notre épisode spécial Jour de la Terre de JMP On Air. Et il fait également une présentation à cette conférence. |
| Ainsi, dans ce message de la communauté des utilisateurs JMP, il a publié cette photo ici. Et si vous pouviez voir, il y a tous ces graphiques qui représentent des coraux ou des récifs coralliens. |
| et ils représentent plusieurs éléments de données, le tout dans un seul petit graphique, ce qui ressemble un peu à un jeu vidéo lorsque vous avez les statistiques des joueurs. |
| et ils tournent autour du joueur alors qu'il parcourt la scène. Alors maintenant, vous comprenez probablement pourquoi j'ai appelé mon exposé, vous savez, Qu'obtenez-vous lorsque vous combinez un jeu vidéo, un biologiste marin et JMP ? Alors passons à autre chose. |
| Ce dont je vais parler, ce sont ces solutions basées sur des jeux ou inspirées de jeux qui sont possibles dans JMP, notamment l'utilisation de scripts graphiques personnalisés, |
| cartes personnalisées. Et puis je vais parler d'une application de nuage de points 3D basée sur le Web que j'ai créée et de la façon dont j'ai intégré des ensembles de données JMP dans cette application. |
| Voici un exemple du script graphique. |
| Et voici un exemple d'utilisation de cartes personnalisées. Et voici mon application de nuage de points 3D. |
| Alors, commençons. Pour voir comment les scripts graphiques personnalisés sont utilisés, j'ai un petit exemple ici. |
| Et quand j'ouvre JMP et que j'exécute |
| ce petit graphique, et en fait, je vais en parler. |
| J'utilise cet ensemble de données fictives que j'ai créé à partir de zéro. Et il s'agit essentiellement d'une race de poissons allant de la Grande Barrière de Corail jusqu'à Sydney. |
| Donc, pour accéder à des scripts graphiques, ce que vous pouvez faire est d'aller les personnaliser. |
| Et puis ce petit bouton plus vous permet d'ajouter un nouveau script. Il commence vide, mais nous avons quelques exemples dans JMP. |
| J'aime donc le script polygone. C'est très simple. Tout ce que c'est, c'est qu'il dessine un triangle. Donc, si j’applique cela à mon graphique, vous pouvez y voir un triangle. |
| Et tout cela nous a pris trois lignes, en définissant la transparence, en définissant une couleur de remplissage, puis en dessinant le polygone. |
| Mais ce que nous recherchons, c'est comment intégrer cela dans un script ? Le moyen le plus simple de le savoir est donc d'appuyer sur le bouton de réponse. |
| et vous enregistrez le script dans la fenêtre de script. Et voici le scénario. Ça commence, voilà ma petite plateforme bivariée qui est lancée avec latitude et longitude. Et en bas, il y a une dépêche qui contient un script graphique d'ajout. |
| Et puis les trois lignes de l'échantillon. |
| Voici donc un exemple très simple d'utilisation d'un script graphique. |
| Maintenant, c'est un script graphique que je vais intégrer. Il dessine ces barres flottant sur chaque point. |
| Et ce que je fais en premier dans cette application, je règle également la transparence puis je dessine un arrière-plan de mon petit graphique. |
| un pour la faim, un pour la force et un pour la vitesse. |
| Maintenant, je vais vous montrer l'intégralité du script, car il repose sur d'autres choses. Cela s'appuie sur ces constantes que j'ai définies principalement pour faire les couleurs et en arrière-plan et quelques choses comme l'arrière-plan. |
| C'est ma barre de tirage de fonctions. Il prend une position, une longueur et une couleur. Cela peut donc être utilisé pour chaque barre. Donc si j'exécute ce script. |
| Voilà, vous avez le graphique avec le petit |
| des sortes de moniteurs de santé inspirés du jeu planant au-dessus de chaque poisson alors qu'ils nagent et descendent le courant est australien jusqu'à Sydney. |
| Cela va vous donner une idée, essentiellement étape par étape, du fonctionnement de cette fonction. Nous avons commencé avec juste un marqueur à l'écran, et pour chaque marqueur, nous définissons l'origine du pixel. |
| Et puis nous commençons à dessiner l’arrière-plan, mais cela prend quelques étapes. La première fois que nous définissons l’épaisseur du trait, vous ne voyez rien. |
| Ensuite, nous définissons la couleur, qui sera noire. Et puis nous effectuons un déplacement vers une ligne qui dessine l'arrière-plan et une ligne très épaisse. |
| Et pour chaque barre, nous allons définir la couleur de la barre, nous déplacer vers la position puis tracer une ligne vers. Ensuite, nous dessinons le fond, nous définissons sa couleur et il continue la barre. Et bien sûr, nous faisons cela également pour les deux autres lignes. |
| Vous pouvez désormais utiliser de nombreuses fonctions graphiques différentes. Et voici la section des fonctions graphiques de la référence de syntaxe JSL et vous pouvez créer ce que vous voulez. Alors allez-y. |
| Ensuite, je vais parler de l'utilisation de cartes personnalisées. |
| Excusez-moi. |
| Et pour utiliser des cartes personnalisées, vous fournissez essentiellement deux tableaux. Le premier tableau est une définition de toutes les formes que vous souhaitez utiliser. Et le second nomme les formes du tableau. |
| Et pour cette colonne de nom, ce que vous devez ajouter est essentiellement une propriété de colonne de rôle de carte, et elle doit être du type définition de nom de forme. Je vais vous montrer ça dans une minute. |
| Donc, juste pour prendre un exemple très simple, bien sûr, ce dont nous avons besoin, c'est de Big Class. Et je vais avoir un très simple. |
| une carte pour cela également qui n'a que deux rectangles. Laissez-moi ouvrir ces fichiers. |
| C'est donc une très petite carte, comme je l'ai dit. Et juste pour vous montrer ces coordonnées, j'ai un petit |
| script ici qui montre essentiellement les points. |
| Si je mets en surbrillance ces quatre premiers, c'est le rectangle du haut et les quatre suivants sont le rectangle du bas. |
| celui du haut est le poids, celui du bas est la taille. Et si vous regardez la propriété column, |
| c'est le rôle de la carte, la définition du nom de la forme. |
| Donc, une fois que nous aurons cette carte prête, nous pourrons ouvrir Big Class. |
| Nous ne pouvons pas le réutiliser directement. Ce que nous devons faire en premier, c'est prendre les colonnes de taille et de poids et les empiler. Alors on passe aux tables. Laissez-moi les empiler. |
| Et maintenant, j'ai un tableau dans lequel ces colonnes sont empilées. |
| Vous voyez que l'étiquette a une hauteur et un poids en alternance, et ce que nous devons faire pour la relier au fichier de carte est d'ajouter une autre propriété de colonne. |
| Celui-ci est tout en bas, encore une fois le rôle de la carte. Mais nous ne dirons pas définition du nom façonné, nous dirons utilisation du nom façonné et nous devons choisir le nom façonné. |
| fichier de carte, le nom du fichier de carte. |
| Et définissez également la colonne sur name. |
| Et puis nous avons terminé. Maintenant que nous l’avons, je peux l’utiliser dans un graphique. |
| Le graphique que nous recherchons utilise essentiellement la colonne d'étiquette pour la forme de la carte, qui définit les formes du haut et du bas, puis nous pouvons faire glisser cette 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 Big Class, mais nous voulons vraiment obtenir |
| un par élève. Si je fais glisser cela vers le rôle wrap, c'est un peu serré, mais je vais l'étaler en faisant un niveau par ligne et en le définissant sur 10. |
| Et voilà. Et c'est à peu près ce que je recherchais. Et ce graphique peut être utile |
| tout seul. |
| Alors faisons quelque chose d'un peu plus compliqué maintenant. |
| Eh bien, en fait, si vous faites quelque chose de plus compliqué, vous souhaiterez peut-être utiliser le complément de création de carte personnalisée. |
| Et c'est un excellent complément. Il vous permet de faire glisser une image puis de tracer dessus. |
| Et lorsque vous avez fini de tracer toutes les formes, vous cliquez sur Terminer avec des données aléatoires, et cela générera |
| les deux fichiers de formes dont vous avez besoin, ainsi qu'un ensemble de données aléatoires qui vous permettent de tester votre carte personnalisée. Et en voici un où je viens de faire quatre variables et une au centre. Il s'agit donc essentiellement d'une version carrée de ce que vous avez vu sur la diapositive originale que j'avais. |
| 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 a qualifié cela de tarte complexe. |
| Je ne sais pas si c'est un terme officiel mais j'ai décidé de construire ces choses avec un script. |
| Donc, ce que je voulais faire, c'est créer des fichiers de formes et m'assurer que j'obtenais ce que le médecin m'avait prescrit. Et c'était quatre formes avec quelque chose au centre. |
| Et puis j'ai pensé : « Eh bien, je suis programmeur. J'aime faire un peu plus et rendre un peu plus flexible. |
| J'ai donc pensé que peut-être certaines personnes voudraient faire la même chose, mais avec seulement deux variables plus une variable moyenne ou centrale ou plus. |
| Et j'ai pensé que ce serait peut-être bien de pouvoir aussi créer différentes formes comme un losange ou un carré. Donc je ne suis pas un génie. J'ai eu de la chance. Et Xan Gregg a en fait répondu à un message expliquant comment créer ce tracé polaire dans JMP. |
| Et voilà. |
| Nous y voilà et |
| Ils recherchaient une forme comme celle-ci, qui ressemblait énormément à ce dont j'avais besoin. |
| Ce que Xan a fait était vraiment génial. C'est un script flexible qui fait cela et génère ces coins autour d'un cercle, mais la seule chose qui manquait était le centre et aussi le nom des fichiers d'une manière particulière que je voulais faire. |
| Mais ce n'était pas trop difficile. Et c'est ce que fait mon script. Et quand vous lancez une tarte complexe, il y a la recette de cette tarte, vous ouvrez le fabricant de tarte complexe. Ensuite, vous ajoutez quelques ingrédients. Tout d’abord, vous devez indiquer le nombre de formes. |
| Et puis si vous allez le centrer, soit en haut, soit un peu sur le côté. |
| Ensuite, il y a une variable pour la douceur. |
| Et puis vous voudriez également fournir le rayon intérieur, que vous souhaitiez plus ou moins de remplissage, ainsi que le rayon extérieur. |
| Bien sûr, l'étape suivante consiste à exécuter le script et il générera |
| ces |
| fichiers de formes pour vous et effectuez également un exemple de test, tout comme le créateur de tarte personnalisé ou le complément de carte personnalisé. Voici donc un exemple de tarte complexe pour cinq et les formes sont de cinq |
| et la douceur à régler sur sept. Vous pourriez en utiliser cinq ou six et ce serait probablement toujours acceptable s'ils le sont. |
| dessiné vraiment petit. La taille n'a pas vraiment d'importance. Ce sont davantage le rayon intérieur relatif et le rayon extérieur qui comptent. Et c'est à peu près ce que voulait le Dr Mayfield, donc je m'en suis contenté de quatre pour le rayon intérieur et de neuf pour le rayon extérieur. |
| Voyons donc comment nous pouvons réellement utiliser ces choses. Tout comme nous l'avons fait avec la démo Big Class, nous allons devoir... nous allons devoir empiler les colonnes. Mais une chose différente est que je n'ai pas vraiment les variables de force et de santé dans mon fichier de forme. Ils sont en fait |
| dans le fichier de forme, ils sont nommés wedge 1, 2 3 et |
| centre. |
| Je vais donc devoir construire un |
| fichier qui sera |
| relier les deux ensemble. |
| Alors d'abord, j'ai cet exemple de petite école empilée, |
| ce que j'ai fait en empilant ces colonnes de santé, de forces et de vitesse. |
| Et voici le fichier de forme qui... le nom du fichier de forme que je vais utiliser. |
| Notez qu'il a une propriété de colonne |
| du rôle de la carte, |
| à droite, mapper la définition du rôle. |
| Et cela est nécessaire lorsque vous créez vos propres formes personnalisées. |
| Ainsi, le fichier lié, les colonnes de cartes à façonner, j'ai construit essentiellement en répertoriant les étiquettes contenues dans mon |
| fichier empilé. |
| Et puis dans une autre colonne, nom de la forme, j'ai répertorié les formes et les noms des formes. |
| Maintenant, il est important que le nom de la forme ici |
| avoir une propriété qui est un rôle de carte, mais celle-ci est l'utilisation du nom de forme. |
| Et cette colonne d'étiquette de données aura un ID de lien afin qu'elle puisse être virtuellement jointe à ma table empilée. |
| Alors maintenant que j'ai toutes ces tables installées, |
| la prochaine chose à faire est de créer un graphique. |
| Maintenant, ce sera similaire à ce que je faisais auparavant. La seule différence est qu'au lieu de simplement faire glisser l'étiquette vers la forme de la carte, j'utilise maintenant cette colonne de jointure virtuelle, je la fais glisser vers la forme de la carte et j'obtiens la forme que je veux. Ce que je dois faire ensuite, c'est ajouter les données à la colonne de couleur. |
| Et puis ajoutez le nom à envelopper. Et il y a tous mes poissons avec |
| un graphique pour chacun. Pour essayer d'obtenir le bon dégradé, je vais sur dégradé ici et c'est celui-ci ici. |
| Je veux m'assurer que le vert est bon, je vais donc inverser les couleurs. |
| Et voilà, nous l'avons. C'est le |
| carte utile sur elle-même, car vous pouvez regarder chaque poisson et voir comment il va. Mais je veux bien sûr faire un peu plus avec ça. |
| Ce que je veux faire, c'est pouvoir mettre ces images dans une info-bulle. |
| Pour ce faire, nous allons créer un tableau de données. |
| Rapportez le fichier que j'avais et ce graphique. |
| Donc, ce que cela fera ici, c'est que sous le triangle rouge, il y a une table de création de données. Et ce que cela fera produira un nouveau tableau de données |
| avec toutes ces images, et c'est vraiment utile, surtout si on y renvoie. Et je tournerais cela et le définirais comme identifiant de lien afin que je puisse le pointer à partir de mon simple petit fichier scolaire afin de pouvoir avoir chaque marqueur, trouver le graphique pour chaque personnage. |
| Très bien, donc j'ai ceci stocké dans un autre fichier et je vais ouvrir celui-là. Je l’ai appelé des 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 avec lequel j’ai commencé. |
| Maintenant, la première chose que vous devez faire pour que ces éléments apparaissent dans le |
| Le graphique consiste à définir cette colonne d'image, cette colonne virtuelle, |
| comme étiqueté. |
| Vous pouvez également le faire dans un graphique simple. |
| Nous avons donc déjà un exemple... eh bien, je vais l'ouvrir à nouveau. Pourquoi pas? Mon scénario de course, histoire de vous montrer que je repars de zéro. Mais depuis que j'ai étiqueté cette colonne, maintenant, lorsque je survole l'un de ces graphiques, vous obtenez un... les trois |
| des informations pour ce graphique et vous pouvez le faire et épingler n'importe quel nombre de ces caractères. |
| C'est donc une façon d'utiliser ces graphiques. |
| Une autre façon consiste à utiliser un marqueur. |
| Et les graphiques que vous obtiendrez flotteront sur les points et seront utilisés à la place des formes de losange que j'avais auparavant. |
| Je ramènerai ces images de santé, petite école, et je ramènerai même ce graphique. |
| Donc en ce moment, nous avons ces diamants. Afin de leur donner ces formes ici, |
| nous avons dû en ajouter encore un autre |
| badge à cette colonne de jointure virtuelle. Cela devient vraiment populaire, alors utilisez-le comme marqueur. Et donc un nouveau badge apparaît. Et derrière moi, |
| vous verrez que ces images ont été mises en scène. Un dernier détail, je n'aime pas trop ce blanc autour de l'image. Et cela est en fait intégré à l’image graphique. |
| Et une façon de m'en occuper est d'avoir un script qui trouvera cette zone blanche et définira le canal alpha pour qu'il les rende transparentes. Alors maintenant, nous avons des graphiques avec un joli |
| forme ronde, pas le fond carré. Une autre chose que vous voudrez peut-être faire est d’augmenter la taille du marqueur. |
| Et on peut aller jusqu'à 11 heures. |
| A quoi ça ressemble ? Cela ressemble à peu près à ce que j'avais ; 10 aurait probablement été mieux. Mais j'aime aller à 11 heures. D'accord, c'est donc |
| utiliser à partir du marqueur. Nous voulons faire un graphique un peu plus compliqué. Et c'est ce que recherchait le Dr Anderson Mayfield, c'est une carte thermique derrière les marqueurs. Et c'est assez compliqué, mais JMP peut gérer cela. C'est en fait un contour. |
| Donc, une chose que j'ai ici est une autre version de la petite école. Mais cette fois, j'ai la température de l'océan |
| en bas |
| et ils sont masqués afin qu'ils n'apparaissent pas comme de véritables points. |
| J'ai donc déjà construit des images pour celui-ci. |
| En fait, les mêmes images que celles que j'ai construites auparavant. |
| Et je vais commencer par |
| la fin ici pour que nous puissions réellement voir ce que je veux faire. Donc je veux essentiellement avoir ces graphiques |
| survolant le contour et quelques légendes ici qui montrent ce que sont les choses. |
| Cela ne devrait pas être trop difficile. Je vais commencer une partie du chemin avec une carte déjà placée et des lat longs déjà sur x et y. |
| Donc la première chose que je veux faire est d’ajouter un contour. |
| Et nous devons donner ce petit peu de couleur, donc je fais glisser le rôle temporaire sur le rôle de couleur et je vais ajuster le nombre de niveaux sur ce contour. |
| Changez un peu l'alpha et ajoutez un peu de douceur. |
| La prochaine chose que je veux faire est de le rendre un peu transparent. |
| Mettons un .6 là-dessus. |
| C'est à peu près la même chose que ce que j'avais avant. Et maintenant, pour ajouter les marqueurs, vous pouvez procéder de deux manières. Vous pouvez déplacer le clic sur les points ou simplement les faire glisser. Pour le faire glisser, |
| vous pouvez alors redéfinir la taille du marqueur, |
| faire ça en |
| allons ici et faisons autre chose et utilisons 10 cette fois. Je pense que 11 était juste un peu trop grand. Très bien, donc ça a l'air bien. C'est presque là. Nous voulons travailler sur cette légende. Comment pouvons-nous obtenir ces couleurs là-dedans ? Eh bien, nous avons déjà le rôle de santé. |
| Et que vous pouvez faire glisser ici jusqu'au coin, ajoutez simplement un deuxième rôle de couleur. Au début, cela gâche un peu votre graphique. |
| Nous pouvons nous en occuper. Le problème est que le contour n’a pas vraiment besoin d’utiliser le rôle de santé. Donc si nous désactivons cela, nous revenons à ce que nous voulons. |
| La prochaine chose que vous souhaitez faire est donc d'ajouter la couleur à la légende ici. Et nous pouvons simplement personnaliser cela à nouveau comme nous le faisions auparavant. |
| Nous allons en faire un peu plus, c'est le moment. Je veux avoir 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 à peu près à ça, donc presque terminé. Je veux juste l'embellir un peu plus. Il y a quelques points dans la légende que j'aimerais corriger. |
| Allez donc dans les paramètres de la légende et supprimez ces éléments qui ne semblent pas trop ajouter et déplacez la légende de la santé vers le haut. |
| Voilà, nous l'avons. Je pense donc que je corresponds à ce que je recherchais, du mieux que je peux. |
| Je peux donc me débarrasser de celui-là. Je ne crois pas que tout le monde ait besoin de ça. |
| Mais je veux en ajouter un peu plus. |
| Que diriez-vous d'ajouter cette légende, car ce n'était pas vraiment un moyen de savoir quelle zone de ce graphique faisait quoi, vous connaissez la faim, la vitesse, la force et la santé. Heureusement nous avons ça |
| fichier de mappage. Cela va du nom de la colonne à la forme. |
| Et je vais juste ouvrir cela pendant une seconde. |
| Vous pouvez donc voir ici que j'ai étiqueté toutes les lignes ainsi que la colonne d'étiquette de données. Cela signifie que lorsque vous créez un graphique, |
| tout sera étiqueté. Donc celui-ci est vraiment simple. Il vous suffit de prendre le nom de la forme et de le faire glisser dans le rôle de carte et nous en avons vraiment fini avec ce graphique. |
| Donc, si je veux intégrer cela à ma scène, la meilleure façon de le faire est simplement de le sélectionner, du signe plus, puis de le copier. |
| Ensuite, vous ouvrez une application d'édition d'image et l'enregistrez sur le disque. Et bien sûr, je l'ai déjà fait. Alors je vais |
| montrez-le une fois que vous l'avez, et je dois ramener mon graphique à nouveau, |
| wow, je peux juste glisser ça dedans. |
| Et voilà. Oh, ce n'est pas là. Eh bien, il existe donc un moyen de le trouver. Allez dans Personnaliser, il l'a déposé en arrière-plan car normalement, lorsque vous faites glisser une image, vous faites glisser une image d'arrière-plan. |
| Donc tout ce que nous devons faire maintenant... écartons cela pour que vous puissiez voir ce qui se passe... c'est passer au premier plan. Ça vient |
| et voilà. C'est à l'avant. Et j'aimerais en fait ajouter un peu de transparence à ce sujet car c'est un peu trop brillant à mon goût. |
| Alors mettons 0,8. |
| Et maintenant, il ne nous reste plus qu'à le glisser dans le coin et nous en avons pratiquement fini avec ça. |
| D'accord, donc il y en avait beaucoup et cela impliquait beaucoup de dossiers. Résumons donc tous les fichiers qui ont été utilisés. J'ai utilisé mon moule à tarte complexe pour générer les deux fichiers de carte nécessaires, les fichiers de forme. J'ai pris une petite école et je l'ai empilé. |
| J'ai créé cette colonne pour façonner le fichier de mappage qui devait pointer vers le fichier de nom avec le rôle de mappage. J'ai utilisé une référence de lien pour effectuer une jointure virtuelle vers une petite école empilée. |
| Ensuite, j'ai créé un graphique que je voulais transformer en tableau de données et l'enregistrer dans mon fichier images.jmp de santé. |
| Bien sûr, il a fallu que cela soit virtuellement relié à la petite école d'origine pour que je puisse réaliser le graphique avec cela. |
| Et puis j'ai fait la même chose avec les petites températures océaniques scolaires, mon lien faisant référence aux images de santé. |
| J'ai seulement... J'ai pris ma colonne pour créer un fichier de forme et j'ai dessiné la légende du graphique que j'ai essayé de faire avec les températures de l'océan et j'ai utilisé... Je l'utilise simplement en le faisant glisser essentiellement. |
| Voilà donc pour les démonstrations 2D que je voulais faire. Prenons une petite pause et maintenant nous allons entrer dans le monde de la 3D, et même du web |
| application. |
| D'accord. |
| Voici donc mon application Web de nuage de points 3D. |
| Et ce que je vais vous montrer, c'est comment j'ai intégré les données de JMP. |
| Mon application était basée sur le nuage de points 3D de JMP. C'est donc juste pour vous rappeler à quoi cela ressemble. |
| Et maintenant, j'en ai une petite démo. |
| Donc, fondamentalement, il y avait... Je vais vous montrer certaines fonctionnalités, en commençant 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 montre des points. C'est toute l'idée. Et ils sont dessinés avec cette petite forme de boule, je vais vous expliquer comment cela se fait dans une minute. |
| Mais vous pouvez également le faire pivoter, tout comme dans JMP, vous pouvez zoomer, le déplacer d'avant en arrière. |
| Et puis il y a aussi des étiquettes de survol. Vous pouvez voir ce coin inférieur droit, je dessine des axes et une grille et j'ajoute un peu de personnalisation. Pas trop. |
| Vous pouvez changer l'arrière-plan, définir la couleur des murs. Voyons si nous pouvons lui donner une petite couleur bleue. |
| Ouais, peut-être que ce n'est pas à ton goût. Mais ce n'est qu'une démo. Et puis vous pouvez modifier la taille des marqueurs. |
| C'est sur le Web. |
| D'accord, alors quand j'ai lancé cette application, la première chose que je voulais faire était de savoir si elle pourrait fonctionner sur le Web ? Est-ce que cela fonctionnerait bien sur mon iPhone ou mon iPad ? |
| Parce que ces machines ne sont pas aussi puissantes que mon ordinateur de bureau. J'ai donc créé 3D intégrés ou trois ensembles de données aléatoires d'un nombre croissant de points. Je suis allé utiliser un... |
| Je pensais que 25 000 valait la peine d'être essayé sur des appareils à faible consommation, mais vous pouvez aller beaucoup plus haut en fait avec des appareils à forte puissance. |
| Ensuite, j'ai pensé, eh bien, je devrais essayer d'apporter des données réelles et j'ai trouvé le fameux ensemble de données sur l'iris, et il était au format CSV, variable séparée par des virgules. |
| Et je l'ai introduit. Mais j'ai dû écrire du code juste pour le convertir dans mes structures internes. |
| Et je me suis dit : eh bien, JMP possède de nombreux ensembles de données. Je préfère simplement les apporter. J'ai donc apporté des voitures, des diamants et de la cytométrie. La seule différence était la cytométrie, elle n'avait pas vraiment un bon |
| catégorie pour l'utilisation de la couleur et ils ont en fait dû modifier mon application pour accepter un graphique qui n'avait aucune couleur. |
| L'application est donc assez simple. Il n'y en a qu'une... c'est une application Web d'une page. Il y a donc un fichier HTML. J'ai quelques fichiers JavaScript et j'utilise quelques bibliothèques tierces, une police et une texture, et la texture est la boule utilisée pour les formes. |
| La technique que j'utilise dans l'industrie du jeu vidéo est donc celle des particules ou des systèmes de particules. Ils sont très couramment utilisés pour les jeux de simulation et la visualisation 3D. Vous pouvez créer des effets sympas comme du feu, de la fumée, des feux d'artifice et des nuages. |
| Et j'avais passé du temps à travailler sur un moteur de jeu commercial dans le passé et ma responsabilité consistait en fait à prendre le système de particules et à l'améliorer. |
| J'ai donc déjà eu une certaine expérience avec cela. Euh, c'était dans le monde C++, pas dans le monde JavaScript. Mais comme je travaille sur HTML5 interactif et JMP depuis un bon moment, j'ai pensé qu'il était temps de voir si je pouvais prendre |
| deux de mes passions et les marier et proposer une version Web de l'utilisation des systèmes de particules. J'ai eu de la chance. J'ai trouvé cette bibliothèque, Three.js. |
| Il effectue un dessin 3D accéléré par le matériel et dispose d'une excellente documentation et il existe de nombreux exemples de code, y compris des systèmes de particules, ce qui a rendu assez facile la création de mon application. |
| Et en fait, la partie la plus difficile pour moi a été de trouver comment y intégrer des données depuis JMP. |
| Mais j'aurai... Je partagerai le script pour ça. La seule chose que j'ai faite, c'est de m'assurer de faciliter l'utilisation de ces objets. |
| dans ma candidature. Donc, une chose que j'ai faite a été de créer un tableau d'objets JavaScript et, pour les colonnes numériques, d'ajouter un minimum et un maximum, donc je n'ai pas à calculer cela en JavaScript. Et bien sûr, JMP est vraiment doué pour calculer ce genre de choses. |
| Euh, pour la catégorie, pour la colonne de couleur, ce que je devais faire, c'est utiliser comme dictionnaire de catégories. Et fondamentalement, tout cela est, les noms des catégories dans une liste, puis pointent simplement vers ces valeurs par un index de base zéro. Voilà donc comment fonctionne cette structure. |
| J'ai pensé que ce serait bien de créer une interface utilisateur. Et en fait, c’était une chose facile à faire. Et je vais vous montrer cela dans une seconde. Mais fondamentalement, tout ce que je dois faire est de le limiter aux colonnes numériques pour x, y et z. |
| Et puis limitez-le à une colonne catégorielle pour le rôle de couleur. |
| Jetons donc un œil à ce code. |
| Très bien, je donne donc tout d’abord un exemple d’un ensemble de données très simple. |
| Et puis le dialogue était vraiment facile à faire. J'utilise le dialogue de colonne et j'ai spécifié ce que je voulais pour les colonnes numériques et ce que je voulais pour la colonne de couleur, et je me suis assuré que le type de modélisation était catégorique donc son ordinal et nominal. |
| Ensuite, je prends les données des colonnes et je crée les objets JavaScript dont j'ai besoin. Voici les chaînes min et max. Et il s’agit simplement de construire une chaîne de ces objets. |
| Et puis s’il y a une colonne de couleurs, je ferai pareil. 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, tout ce qu’il a à faire est de sauvegarder cela dans un fichier texte. |
| Alors essayons cela. |
| Bien sûr, je vais utiliser Big Class, c'est donc un joli petit fichier. |
| Et |
| alors j'exécute le script. |
| Et il m'a demandé : Qu'est-ce que je veux pour mon XYZ. J'ai déjà sélectionné une taille et un poids et l'âge est une colonne numérique, donc je vais l'utiliser également et le sexe est un bon choix pour la couleur. |
| Et puis nous avons terminé. Et en fait, le résultat ici me dit où se trouve le fichier. |
| Il se trouve que j'ai cela sur la diapositive suivante. Alors allons-y. |
| Je parie que vous vous êtes toujours demandé à quoi ressemblerait Big Class en JavaScript. Et voilà. Et ainsi tu peux voir les trois |
| colonnes numériques avec votre min et votre max, puis la colonne de couleur a ce dictionnaire de F et M pour les catégories, et le zéro, cela signifie femme et celui signifie homme. Eh bien, c'est ma conclusion passionnante à cette conférence, j'espère que vous l'avez apprécié. |
| Merci donc d'avoir regardé, et si vous avez des questions, n'hésitez pas à les poser. |
