Livello: Principiante
Josh Markwordt, sviluppatore software JMP, SAS
John Powell, sviluppatore software principale JMP, SAS
L'HTML interattivo supporta molte delle funzionalità esplorative di JMP, tra cui l'identificazione dei punti, il collegamento, il brushing e, novità di JMP 14, il filtraggio dei dati. I report salvati possono essere condivisi con i colleghi o caricati su un server web per essere visualizzati in qualsiasi browser moderno. Oltre al supporto per il filtraggio dei dati, l'HTML interattivo di JMP 14 aggiunge il supporto per la mappa ad albero in Graph Builder. Questo articolo illustra quando e come utilizzare l'HTML interattivo per condividere ed esplorare i risultati di JMP.
Introduzione
Fin dall'inizio del progetto HTML interattivo in JMP 11, il nostro obiettivo è stato quello di rendere la ricca grafica e le potenti analisi di JMP accessibili a coloro che non lo possiedono ancora. Il web è il luogo naturale per visualizzare questi report e il luogo in cui si collabora nell'era moderna. In questo intervento vi forniremo una panoramica delle nuove funzionalità di JMP 14 per HTML interattivo, forniremo suggerimenti su come condividere i report HTML interattivi di JMP sul web e condivideremo il lavoro svolto da un biologo marino che utilizza HTML interattivo di JMP per condividere e collaborare alla sua ricerca.
Diamond Price vs. Carat Weight, Filtered by ColorPrezzo del diamante vs. peso in carati, filtrato per colore
Prezzo del diamante vs. peso in carati, filtrato per colore
Prezzo del diamante vs. peso in carati, filtrato per colore
Funzionalità di JMP 14
JMP offre numerose piattaforme e strumenti per analizzare i dati e, in ogni versione, abbiamo cercato di aggiungere funzionalità aggiuntive al nostro output per facilitare l'esplorazione e la condivisione dei dati sul web. In JMP 14, la mappa ad albero è stata aggiunta all'output del Generatore di Grafici ed è disponibile un filtro dati con le funzioni Nascondi e Seleziona per esplorare i dati.
I report HTML interattivi supportano molte delle funzionalità esplorative di JMP. Singoli punti o elementi grafici possono essere identificati tramite suggerimenti visualizzati passando il mouse sul punto sul desktop o toccando l'elemento su un dispositivo mobile. Proprio come in JMP, i grafici sono collegati in modo che le righe selezionate in un grafico siano evidenziate in tutti i grafici [1,2].
Selecting multiple objects and linking between graphical elements Selezione di più oggetti e collegamento tra elementi grafici Selezione di più oggetti e collegamento tra elementi grafici Selezione di più oggetti e collegamento tra elementi grafici Utilizzando le diverse modalità visualizzate nella parte superiore della pagina e facendo clic o toccando il secondo pulsante di attivazione/disattivazione, è possibile trascinare un rettangolo per selezionare le righe nei grafici. Questa operazione è chiamata brushing , una tecnica importante per esplorare dati multivariati [1]. 
Brushing points to explore the data Punti di spazzolatura per esplorare i dati Punti di spazzolatura per esplorare i dati Punti di spazzolatura per esplorare i dati
Una novità di JMP 14 è la possibilità di filtrare per colonna o per combinazione di colonne. Per prima cosa, selezionare la voce di menu Filtro dati locali dal menu a triangolo rosso di qualsiasi report JMP, selezionare una o più colonne e fare clic su Aggiungi. I controlli per i filtri categoriali e continui sono supportati e decorati con distribuzioni. In JMP 14, sono supportate tutte le combinazioni di logica AND e OR per consentire la creazione di filtri complessi. Gli stati di selezione e nascondi sono supportati in modo coerente ovunque, il che semplifica la curva di apprendimento per gli utenti che non conoscono JMP.
È importante notare che la possibilità di escludere/includere dati non è supportata nell'output HTML interattivo quando pubblicato su un file, il che significa che se le righe vengono escluse in JMP, viene esportato solo il sottoinsieme delle righe incluse e gli utenti non saranno in grado di esplorare i dati esclusi sul web. Ad esempio, il grafico bivariato qui sotto ha la casella di controllo "Includi" selezionata (in JMP sul lato sinistro), quindi selezionando "Uomini" questi sono gli unici punti visualizzati e gli unici valori presi in considerazione durante l'adattamento della linea. L'esportazione HTML interattiva di questo grafico presenta quindi solo "Uomini" nel suo filtro dati (sul lato destro). 
Bivariate of Big Class with only Males included before exporting to Interactive HTML Bivariata di Big Class con inclusi solo i maschi prima dell'esportazione in HTML interattivo Bivariata di Big Class con inclusi solo i maschi prima dell'esportazione in HTML interattivo Bivariata di Big Class con inclusi solo i maschi prima dell'esportazione in HTML interattivo Se l'intenzione era quella di consentire all'utente di esplorare sia le altezze maschili che femminili, ma inizialmente si voleva attirare l'attenzione sui maschi, deselezionare la casella di controllo "Includi" prima di selezionare i maschi ed esportare (come mostrato in JMP a sinistra). Qui si vedrà che, sebbene il grafico iniziale sia lo stesso in HTML interattivo della prima volta, il filtro dati include sia maschi che femmine e filtrando è possibile esaminare l'intero set di dati o entrambi i sessi individualmente. 
Unchecking the Include checkbox allows you to show just the Males initially but still allow the user to explore the entire dataset. Deselezionando la casella di controllo Includi, inizialmente verranno mostrati solo i dati relativi agli uomini, consentendo comunque all'utente di esplorare l'intero dataset. Deselezionando la casella di controllo Includi, inizialmente verranno mostrati solo i dati relativi agli uomini, consentendo comunque all'utente di esplorare l'intero dataset. Deselezionando la casella di controllo Includi, inizialmente verranno mostrati solo i dati relativi agli uomini, consentendo comunque all'utente di esplorare l'intero dataset. La mappa ad albero è un importante strumento grafico per l'analisi di dati gerarchici. Di seguito è riportata una mappa ad albero creata a partire dal dataset "Città" della libreria "Dati campione" utilizzando l'algoritmo di suddivisione, selezionato di default.
Treemap of Cities data sized by lead levelsMappa ad albero dei dati delle città dimensionata in base ai livelli di piombo
Mappa ad albero dei dati delle città dimensionata in base ai livelli di piombo
Mappa ad albero dei dati delle città dimensionata in base ai livelli di piombo
L'algoritmo split crea una mappa ad albero con celle ordinate in base ai nomi dei gruppi di celle. In alternativa, è possibile scegliere l'algoritmo squarify per creare una mappa ad albero che ordina le celle in base alla loro dimensione, in questo caso in base ai livelli di piombo delle città.
Treemap of the Cities by lead levels using the squarify algorithmMappa ad albero delle città per livelli di piombo utilizzando l'algoritmo squarify
Mappa ad albero delle città per livelli di piombo utilizzando l'algoritmo squarify
Mappa ad albero delle città per livelli di piombo utilizzando l'algoritmo squarify
Le mappe ad albero HTML esportate supportano tutte le opzioni impostate prima dell'esportazione da JMP in JMP 14. In combinazione con i filtri dati locali, questo consente di esplorare mappe ad albero e altri tipi di grafici sul Web.
Come condividere con JMP
Le presentazioni precedenti hanno mostrato come salvare i report JMP in HTML interattivo in Windows utilizzando l'opzione di menu File -> Salva con nome e su Mac utilizzando Esporta, nonché il comando JSL Salva HTML interattivo() per creare questo contenuto da uno script [3]. È possibile creare dashboard potenti tramite Dashboard Builder o utilizzando le funzionalità di Combina Windows come mostrato nei nostri esempi online . Ma qual è il modo migliore per condividere questi report?
La risposta a questa domanda dipende da quanto ampiamente si desidera condividere il file. All'interno di una rete interna, una semplice unità di rete condivisa potrebbe essere la soluzione migliore. A volte le impostazioni email bloccano il contenuto HTML o costringono l'utente a scaricare un allegato di grandi dimensioni sul proprio computer o dispositivo mobile. Esistono diversi servizi di condivisione file online, ma il supporto varia. Da settembre 2017, Dropbox non esegue più il rendering di contenuti HTML . Allo stesso modo, Google Drive ha dismesso questa funzionalità nel 2015. Al momento, non possiamo suggerire un servizio di condivisione file come metodo affidabile per lo scambio di contenuti HTML renderizzati: è possibile condividere i file, ma devono essere scaricati o potrebbero essere visualizzati come file di testo, quando ciò che vorremmo fare è cliccare su un collegamento e visualizzare il report.
Per i clienti che non hanno familiarità con la gestione autonoma di un server web completamente funzionante, esistono diversi siti di hosting/web design che pubblicizzano lo sviluppo rapido di siti web anche con una minima conoscenza di programmazione. Un elemento HTML chiamato inline-frame o iframe può essere utilizzato per incorporare il contenuto di una pagina web all'interno di un'altra pagina; ad esempio, la community JMP consente l'incorporamento di contenuti tramite iframe. Tuttavia, il provider scelto potrebbe non consentire l'utilizzo di iframe nel proprio sistema. Se la pagina web è servita in HTTPS, non è possibile ospitare contenuti HTTP in un iframe: questo è uno scenario chiamato " contenuto misto " ed è una funzionalità di sicurezza dei browser moderni. Questa potrebbe essere una soluzione valida per il framework utilizzato, ma, come mostra la storia del cliente riportata di seguito, potrebbe richiedere un po' di lavoro.
Storia del cliente di Coral Reef
La possibilità di condividere i dati sta già avendo un impatto positivo sui nostri clienti. Un esempio è la ricerca sulla diagnostica delle barriere coralline del Dr. Anderson Mayfield [4] . Dopo anni di raccolta di dati dalle barriere coralline di tutto il mondo, ha creato un sito web per condividere dati e analisi utilizzando JMP, in modo che scienziati o statistici simili potessero collaborare alla previsione dello stato di salute delle barriere coralline in un clima globale in evoluzione. Il suo sito è ospitato su SquareSpace. 
Dr Anderson B. Mayfield's webpage Pagina web del Dott. Anderson B. Mayfield Pagina web del Dott. Anderson B. Mayfield Pagina web del Dott. Anderson B. Mayfield Ha consultato la community JMP per avere consigli su come incorporare report HTML interattivi JMP nel suo sito web, che non sembrava essere supportato direttamente da SquareSpace [5]. Grazie alle risposte della nostra community, e in particolare di uno dei nostri principali sviluppatori software, Nascif Abousalh-Neto, ha appreso che ospitando i suoi file HTML interattivi su Amazon S3 e utilizzando un iframe, poteva incorporare report HTML interattivi al centro di una pagina che descriveva i dati raccolti.
Con il rilascio di JMP 14.2, ora che JMP Public è disponibile, sarà possibile fare lo stesso con i report HTML interattivi di JMP, offrendo funzionalità avanzate rese possibili dalla connessione a un server JMP live. Gli utenti possono collegarsi direttamente al report su JMP Public oppure il sistema semplifica l'incorporamento del report in altre piattaforme, inclusa la generazione del markup HTML iframe da incollare in un'altra pagina web. A differenza del formato HTML interattivo autonomo, i dati possono essere esclusi o inclusi, affidandosi al server JMP per gestire l'analisi e visualizzare i risultati aggiornati nella stessa interfaccia web a cui siete abituati, ma con una nuova ed elegante interfaccia utente per JMP Public.
Per condividere un report pubblicato su JMP Public, è sufficiente fare clic sull'icona Condividi nella parte superiore della pagina e selezionare "Codice incorporato (iframe)" come mostrato di seguito: 
Embedding an iframe of interactive HTML reports published on JMP Public is easy. Incorporare un iframe di report HTML interattivi pubblicati su JMP Public è semplice. Incorporare un iframe di report HTML interattivi pubblicati su JMP Public è semplice. Incorporare un iframe di report HTML interattivi pubblicati su JMP Public è semplice. Questo inserirà il codice HTML per generare un tag iframe all'interno della tua pagina web, negli appunti, come mostrato qui:
<IFRAME class="jmp-share-iframe" frameborder="0" width="800" height="600" src="https://public.jmp.com/api/packages/Diamond-Price-vs-Carat-Weight-Filtered-b/js-p/5bb3d86e615499085427cde3/indexPage" style="margin: 0.8em 0;"></IFRAME>
Basta incollare questo codice nella pagina HTML nel punto in cui si desidera che appaia, come è stato fatto di seguito per la versione live dell'immagine mostrata all'inizio dell'articolo, e si otterrà un contenuto interattivo visualizzato all'interno della pagina.
Conclusione
L'HTML interattivo è disponibile da quattro release di JMP. Ci auguriamo che abbiate trovato modi interessanti per utilizzarlo, come ha fatto il Dr. Anderson Mayfield con la sua collaborazione per scoprire come migliorare la salute delle barriere coralline in tutto il mondo. Ci piacerebbe conoscere i vostri successi e le vostre sfide e aiutarvi a collaborare con report e dashboard HTML interattivi di JMP. Visitate gli esempi di HTML interattivo o esplorate gli esempi di questo articolo su JMP Public .
Riferimenti
[1] Becker R. e Cleveland W. (1987). “Grafici di dispersione a spazzola”, Technometrics , 127-142.
[2] Stuetzle W. (1987). “Finestre dei grafici”, Journal of the American Statistical Association, 82 , 466-475.
[3] https://community.jmp.com/t5/Discovery-Summit-2017/Sharing-Interactive-Web-Reports-in-JMP-13/ta-p/44069
[4] http://coralreefdiagnostics.com
[5] https://community.jmp.com/t5/Discussions/posting-interactive-html-plots-on-websites/mp/60478
