| Oratore |
Trascrizione |
| jopower |
Ciao, benvenuti al mio intervento. |
| |
L'idea per questa presentazione è nata da una discussione nella community di utenti di JMP. Il Dott. Anderson Mayfield è un biologo marino presso la NOAA e l'Università di Miami. |
| |
Studia la salute dei coralli delle barriere coralline. Ha partecipato come relatore alla nostra puntata speciale di JMP On Air dedicata alla Giornata della Terra. E interverrà anche a questa conferenza. |
| |
Quindi in questo post della community di utenti JMP, ha pubblicato questa immagine. E se potete vedere, ci sono tutti questi elementi grafici che rappresentano coralli o barriere coralline. |
| |
e rappresentano più dati, tutti in un piccolo grafico, che è un po' come un videogioco quando hai le statistiche del giocatore |
| |
e volteggiano intorno al giocatore mentre corre per la scena. Quindi ora probabilmente avete capito perché ho intitolato la mia presentazione "Cosa succede quando si combinano un videogioco, un biologo marino e JMP?". Bene, andiamo avanti. |
| |
Quello di cui parlerò è questa soluzione basata sui giochi, o ispirata ai giochi, che è possibile in JMP, incluso l'utilizzo di script grafici personalizzati, |
| |
mappe personalizzate. E poi parlerò di un'applicazione web 3D per la creazione di grafici a dispersione che ho sviluppato e di come ho integrato i set di dati JMP in tale applicazione. |
| |
Ecco un esempio di script grafico. |
| |
Ed ecco un esempio di utilizzo di mappe personalizzate. Ed ecco la mia applicazione per grafici a dispersione 3D. |
| |
Iniziamo. Per vedere come vengono utilizzati gli script grafici personalizzati, ecco un piccolo esempio. |
| |
E quando apro JMP ed eseguo |
| |
questa piccola grafica, e in effetti, ne parlerò. |
| |
Utilizzo questo set di dati fittizio che ho creato da zero. In pratica, riguarda una gara di pesci che si estende dalla Grande Barriera Corallina fino a Sydney. |
| |
Quindi, per accedere agli script grafici, puoi andare su Personalizza. |
| |
E poi questo piccolo pulsante con il segno più permette di aggiungere un nuovo script. Inizialmente è vuoto, ma abbiamo alcuni esempi in JMP. |
| |
Mi piace lo script per i poligoni. È molto semplice. In pratica, disegna un triangolo. Quindi, se lo applico al mio grafico, potete vedere un triangolo al suo interno. |
| |
E tutto ciò ci è bastato fare tre linee: impostare la trasparenza, impostare un colore di riempimento e poi disegnare il poligono. |
| |
Ma quello che ci interessa è: come si fa a incorporare tutto questo in uno script? Il modo più semplice per scoprirlo è premere il pulsante "Rispondi". |
| |
e salvi lo script nella finestra degli script. Ed ecco lo script. Inizia con la mia piccola piattaforma bivariata che viene avviata con latitudine e longitudine. E più in basso, c'è un dispatch che ha uno script per aggiungere grafica. |
| |
E poi le tre righe del campione. |
| |
Ecco quindi un esempio molto semplice di utilizzo di uno script grafico. |
| |
Ora, questo è uno script grafico che sto per incorporare. Disegna queste barre che fluttuano sopra ogni punto. |
| |
E la prima cosa che faccio in questa applicazione è impostare anche la trasparenza e poi disegnare lo sfondo della mia piccola grafica. |
| |
uno per la fame, uno per la forza e uno per la velocità. |
| |
Ora vi mostrerò l'intero script, perché si basa su altre cose. Si basa su queste costanti che ho impostato principalmente per fare i colori e nello sfondo e alcune cose come lo sfondo come. |
| |
Questa è la mia funzione di disegno della barra. Prende una posizione, una lunghezza e un colore. Quindi può essere utilizzata per ogni barra. Quindi se eseguo quello script. |
| |
Ecco, hai la grafica con il piccolo |
| |
Una sorta di monitor per la salute, ispirato ai videogiochi, che aleggia sopra ogni pesce mentre nuota e sfreccia lungo la corrente dell'Australia orientale verso Sydney. |
| |
Questo vi darà un'idea, fondamentalmente una spiegazione passo passo di come funziona quella funzione. Siamo partiti da un semplice indicatore sullo schermo e, per ogni indicatore, abbiamo impostato l'origine in pixel. |
| |
E poi iniziamo a disegnare lo sfondo, ma ci vogliono alcuni passaggi. La prima volta che impostiamo lo spessore della linea, in realtà non si vede ancora nulla. |
| |
Quindi impostiamo il colore, che sarà il nero. E poi eseguiamo uno spostamento e una linea che disegna lo sfondo con una linea molto spessa. |
| |
E per ogni barra, impostiamo il colore della barra, ci spostiamo nella posizione e poi tracciamo una linea. Quindi disegniamo lo sfondo, ne impostiamo il colore e la barra continua. E ovviamente facciamo lo stesso anche per le altre due linee. |
| |
Ora puoi utilizzare molte funzioni grafiche diverse. Ecco la sezione sulle funzioni grafiche del riferimento alla sintassi JSL, dove puoi creare tutto ciò che desideri. Quindi, dacci dentro! |
| |
Successivamente, parlerò dell'utilizzo delle mappe personalizzate. |
| |
Mi scusi. |
| |
Per utilizzare mappe personalizzate, è necessario fornire due tabelle. La prima tabella definisce tutte le forme che si desidera utilizzare, mentre la seconda elenca i nomi delle forme presenti nella tabella. |
| |
Per quanto riguarda la colonna del nome, in pratica quello che devi aggiungere è una proprietà di colonna "ruolo mappa", che deve essere del tipo "definizione nome forma". Te lo mostrerò tra un minuto. |
| |
Quindi, giusto per fare un esempio molto semplice, ovviamente, ciò di cui abbiamo bisogno è una Classe Grande. E ne farò uno molto semplice. |
| |
Ho anche una mappa che contiene solo due rettangoli. Lasciatemi aprire quei file. |
| |
Quindi è una mappa molto piccola, come ho detto. E giusto per mostrarti queste coordinate, ho un piccolo |
| |
Ecco uno script che mostra i punti principali. |
| |
Se evidenzio questi primi quattro, quello sarà il rettangolo superiore e i successivi quattro saranno il rettangolo inferiore. |
| |
quello in alto è il peso, quello in basso è l'altezza. E se guardi la proprietà della colonna, |
| |
Si tratta del ruolo della mappa, della definizione del nome della forma. |
| |
Quindi, una volta pronta questa mappa, possiamo aprire Big Class. |
| |
Non possiamo riutilizzarlo direttamente. La prima cosa da fare è prendere le colonne di altezza e peso e impilarle. Quindi andiamo alle tabelle. Lasciatemi impilarle. |
| |
E ora ho una tabella con queste colonne impilate. |
| |
Come potete vedere, l'etichetta ha altezza e peso alternati, e quello che dobbiamo fare per collegarla al file della mappa è aggiungere un'altra proprietà di colonna. |
| |
Questo è proprio qui in basso, di nuovo il ruolo della mappa. Ma non diremo definizione del nome sagomato, diremo utilizzo del nome sagomato e dobbiamo scegliere il |
| |
file mappa, il nome del file mappa. |
| |
E imposta anche il nome della colonna. |
| |
E poi abbiamo finito. Ora che abbiamo questo, posso effettivamente usarlo in un grafico. |
| |
Il grafico che stiamo cercando di ottenere utilizza fondamentalmente la colonna delle etichette per la forma della mappa, che imposta le forme superiore e inferiore, e poi possiamo trascinare la colonna dei dati che contiene tutti i dati |
| |
nel ruolo del colore. Ed ecco fatto, questo è un riepilogo di tutti gli studenti della Big Class, ma vogliamo davvero ottenere |
| |
uno per studente. Se lo trascino sul rotolo, è un po' stretto, ma lo distribuirò facendo livelli per riga e impostandolo a 10. |
| |
Ecco fatto. Ed è proprio quello che volevo ottenere. E questo grafico può essere utile. |
| |
da solo. |
| |
Ora proviamo a fare qualcosa di un po' più complicato. |
| |
Beh, in realtà, se stai facendo qualcosa di più complesso, potresti voler utilizzare il componente aggiuntivo per la creazione di mappe personalizzate. |
| |
E questa è un'ottima aggiunta. Permette di trascinare un'immagine e poi ricalcarla. |
| |
E quando hai finito di ricalcare tutte le forme, fai clic su Termina con dati casuali e verrà generato |
| |
I due shapefile necessari, oltre a un set di dati casuali che ti permette di testare la tua mappa personalizzata. Eccone una in cui ho usato solo quattro variabili e una al centro. Quindi è fondamentalmente una versione quadrata di quella che hai visto nella diapositiva originale che avevo. |
| |
Non era esattamente quello che cercavamo. Volevamo qualcosa di rotondo, e credo sia stato il dottor Mayfield a definirla torta complessa. |
| |
Non so se sia un termine ufficiale, ma ho deciso di costruire queste cose usando uno script. |
| |
Quindi quello che volevo fare era creare dei file di forma e assicurarmi di ottenere ciò che il dottore aveva prescritto. E cioè quattro forme con qualcosa al centro. |
| |
E poi ho pensato: beh, sono un programmatore. Mi piacerebbe fare qualcosa in più e rendere le cose un po' più flessibili. |
| |
Quindi ho pensato che forse ad alcuni potrebbe interessare fare la stessa cosa, ma con solo due variabili più una variabile di media o centrale, o anche di più. |
| |
E ho pensato che forse sarebbe stato bello poter creare anche forme diverse, come un rombo o un quadrato. Insomma, non sono un genio. Ho avuto fortuna. E Xan Gregg ha risposto a un post che chiedeva come creare un grafico polare in JMP. |
| |
Ed ecco che arriva. |
| |
Eccoci qui e |
| |
Stavano cercando una forma come questa, che assomiglia moltissimo a ciò di cui avevo bisogno. |
| |
Quello che ha fatto Xan è stato davvero fantastico. È uno script flessibile che fa proprio questo, generando questi spicchi attorno a un cerchio, ma l'unica cosa che mancava era il centro e anche la denominazione dei file nel modo particolare che desideravo. |
| |
Ma non era troppo difficile. Ed è proprio quello che fa il mio script. Quando si esegue una torta complessa, c'è la ricetta per questa torta, si apre il creatore di torte complesse. Poi si aggiungono alcuni ingredienti. Prima di tutto, bisogna specificare il numero di forme. |
| |
E poi se centrarlo, in alto o leggermente di lato. |
| |
Poi c'è una variabile per la fluidità. |
| |
Dovrete quindi specificare anche il raggio interno, se desiderate un riempimento maggiore o minore, e il raggio esterno. |
| |
Naturalmente, il passo successivo è eseguire lo script e genererà |
| |
questi |
| |
file di forma per te e fai anche un test di esempio, proprio come il creatore di torte personalizzato o il componente aggiuntivo mappa personalizzato. Quindi ecco un esempio di torta complessa per cinque e le forme sono cinque |
| |
e la fluidità da impostare a sette. Potresti usare cinque o sei e probabilmente andrebbe comunque bene se fossero |
| |
Disegnato in scala molto piccola. Le dimensioni non contano davvero. Ciò che conta di più è il raggio interno e il raggio esterno relativi. E questo è più o meno ciò che il dottor Mayfield aveva in mente, quindi ho mantenuto quattro per il raggio interno e nove per il raggio esterno. |
| |
Vediamo quindi come possiamo effettivamente usare queste cose. Proprio come abbiamo fatto con la demo della Classe Grande, dovremo... dovremo impilare le colonne. Ma una cosa diversa è che non ho davvero le variabili di forza e salute nel mio shapefile. In realtà sono |
| |
nel file shape, sono denominati cuneo 1, 2, 3 e |
| |
centro. |
| |
Quindi dovrò costruire un |
| |
file che sarà |
| |
collega i due insieme. |
| |
Quindi, per prima cosa, ho questo piccolo esempio scolastico impilato, |
| |
cosa che ho fatto sovrapponendo le colonne di salute, forza e velocità. |
| |
Ed ecco il file shape che... il nome del file shape che userò. |
| |
Nota che ha una proprietà di colonna |
| |
ruolo della mappa, |
| |
Giusto, definizione del ruolo nella mappa. |
| |
E questo è necessario quando si creano forme personalizzate. |
| |
Quindi il file collegato, le colonne delle mappe per dare forma, l'ho costruito fondamentalmente elencando le etichette all'interno del mio |
| |
file impilato. |
| |
E poi in un'altra colonna, nome della forma, ho elencato le forme con i relativi nomi. |
| |
Ora, è importante che il nome della forma qui |
| |
esiste una proprietà che è il ruolo della mappa, ma questa è l'uso del nome della forma. |
| |
E questa colonna di etichette dati avrà un ID di collegamento in modo che possa essere virtualmente collegata alla mia tabella impilata. |
| |
Ora che ho sistemato tutti questi tavoli, |
| |
La prossima cosa da fare è costruire un grafico. |
| |
Ora, sarà simile a quello che ho fatto prima. L'unica differenza è che invece di trascinare semplicemente l'etichetta verso il basso sulla forma della mappa, ora utilizzo questa colonna di unione virtuale, la trascino verso il basso sulla forma della mappa ed ecco la forma che desidero. Quello che devo fare ora è aggiungere i dati alla colonna del colore. |
| |
E poi aggiungi il nome all'involucro. E ci sono tutti i miei pesci con |
| |
un grafico per ognuno. Per cercare di ottenere la sfumatura giusta, vado su sfumatura qui ed è proprio questa. |
| |
Voglio assicurarmi che il verde sia perfetto, quindi invertirò i colori. |
| |
Ed ecco fatto. Questo è il |
| |
È una mappa utile di per sé, perché permette di osservare ogni singolo pesce e vedere in che condizioni si trova. Ma ovviamente vorrei sfruttarla un po' di più. |
| |
Quello che vorrei fare è poter inserire quelle immagini in un tooltip. |
| |
Per fare ciò, lo trasformeremo in una tabella di dati. |
| |
Riportami il file che avevo e quell'immagine. |
| |
Quindi quello che succederà qui è che, sotto i triangoli rossi, c'è una tabella dati. E quello che succederà produrrà una nuova tabella dati |
| |
con tutte queste immagini, ed è davvero utile, soprattutto se lo colleghiamo. E lo trasformerei e lo imposterei come ID di collegamento in modo da poterlo indicare dal mio semplice file scolastico in modo da poter avere ogni indicatore, trovare il grafico per ogni personaggio. |
| |
Bene, in realtà ho questo file memorizzato in un altro file e ora lo aprirò. L'ho chiamato "immagini sanitarie". |
| |
Quindi non ne abbiamo più bisogno. |
| |
E non abbiamo più bisogno del file impilato. |
| |
Ma ciò di cui abbiamo bisogno è proprio l'esempio della piccola scuola da cui sono partito. |
| |
Ora la prima cosa che devi fare per far sì che questi vengano visualizzati nel |
| |
il grafico serve a impostare quella colonna immagine, quella colonna virtuale, |
| |
come indicato sull'etichetta. |
| |
È possibile farlo anche con un semplice grafico. |
| |
Quindi abbiamo già un esempio... beh, lo riaprirò. Perché no? Il mio script di gara, giusto per mostrarti che sto partendo da zero. Ma dato che ho etichettato questa colonna, ora quando passo il mouse sopra uno di questi grafici, ottieni... i tre |
| |
elementi informativi per questo grafico e puoi farlo e fissare un numero qualsiasi di questi personaggi. |
| |
Ecco un modo in cui è possibile utilizzare questi elementi grafici. |
| |
Un altro modo è quello di usare come marcatore. |
| |
E la grafica che otterrete fluttuerà sopra i punti e verrà utilizzata al posto delle forme a diamante che avevo prima. |
| |
Riporterò quelle immagini sulla salute, sulla piccola scuola e riporterò anche quella grafica. |
| |
Quindi, adesso abbiamo questi diamanti. Per trasformarli in queste forme qui, |
| |
abbiamo dovuto aggiungerne un altro |
| |
badge per questa colonna di unione virtuale. Sta diventando davvero popolare, quindi usalo come marcatore. E così appare un nuovo badge. E dietro di me, |
| |
Vedrete che queste immagini sono state inserite nella scena. Un ultimo dettaglio: non mi piace molto questo sfondo bianco intorno all'immagine. Ed è in realtà integrato nel grafico. |
| |
E un modo in cui posso occuparmene è, c'è uno script che troverà quell'area bianca e imposterà il canale alfa in modo che la renda trasparente. Quindi ora abbiamo grafici con un bel |
| |
forma rotonda, non lo sfondo quadrato. Un'altra cosa che potresti fare è aumentare la dimensione del marcatore. |
| |
E possiamo arrivare fino a 11. |
| |
Come ti sembra? È più o meno come quello che avevo; 10 probabilmente sarebbe stato meglio. Ma mi piace andare a 11. Okay, quindi è così. |
| |
usiamo il marker. Vogliamo creare un grafico un po' più complesso. Ed è proprio questo che il Dr. Anderson Mayfield voleva ottenere: una mappa di calore dietro i marker. È piuttosto complicato, ma JMP può gestirlo. In realtà si tratta di una curva di livello. |
| |
Quindi una cosa che ho qui è un'altra versione di piccola scuola. Ma questa volta, ho le temperature dell'oceano. |
| |
giù in fondo |
| |
e sono nascosti in modo che non vengano visualizzati come punti effettivi. |
| |
Quindi ho già creato le immagini per questo. |
| |
Le stesse immagini, in realtà, che avevo creato in precedenza. |
| |
E inizierò con |
| |
la fine qui così possiamo effettivamente vedere cosa sto cercando di ottenere. Quindi in pratica voglio avere questa grafica |
| |
Sospeso sopra il contorno e un paio di legende che mostrano cosa sono le cose. |
| |
Non dovrebbe essere troppo difficile. Inizierò con una mappa già posizionata e le coordinate di latitudine e longitudine già impostate sugli assi x e y. |
| |
Quindi la prima cosa che voglio fare è aggiungere un contorno. |
| |
E dobbiamo aggiungere un po' di colore, quindi trascino il ruolo temporaneo sul ruolo del colore e regolo il numero di livelli su questo contorno. |
| |
Modifica leggermente il canale alfa e aggiungi un po' di morbidezza. |
| |
La prossima cosa che vorrei fare è renderlo un po' trasparente. |
| |
Aggiungiamo uno 0,6 a questo. |
| |
È più o meno lo stesso di quello che avevo prima. E ora per aggiungere i marcatori, ci sono due modi per farlo. Puoi fare clic tenendo premuto Maiusc sui punti oppure puoi semplicemente trascinarli. Per trascinarli, |
| |
quindi puoi impostare di nuovo la dimensione del marcatore, |
| |
facendo ciò |
| |
Andiamo qui e facciamo altro e usiamo 10 questa volta. Penso che 11 fosse un po' troppo grande. Bene, sembra a posto. Ci siamo quasi. Vogliamo lavorare su questa legenda. Come inseriamo questi colori? Beh, abbiamo già il ruolo salute. |
| |
E che puoi trascinare proprio qui nell'angolo, basta aggiungere un secondo colore. Inizialmente scombina un po' il grafico. |
| |
Possiamo occuparcene. Il problema è che il contorno non ha realmente bisogno di utilizzare il ruolo salute. Quindi, se lo disabilitiamo, torniamo a ciò che vogliamo. |
| |
Quindi, la prossima cosa da fare è aggiungere il colore alla legenda. E possiamo personalizzarla di nuovo come abbiamo fatto prima. |
| |
Questa volta faremo qualcosa in più. Voglio avere quattro etichette. |
| |
Voglio che inizi alle cinque e arrivi fino a |
| |
20. |
| |
Oh, volevo invertire anche i colori. |
| |
Ecco fatto, sembra quasi perfetto, quindi abbiamo quasi finito. Voglio solo abbellirlo un po' di più. Ci sono un paio di cose nella legenda che vorrei sistemare. |
| |
Quindi vai alle impostazioni della legenda e rimuovi questi elementi che non sembrano aggiungere molto e sposta la legenda della salute in alto. |
| |
Ecco fatto. Quindi penso di aver raggiunto, per quanto possibile, l'obiettivo che mi ero prefissato. |
| |
Quindi posso sbarazzarmi di quello. Non credo che tutti ne abbiano più bisogno. |
| |
Ma vorrei aggiungere qualcos'altro. |
| |
Che ne dici di aggiungere questa legenda, perché non era un modo chiaro per capire quale area di questo grafico rappresentasse cosa, tipo fame, velocità, forza e salute. Per fortuna abbiamo questo |
| |
file di mappatura. Collega il nome della colonna alla forma. |
| |
E ora lo aprirò per un secondo. |
| |
Quindi qui puoi vedere che ho etichettato tutte le righe e ho etichettato anche la colonna delle etichette dei dati. Ciò significa che quando crei un grafico, |
| |
Sarà tutto etichettato. Quindi questo è davvero semplice. Basta prendere il nome della forma e trascinarlo nel ruolo della mappa e abbiamo finito con quel grafico. |
| |
Quindi, se voglio inserirlo nella mia scena, il modo migliore per farlo è selezionarlo, cliccare sul segno più e poi copiarlo. |
| |
Quindi apri un'applicazione di fotoritocco e la salvi su disco. E ovviamente, l'ho già fatto. Quindi ora lo farò |
| |
mostralo una volta che lo avrai, e devo riportare indietro la mia grafica, |
| |
Wow, posso semplicemente trascinarlo dentro. |
| |
Ed eccola. Oh, non c'è. Beh, c'è un modo per trovarla. Vai su Personalizza, l'ha posizionata sullo sfondo perché normalmente quando trascini un'immagine, trascini anche un'immagine di sfondo. |
| |
Quindi tutto quello che dobbiamo fare ora...spostiamo questo così potete vedere cosa sta succedendo...è andare avanti. Eccolo che arriva |
| |
Ed ecco fatto. È in primo piano. E vorrei aggiungere un po' di trasparenza perché è un po' troppo luminoso per i miei gusti. |
| |
Quindi mettiamo 0,8. |
| |
E ora non ci resta che trascinarlo nell'angolo e avremo praticamente finito. |
| |
Okay, quindi c'era molto e coinvolgeva molti file. Quindi riassumiamo tutti i file che sono stati utilizzati. Ho usato il mio complesso creatore di torte per generare i due file di mappa necessari, file shape. Ho preso una piccola scuola e l'ho impilata. |
| |
Ho creato questa colonna per modellare il file di mappatura che doveva puntare al file denominato con il ruolo di mappa. Ho utilizzato un riferimento di collegamento per eseguire un join virtuale con la piccola struttura scolastica impilata. |
| |
Poi ho creato un grafico che volevo trasformare in una tabella di dati e salvarlo nel mio file health images.jmp. |
| |
Naturalmente, è stato necessario ricollegarlo virtualmente alla piccola scuola originale per poter realizzare la grafica. |
| |
E poi ho fatto la stessa cosa con le temperature oceaniche delle piccole scuole, il mio riferimento al collegamento alle immagini sanitarie. |
| |
Ho solo...ho preso la mia colonna come file shape e ho disegnato la legenda per il grafico che ho provato a fare con le temperature dell'oceano e ho usato...l'ho semplicemente usato trascinandolo dentro, in pratica. |
| |
Bene, queste sono le dimostrazioni 2D che volevo fare. Facciamo una piccola pausa e ora ci addentreremo nel mondo del 3D e persino del web. |
| |
applicazione. |
| |
Va bene. |
| |
Questa è la mia applicazione web per la creazione di grafici a dispersione 3D. |
| |
E quello che sto per mostrarvi è come ho importato i dati da JMP. |
| |
La mia applicazione si basava sul grafico a dispersione 3D di JMP. Questo serve solo a ricordarvi come appare. |
| |
E ora ho una piccola dimostrazione di ciò. |
| |
In pratica, aveva... vi mostrerò alcune delle funzionalità, a cominciare dalla possibilità di selezionare diversi set di dati. Ecco il set di dati dei diamanti. |
| |
E ovviamente questi punti di disegno. Questa è l'idea principale. E vengono disegnati con questa piccola forma a sfera, e tra un minuto vi spiegherò come si fa. |
| |
Ma tra le altre cose che puoi fare c'è ruotarlo, proprio come in JMP, puoi ingrandire, spostarlo avanti e indietro. |
| |
E poi ci sono anche le etichette che compaiono al passaggio del mouse. Come puoi vedere, nell'angolo in basso a destra disegno degli assi e una griglia e aggiungo un po' di personalizzazione. Niente di troppo. |
| |
Puoi cambiare lo sfondo, impostare il colore delle pareti. Vediamo se riusciamo a dargli un po' di blu. |
| |
Sì, forse non è di tuo gradimento. Ma questa è solo una demo. E poi puoi cambiare la dimensione dei marcatori. |
| |
È disponibile sul web. |
| |
Ok, quindi quando ho iniziato a sviluppare questa applicazione, la prima cosa che volevo sapere era: funzionerà bene sul web? Funzionerà bene sul mio iPhone o sul mio iPad? |
| |
Perché quelle macchine non sono potenti come il mio desktop. Quindi ho creato dei set di dati 3D integrati o tre set di dati casuali con un numero crescente di punti. Sono andato e ho usato un... |
| |
25.000 era il valore che ritenevo valesse la pena provare con dispositivi a bassa potenza, ma in realtà con dispositivi ad alta potenza si può arrivare a valori molto più elevati. |
| |
Poi ho pensato: beh, dovrei provare a inserire dei dati reali e ho trovato il famoso dataset dell'iride, che era in formato CSV (Comma Separated Variables, variabili separate da virgole). |
| |
E l'ho importato. Ma ho dovuto scrivere del codice solo per convertirlo nelle mie strutture interne. |
| |
E ho pensato, beh, JMP ha molti set di dati. Preferirei semplicemente importarli. Così ho importato auto, diamanti e citometria. L'unica differenza era la citometria, non aveva davvero una buona |
| |
categoria per l'uso del colore e hanno dovuto effettivamente modificare la mia applicazione per accettare un grafico senza colore. |
| |
L'applicazione è piuttosto semplice. Ce n'è solo una... è un'applicazione web a pagina singola. Quindi c'è un solo file HTML. Ho un paio di file JavaScript e utilizzo alcune librerie di terze parti, un font e una texture, e la texture è la sfera che viene utilizzata per le forme. |
| |
La tecnica che utilizzo, mutuata dall'industria dei videogiochi, è quella delle particelle o dei sistemi di particelle. Sono molto comuni nei giochi di simulazione e nella visualizzazione 3D. Permettono di creare effetti interessanti come fuoco, fumo, fuochi d'artificio e nuvole. |
| |
In passato avevo lavorato per un periodo su un motore grafico commerciale e la mia responsabilità era proprio quella di migliorare il sistema di particelle. |
| |
Quindi avevo già avuto un po' di esperienza in questo. Ehm, era nel mondo C++, non JavaScript. Ma dato che ho lavorato su HTML5 interattivo e JMP per un bel po' di tempo, ho pensato che fosse ora di vedere se potevo prenderlo |
| |
Ho unito due delle mie passioni e ho creato una versione web che utilizza sistemi di particelle. Sono stato fortunato. Ho trovato questa libreria, Three.js. |
| |
Offre l'accelerazione hardware per il disegno 3D, ha un'ottima documentazione e numerosi esempi di codice, inclusi sistemi particellari, il che ha reso piuttosto semplice la creazione della mia applicazione. |
| |
In realtà, la parte più difficile per me è stata capire come importare i dati da JMP. |
| |
Ma lo farò... condividerò lo script per quello. L'unica cosa che ho fatto è stata assicurarmi di rendere facile l'utilizzo di questi oggetti |
| |
Nella mia applicazione, ho creato un array di oggetti JavaScript e ho aggiunto un valore minimo e uno massimo alle colonne numeriche, in modo da non dover calcolare questi valori in JavaScript. Ovviamente, JMP è molto efficiente in questo tipo di calcoli. |
| |
Per la colonna delle categorie e dei colori, ho dovuto usare una sorta di dizionario di categorie. In pratica, si tratta di un elenco contenente i nomi delle categorie, a cui si fa riferimento tramite un indice a base zero. Ecco come funziona la struttura. |
| |
Ho pensato che sarebbe stato bello creare un'interfaccia utente. E in effetti è stato facile. Ve la mostrerò tra un attimo. In pratica, tutto ciò che devo fare è limitarla alle colonne numeriche per x, y e z. |
| |
E poi limitarlo a una colonna categoriale per il ruolo del colore. |
| |
Diamo quindi un'occhiata a quel codice. |
| |
Bene, innanzitutto vi mostrerò un esempio di un insieme di dati molto semplice. |
| |
E poi la finestra di dialogo è stata davvero facile da creare. Ho usato la finestra di dialogo a colonne e ho specificato cosa volevo per le colonne numeriche e cosa volevo per la colonna del colore, e mi sono assicurato che il tipo di modellazione fosse categorico, quindi ordinale e nominale. |
| |
Successivamente, prendo i dati delle colonne e creo gli oggetti JavaScript di cui ho bisogno. Ecco le stringhe min e max. E questo non è altro che la creazione di una stringa di questi oggetti. |
| |
E poi, se c'è una colonna di colore, farò la stessa cosa. È un po' più complicato perché devo estrarre quelle stringhe di caratteri e inserirle nell'oggetto JavaScript. |
| |
E infine, non resta che salvare il tutto in un file di testo. |
| |
Allora proviamoci. |
| |
Certo, userò Big Class, quindi il file sarà di dimensioni ridotte. |
| |
E |
| |
quindi eseguo lo script. |
| |
E mi ha chiesto: Cosa desidero per il mio XYZ? Ho già selezionato altezza e peso e l'età è una colonna numerica, quindi userò anche quella, e il sesso è un buon elemento per il colore. |
| |
E poi abbiamo finito. E in effetti, l'output qui mi dice dove si trova il file. |
| |
Ho proprio quello nella diapositiva successiva. Quindi andiamo lì. |
| |
Quindi scommetto che ti sei sempre chiesto che aspetto avrebbe una Big Class in JavaScript. Ed eccola qui. E così puoi vedere i tre |
| |
Colonne numeriche con il valore minimo e massimo, e poi la colonna del colore ha questo dizionario di F e M per le categorie, e lo zero indica femmina e l'uno indica maschio. Bene, questa è la mia entusiasmante conclusione di questa presentazione, spero vi sia piaciuta. |
| |
Grazie per aver guardato il video e, se avete domande, non esitate a farle. |
