Altoparlante | Trascrizione |
| jopo | Ciao, benvenuto al mio discorso. |
| La motivazione di questo discorso si basava su una discussione sulla comunità degli utenti JMP. Il dottor Anderson Mayfield è un biologo marino della NOAA e dell'Università di Miami. |
| Studia la salute dei coralli della barriera corallina. Ha presentato il nostro episodio speciale della Giornata della Terra di JMP On Air. E sarà anche presente a questa conferenza. |
| Quindi, in questo post della community degli utenti JMP, ha pubblicato questa immagine qui. E se potessi vedere, ha tutti questi grafici che rappresentano i coralli o le barriere coralline |
| e rappresentano più dati, il tutto in un piccolo grafico, che è un po' come un videogioco quando hai le statistiche dei giocatori |
| e volteggiano attorno al giocatore mentre corrono per la scena. Quindi ora probabilmente hai un'idea del motivo per cui ho chiamato il mio discorso, sai, cosa ottieni quando combini un videogioco, un biologo marino e JMP? Quindi andiamo avanti. |
| Ciò di cui parlerò sono le soluzioni basate sui giochi o ispirate ai giochi che sono possibili in JMP, incluso l'utilizzo di script grafici personalizzati, |
| mappe personalizzate. Poi parlerò di un'applicazione per grafici a dispersione basata sul web 3D che ho creato e di come ho integrato i set di dati JMP in tale applicazione. |
| Ecco un esempio dello script grafico. |
| Ed ecco un esempio di utilizzo di mappe personalizzate. Ed ecco la mia applicazione per i grafici a dispersione 3D. |
| Quindi iniziamo. Per vedere come vengono utilizzati gli script grafici personalizzati, ho un piccolo esempio qui. |
| E quando apro JMP ed corro |
| questo piccolo grafico e, in effetti, ne parlerò. |
| Utilizzo questo set di dati fittizio che ho creato da zero. E si tratta fondamentalmente di una corsa di pesci che scende dalla Grande Barriera Corallina fino a Sydney. |
| Quindi, per arrivare a uno script grafico, quello che puoi fare è personalizzare. |
| E poi questo piccolo pulsante più ti consente di aggiungere un nuovo script. Inizia vuoto, ma abbiamo alcuni campioni in JMP. |
| Quindi mi piace la sceneggiatura del poligono. È molto semplice. Tutto ciò che serve è che disegna un triangolo. Quindi se lo applico al mio grafico, puoi vedere un triangolo lì dentro. |
| E ci sono bastate tre linee, impostando la trasparenza, impostando un colore di riempimento e poi disegnando il poligono. |
| Ma quello che stiamo cercando è: come incorporarlo effettivamente in una sceneggiatura? Quindi il modo più semplice per vederlo è premere il pulsante di risposta |
| e salvi lo script nella finestra dello script. Ed ecco la sceneggiatura. Si inizia con il lancio della mia piccola piattaforma bivariata con latitudine e longitudine. E in basso c'è un messaggio che contiene uno script grafico aggiuntivo. |
| E poi le tre righe del campione. |
| Quindi c'è un esempio molto semplice di utilizzo di uno script grafico. |
| Ora questo è uno script grafico che incorporerò. Disegna queste barre fluttuanti su ciascun punto. |
| E la prima cosa che faccio in questa applicazione è impostare anche la trasparenza e poi disegnare uno sfondo della mia piccola grafica. |
| uno per la fame, uno per la forza e uno per la velocità. |
| Ora ti mostrerò l'intera sceneggiatura, perché si basa su altre cose. Si basa su queste costanti che ho impostato principalmente per i colori e lo sfondo e alcune cose come lo sfondo. |
| Questa è la mia funzione draw bar. Prende una posizione, una lunghezza e un colore. In modo che possa essere utilizzato per ogni barra. Quindi, se eseguo quello script. |
| Eccolo, hai la grafica con il piccolo |
| una sorta di monitor della salute ispirati al gioco che si librano sopra ogni pesce mentre nuotano e corrono lungo la corrente dell'Australia orientale fino a Sydney. |
| Questo ti darà un'idea, fondamentalmente passo dopo passo, di come funziona quella funzione. Abbiamo iniziato con solo un marcatore sullo schermo e per ciascun marcatore abbiamo impostato l'origine del pixel. |
| E poi iniziamo a disegnare lo sfondo, ma ci vogliono pochi passaggi. La prima volta che impostiamo lo spessore della linea, in realtà non vedi nulla. |
| Quindi impostiamo il colore, che sarà il nero. E poi facciamo uno spostamento verso una linea che disegna lo sfondo e una linea molto spessa. |
| E per ogni barra, imposteremo il colore della barra, ci sposteremo nella posizione e poi creeremo una linea. Quindi disegniamo lo sfondo, ne impostiamo il colore e continua la barra. E ovviamente lo facciamo anche per le altre due linee. |
| Ora puoi utilizzare molte funzioni grafiche diverse. Ed ecco la sezione delle funzioni grafiche del riferimento alla sintassi JSL e puoi creare quello che vuoi. Quindi provaci. |
| Successivamente, parlerò dell'utilizzo delle mappe personalizzate. |
| Mi scusi. |
| E per utilizzare mappe personalizzate, sostanzialmente fornisci due tabelle. La prima tabella è una definizione di tutte le forme che desideri utilizzare. E il secondo nomina le forme nella tabella. |
| E per questa colonna del nome, in pratica ciò che devi aggiungere è una proprietà della colonna del ruolo della mappa e deve essere del tipo definizione del nome della forma. Te lo mostrerò tra un minuto. |
| Quindi, giusto per fare un esempio molto semplice, ovviamente, ciò di cui abbiamo bisogno è Big Class. E avrò una cosa davvero semplice. |
| map anche per questo che ha solo due rettangoli. Fammi aprire quei file. |
| Quindi è una mappa molto piccola, come ho detto. E solo per mostrarti queste coordinate, ne ho un po' |
| script qui che sostanzialmente mostra i punti. |
| Se evidenzio questi primi quattro, quello sarà il rettangolo in alto e i successivi quattro saranno il rettangolo in basso. |
| quelli superiori sono il peso, quello inferiore è l'altezza. E se guardi la proprietà della colonna, |
| è il ruolo della mappa, la definizione del nome della forma. |
| Quindi, una volta pronta questa mappa, possiamo aprire Big Class. |
| Non possiamo riutilizzarlo direttamente. Quello che dobbiamo fare prima è prendere le colonne di altezza e peso e impilarle. Quindi passiamo ai tavoli. Lasciami impilarli. |
| E ora ho una tabella con queste colonne in pila. |
| Vedi che l'etichetta ha altezza e peso alternati e ciò che dobbiamo fare per collegarla al file della mappa è aggiungere un'altra proprietà della colonna. |
| Questo è fin quaggiù, mappa di nuovo il ruolo. Ma non diremo la definizione del nome sagomato, diremo l'uso del nome sagomato e dobbiamo scegliere il |
| map file, il nome map file. |
| E imposta anche la colonna su name. |
| E poi abbiamo finito. Quindi ora che lo abbiamo, posso usarlo in un grafico. |
| Il grafico che stiamo seguendo utilizza fondamentalmente la colonna etichetta per la forma della mappa, che imposta le forme superiore e inferiore, quindi possiamo trascinare in quella colonna di 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 ottenerlo |
| uno per studente. Se lo trascino nel ruolo di conclusione, è un po' stretto, ma lo distribuirò eseguendo livelli per riga e impostandolo su 10. |
| Eccoci qua. Ed è più o meno quello che stavo cercando. E questo può essere un grafico utile |
| da solo. |
| Quindi adesso facciamo qualcosa di un po' più complicato. |
| Beh, in realtà, se stai facendo qualcosa di più complicato, potresti voler utilizzare il componente aggiuntivo per la creazione di mappe personalizzate. |
| E questo è un ottimo componente aggiuntivo. Ti consente di trascinare un'immagine e poi ricalcarla. |
| E quando hai finito di tracciare tutte le forme, fai clic su Fine con dati casuali e verrà generato |
| i due file di forma necessari, oltre a un set di dati casuale che ti consente di testare la tua mappa personalizzata. Ed eccone uno in cui ho appena fatto quattro variabili e una al centro. Quindi è fondamentalmente una versione quadrata di quello che hai visto nella diapositiva originale che avevo. |
| Ora, non era esattamente quello a cui miravamo. Volevamo qualcosa di rotondo e credo che sia stato il dottor Mayfield a chiamarlo torta complessa. |
| Non so se sia un termine ufficiale, ma ho deciso che avrei costruito queste cose con la sceneggiatura. |
| Quindi quello che volevo fare era creare file di forma e assicurarmi di ottenere ciò che il medico aveva ordinato. E quelle erano quattro forme con qualcosa al centro. |
| E poi ho pensato: beh, sono un programmatore. Mi piace fare un po' di più e rendere un po' più flessibile. |
| Quindi ho pensato che forse alcune persone avrebbero voluto fare la stessa cosa, ma avere solo due variabili più una variabile media o centrale o più. |
| E ho pensato che forse sarebbe stato carino poter realizzare anche forme diverse, come un diamante o un quadrato. Quindi non sono un genio. Sono diventato fortunato. E Xan Gregg in realtà ha risposto a un post che chiedeva come posso creare questo diagramma polare in JMP. |
| Ed ecco che arriva. |
| Eccoci qua e |
| Stavano cercando una forma come questa, che somiglia moltissimo a quella di cui avevo bisogno. |
| Ciò che ha fatto Xan è stato davvero grandioso. È uno script flessibile che fa questo e genera 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 volevo fare. |
| Ma non era troppo difficile. E questo è ciò che fa la mia sceneggiatura. E quando esegui la torta complessa, c'è la ricetta per questa torta, apri lo strumento per torta complessa. Quindi aggiungi alcuni ingredienti. Prima di tutto, devi dire il numero di forme. |
| E poi se lo centrare, in alto o leggermente di lato. |
| Poi c'è una variabile per la levigatezza. |
| E poi dovresti fornire anche il raggio interno, se vuoi più o meno riempimento, e il raggio esterno. |
| Naturalmente, il passaggio successivo è eseguire lo script e verrà generato |
| questi |
| shape file per te ed esegui anche un test di esempio, proprio come il creatore di torte personalizzato o l'aggiunta di mappe personalizzate. Quindi ecco un esempio di torta complessa per cinque e le forme sono cinque |
| e la morbidezza da impostare su sette. Potresti usarne cinque o sei e probabilmente andrebbe comunque bene se lo saranno |
| disegnato davvero in piccolo. La dimensione non ha molta importanza. Ciò che conta è più il raggio interno relativo e il raggio esterno. E questo è più o meno ciò che voleva il dottor Mayfield, quindi mi sono limitato a quattro per il raggio interno e nove per il raggio esterno. |
| Quindi vediamo come possiamo effettivamente utilizzare queste cose. Proprio come abbiamo fatto con la demo di Big Class, dovremo...dovremo impilare le colonne. Ma una cosa diversa è che in realtà non ho le variabili di forza e salute nel mio file di forma. In realtà lo sono |
| nel file di forma sono denominati wedge 1, 2 3 e |
| centro. |
| Quindi avrò bisogno di costruire un file |
| file che lo farà |
| collegare i due insieme. |
| Per prima cosa, ho questo esempio di una piccola scuola impilata, |
| cosa che ho fatto impilando insieme quelle colonne di salute, forza e velocità. |
| Ed ecco il file shape che... il nome file shape che userò. |
| Si noti che ha una proprietà colonna |
| del ruolo della mappa, |
| a destra, definizione del ruolo della mappa. |
| E questo è necessario quando crei le tue forme personalizzate. |
| Quindi ho creato il file collegato, le colonne delle mappe da modellare, fondamentalmente elencando le etichette all'interno del mio file |
| file impilato. |
| E poi in un'altra colonna, nome della forma, ho elencato le forme con i nomi delle forme. |
| Ora, è importante che il nome della forma qui |
| hanno una proprietà che è il ruolo della mappa, ma questa è l'uso del nome della forma. |
| E questa colonna dell'etichetta dati avrà un ID collegamento in modo che possa essere virtualmente unita alla mia tabella in pila. |
| Quindi ora che ho preparato tutti questi tavoli, |
| la prossima cosa da fare è costruire effettivamente un grafico. |
| Ora sarà simile a quello che ho fatto prima. L'unica differenza è che invece di trascinare semplicemente l'etichetta nella forma della mappa, ora utilizzo questa colonna di unione virtuale, la trascino nella forma della mappa e ottengo la forma che desidero. Quello che devo fare dopo è aggiungere i dati alla colonna dei colori. |
| E poi aggiungi il nome da avvolgere. E lì ci sono tutti i miei pesci |
| una grafica per ognuno. Per cercare di ottenere il gradiente corretto, vado al gradiente qui e questo è proprio qui. |
| Voglio assicurarmi che il verde sia buono, quindi invertirò i colori. |
| Ed ecco fatto. Questo è il |
| utile mappa su se stessa, perché puoi guardare ogni pesce e vedere come stanno. Ma voglio fare qualcosa in più, ovviamente. |
| Quello che voglio fare è essere in grado di inserire quelle immagini in una descrizione comando. |
| Per fare ciò, trasformeremo la tabella dati. |
| Riporta il file che avevo e quella grafica. |
| Quindi quello che farà qui è che, sotto gli uomini del triangolo rosso, c'è una tabella che crea dati. E ciò che farà produrrà una nuova tabella dati |
| con tutte queste immagini, e questo è davvero utile, soprattutto se lo ricollegamo. E lo girerei e lo imposterei come ID collegamento in modo da poterlo puntare dal mio semplice file scolastico in modo da poter avere ogni indicatore, trovare il grafico per ogni carattere. |
| Va bene, quindi l'ho effettivamente archiviato in un altro file e lo aprirò. L'ho chiamata immagini della salute. |
| Quindi non ne abbiamo più bisogno. |
| E non abbiamo più bisogno del file in pila. |
| Ma ciò di cui abbiamo davvero bisogno è l’esempio della piccola scuola con cui ho iniziato. |
| Ora la prima cosa che devi fare per far sì che questi vengano visualizzati nel file |
| grafico è impostare quella colonna immagine, quella colonna virtuale, |
| come etichettato. |
| Puoi farlo anche in un semplice grafico. |
| Quindi abbiamo già un esempio... beh, lo riaprirò. Perché no? Il mio copione di gara, tanto per dimostrarvi che parto da zero. Ma dal momento che questa colonna è stata etichettata, ora quando passo il mouse su uno di questi grafici, ottieni... i tre |
| informazioni per questo elemento grafico e puoi farlo e appuntare un numero qualsiasi di questi caratteri. |
| Questo è un modo in cui puoi utilizzare questa grafica. |
| Un altro modo è utilizzare use for marker. |
| E la grafica che otterrai fluttuerà sopra i punti e verrà utilizzata al posto delle forme a diamante che avevo prima. |
| Riporterò quelle immagini sulla salute, la piccola scuola, e riporterò anche quella grafica. |
| Quindi in questo momento abbiamo quei diamanti. Per trasformarli in queste forme qui, |
| abbiamo dovuto aggiungerne ancora un altro |
| badge a questa colonna di join virtuale. Sta diventando davvero popolare, quindi usalo come pennarello. E quindi appare un nuovo badge. E dietro di me, |
| vedrai che queste immagini sono state messe in scena. Un ultimo dettaglio è che non mi piace molto questo bianco attorno all'immagine. E questo è effettivamente integrato nell'immagine del grafico. |
| E un modo in cui posso occuparmene è avere uno script che troverà quell'area bianca e imposterà il canale alfa in modo che li renda trasparenti. Quindi ora abbiamo grafici con un bel |
| forma rotonda, non lo sfondo quadrato. Un'altra cosa che potresti voler fare è aumentare la dimensione del marcatore. |
| E possiamo arrivare fino a 11. |
| Come ti sembra? È più o meno quello che avevo; 10 probabilmente sarebbe stato meglio. Ma mi piace andare all'11. Okay, quindi è così |
| utilizzare dal pennarello. Vogliamo creare un grafico un po' più complicato. E questo è ciò che stava cercando il dottor Anderson Mayfield, è una mappa termica dietro i marcatori. E questo è piuttosto complicato ma JMP può gestirlo. In realtà è un contorno. |
| Quindi una cosa che ho qui è un'altra versione della piccola scuola. Ma questa volta ho la temperatura 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 costruito prima. |
| E inizierò con |
| la fine qui così possiamo effettivamente vedere cosa sto cercando. Quindi fondamentalmente voglio avere questa grafica |
| in bilico sul contorno ed ecco un paio di legende che mostrano come stanno le cose. |
| Non dovrebbe essere troppo difficile. Inizierò parte del percorso con una mappa già posizionata e lat long già su xey. |
| Quindi la prima cosa che voglio fare è aggiungere un contorno. |
| E dobbiamo dare quel po' di colore, quindi trascino il ruolo temporaneo sul ruolo colore e regolerò il numero di livelli su questo contorno. |
| Cambia un po' l'alfa e aggiungi un po' di morbidezza. |
| La prossima cosa che voglio fare è renderlo un po' trasparente. |
| Mettiamo un .6 su questo. |
| È più o meno lo stesso di quello che avevo prima. E ora per aggiungere i marcatori, ci sono due modi in cui puoi farlo. Puoi fare clic con il tasto Maiusc sui punti oppure puoi semplicemente trascinarli. Per trascinarli, |
| quindi puoi impostare nuovamente la dimensione del pennarello, |
| facendolo |
| vado qui e ne faccio altro e usiamo 10 questa volta. Penso che 11 fosse un po' troppo grande. Va bene, quindi sembra bello. Ci siamo quasi. Vogliamo lavorare su questa leggenda. Come otteniamo questi colori lì dentro? Bene, abbiamo già il ruolo sanitario. |
| E che puoi trascinare qui fino all'angolo, aggiungi semplicemente un secondo ruolo di colore. Inizialmente incasina il tuo grafico. |
| Possiamo occuparcene noi. Il problema è che il contorno non ha realmente bisogno di utilizzare il ruolo sanitario. Quindi, se lo disabilitiamo, torniamo a ciò che vogliamo. |
| Quindi la prossima cosa che vuoi fare è aggiungere il colore alla legenda vera e propria qui. E possiamo semplicemente personalizzarlo di nuovo come abbiamo fatto prima. |
| Faremo un po' di più questa volta. Voglio avere quattro etichette. |
| Voglio che inizi alle cinque e arrivi fino alle |
| 20. |
| Oh, volevo anche invertire i colori. |
| Eccolo qui, sembra più o meno così, quindi quasi finito. Voglio solo abbellirlo un po' di più. Ci sono un paio di cose nella leggenda che vorrei sistemare. |
| Quindi vai alle impostazioni della leggenda e togli queste cose che non sembrano aggiungere troppo e sposta la leggenda della salute in alto. |
| Eccolo lì. Quindi penso di corrispondere a quello che stavo cercando, nel miglior modo possibile. |
| Quindi posso liberarmene. Non credo che tutti ne abbiano più bisogno. |
| Ma voglio aggiungere qualcosa in più. |
| Che ne dici di aggiungere questa legenda, perché non era proprio un modo per sapere quale area di questo grafico faceva cosa, sai fame, velocità, forza e salute. Fortunatamente ce l'abbiamo |
| file di mappatura. Va dal nome della colonna alla forma. |
| E lo aprirò solo per un secondo. |
| Quindi puoi vedere qui che ho etichettato tutte le righe e ho etichettato anche la colonna dell'etichetta 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 davvero finito con quella grafica. |
| Quindi, se voglio inserirlo nella mia scena, il modo migliore per farlo è semplicemente selezionarlo, il segno più e quindi copiarlo. |
| Quindi apri un'applicazione di modifica delle immagini e la salvi su disco. E ovviamente l'ho già fatto. Quindi lo farò |
| mostralo una volta ottenuto e devo ripristinare di nuovo la mia grafica, |
| wow, posso semplicemente trascinarlo dentro. |
| Ed eccolo qui. Oh, non c'è. Bene, quindi c'è un modo per trovarlo. Vai su Personalizza, l'ha rilasciata in background perché normalmente quando trascini un'immagine, stai trascinando un'immagine di sfondo. |
| Quindi tutto ciò che dobbiamo fare ora... spostiamolo di mezzo così puoi vedere cosa sta succedendo... è spostarci in primo piano. Ecco che arriva |
| e ci siamo. È nella parte anteriore. E in realtà mi piacerebbe aggiungere un po' di trasparenza perché è un po' troppo luminoso per i miei gusti. |
| Quindi mettiamo .8. |
| E ora non ci resta che trascinarlo nell'angolo e con quello abbiamo praticamente finito. |
| Ok, quindi ce n'erano molti e coinvolgevano 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, i file di forma. Ho preso la scuola piccola e l'ho impilata. |
| Ho creato questa colonna per modellare il file di mappatura che doveva puntare al file del nome con il ruolo della mappa. Ho utilizzato un riferimento al collegamento per eseguire un collegamento virtuale alla piccola scuola in pila. |
| Quindi ho creato un elemento 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 in modo da poter realizzare la grafica con quella. |
| E poi ho fatto la stessa cosa con le temperature oceaniche delle piccole scuole, il mio collegamento fa riferimento alle immagini sanitarie. |
| Ho solo... ho preso la mia colonna in un file di forma e ho disegnato la legenda per il grafico che ho provato a realizzare con le temperature dell'oceano e ho usato... lo uso semplicemente trascinandolo in pratica. |
| Questo è tutto per le dimostrazioni 2D che volevo fare. Facciamo una piccola pausa e ora entriamo nel mondo del 3D, e anche del web |
| applicazione. |
| Va bene. |
| Quindi questa è la mia applicazione web per grafici a dispersione 3D. |
| E quello che vi mostrerò è come ho inserito i dati da JMP. |
| La mia applicazione era basata sul grafico a dispersione 3D di JMP. Quindi questo è solo per ricordarti come appare. |
| E ora ne ho una piccola dimostrazione. |
| Quindi, in sostanza, aveva... vi mostrerò alcune delle funzionalità, iniziando con la possibilità di selezionare diversi set di dati. Ecco il set di dati dei diamanti. |
| E ovviamente questo punto di attrazione. Questa è l'idea. E sono disegnati con questa forma a pallina, spiegherò come si fa tra un minuto. |
| Ma l'altra cosa che puoi fare è ruotarlo, proprio come in JMP, puoi zoomarlo, spostarlo avanti e indietro. |
| E poi ha anche le etichette al passaggio del mouse. Puoi vedere che nell'angolo in basso a destra disegno assi e una griglia e aggiungo un po' di personalizzazione. Non troppo. |
| Puoi cambiare lo sfondo, impostare il colore delle pareti. Vediamo se riusciamo a dargli un po' di colore blu. |
| Già, forse non è di tuo gradimento. Ma questa è solo una demo. E poi puoi cambiare la dimensione dei marcatori. |
| Questo è sul web. |
| Ok, quindi quando ho avviato questa applicazione, la prima cosa che volevo fare era: poteva funzionare sul web? Funzionerebbe bene sul mio iPhone o sul mio iPad? |
| Perché quelle macchine non sono potenti quanto il mio desktop. Quindi ho creato tre set di dati casuali in 3D con un numero crescente di punti. Sono andato e ho usato un... |
| 25.000 era quello che pensavo valesse la pena provare su dispositivi a bassa potenza, ma in realtà puoi andare molto più in alto con dispositivi ad alta potenza. |
| Poi ho pensato, beh, dovrei provare a inserire alcuni dati reali e ho trovato il famoso set di dati dell'iride, ed era in formato CSV, variabile separata da virgole. |
| E l'ho portato dentro. Ma ho dovuto scrivere del codice solo per convertirlo nelle mie strutture interne. |
| E ho pensato, beh, JMP ha molti set di dati. Preferirei portare solo quelli. Quindi ho portato macchine, diamanti e citometria. L'unica differenza era la citometria, non aveva davvero un buon risultato |
| categoria per l'utilizzo del colore e in realtà hanno dovuto modificare la mia applicazione per accettare un grafico che non aveva alcun colore. |
| Quindi l'applicazione è piuttosto semplice. Ce n'è solo una... è un'app Web di una pagina. Quindi c'è un file HTML. Ho un paio di file JavaScript e utilizzo alcune librerie di terze parti, un carattere e una trama, e la trama è la palla utilizzata per le forme. |
| Quindi la tecnica che utilizzo nell'industria dei giochi sono le particelle o sistemi di particelle. Sono usati molto comunemente per giochi di simulazione e visualizzazione 3D. Puoi realizzare effetti fantastici come fuoco, fumo, fuochi d'artificio e nuvole. |
| E in passato avevo passato un po' di tempo a lavorare su un motore di gioco commerciale e la mia responsabilità era prendere il sistema particellare e migliorarlo. |
| Quindi ho già avuto qualche esperienza con questo. Ehm, era nel mondo C++, non JavaScript. Ma dal momento che ho lavorato su HTML5 interattivo e JMP per un bel po', ho pensato che fosse giunto il momento di vedere se potevo accettare |
| due delle mie passioni e sposarle e inventare una versione basata sul web dell'utilizzo dei sistemi particellari. Sono diventato fortunato. Ho trovato questa libreria, Three.js. |
| Esegue disegni 3D con accelerazione hardware e dispone di un'eccellente documentazione e ci sono molti esempi di codice inclusi i sistemi di particelle, quindi è stato abbastanza semplice creare la mia applicazione. |
| E in realtà, la parte difficile per me è stata capire come importare i dati da JMP. |
| Ma avrò...condividerò la sceneggiatura per quello. L'unica cosa che ho fatto è stata assicurarmi di rendere facile l'uso di questi oggetti |
| nella mia domanda. Quindi una cosa che ho fatto è stata creare un array di oggetti JavaScript e per le colonne numeriche aggiungere effettivamente un minimo e un massimo, quindi non devo calcolarlo in JavaScript. E, naturalmente, JMP è davvero bravo a calcolare questo tipo di cose. |
| Ehm, per la categoria, per la colonna dei colori, quello che dovevo fare era usare come un dizionario di categorie. E fondamentalmente, tutto ciò che è, i nomi delle categorie in un elenco e poi puntano semplicemente a quei valori tramite un indice a base zero. Ecco come funziona quella struttura. |
| Ho pensato che sarebbe stato carino realizzare un'interfaccia utente. E in realtà è stata una cosa facile da fare. E te lo mostrerò tra un secondo. Ma in pratica tutto quello che devo fare è limitarlo alle colonne numeriche per x, y e z. |
| E poi limitalo a una colonna categoriale per il ruolo del colore. |
| Quindi diamo un'occhiata a quel codice. |
| Va bene, quindi fornisco prima di tutto un esempio di un set di dati molto semplice. |
| E poi il dialogo è stato davvero facile da fare. Utilizzo il dialogo delle colonne e ho specificato cosa volevo per le colonne numeriche e cosa volevo per la colonna dei colori 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 minime e massime. E questo significa semplicemente costruire una stringa di questi oggetti. |
| E poi se c'è una colonna di colori, farò lo stesso. È un po' più complicato perché devo estrarre quelle stringhe di caratteri e inserirle nell'oggetto JavaScript. |
| E infine, tutto ciò che deve fare è salvarlo in un file di testo. |
| Quindi proviamoci. |
| Ovviamente userò Big Class, quindi è un bel file piccolo. |
| E |
| quindi eseguo lo script. |
| E mi ha chiesto: cosa voglio per il mio XYZ. Ho già selezionato altezza e peso e l'età è una colonna numerica, quindi userò anche quella e il sesso è buono per il colore. |
| E poi abbiamo finito. E in realtà, l'output qui mi dice dove si trova il file. |
| Mi capita di trovarlo nella diapositiva successiva. Quindi andiamo a quello. |
| Quindi scommetto che ti sei sempre chiesto come sarebbe Big Class in JavaScript. E questo è tutto. E così potete vederli tre |
| colonne numeriche con il tuo minimo e massimo, e poi la colonna dei colori ha questo dizionario di F e M per le categorie, e lo zero significa femmina e l'uno significa maschio. Bene, questa è la mia emozionante conclusione di questo discorso, spero che ti sia piaciuto. |
| Quindi grazie per la visione e, se ci sono domande, fatele. |
