透過 JMP® 共享互動式 Web 報告Heman Robinson，SAS JMP 首席軟體開發人員
過去二十年來，出現了多種支援互動式網頁的相互競爭的技術。最後，業界已經對一項技術進行了標準化，JMP® 已開始提供 HTML 版本 5 或互動式 HTML 報告。
互動式 HTML 支援 JMP 的許多探索性功能，包括點識別、連結和刷塗。保存的報告可以透過網路分享，或透過電子郵件發送給同事。本文介紹了何時以及如何使用互動式 HTML 來分享 JMP 結果。
背景
HTML，即超文本標記語言，是定義所有網頁結構的技術（ http://www.w3.org/html/）（Berners-Lee，1989 ）。 HTML 與層疊樣式表一起用於樣式設定（ http://www.w3.org/Style/CSS/ ）（Meyer，2004），與 JavaScript 一起用於程式設計（ http://www.ecmascript.org/）（Crockford，2008年）。
在版本 4 中，HTML 對於圖形和互動性的支援受到限制。為填補這一空白而開發的技術主要是瀏覽器擴充功能或「插件」。其中包括 Java 小程式、ActiveX 控制項、Flash 和 Silverlight。
從 2011 年左右開始，網頁瀏覽器開始支援用於圖形的新 HTML 畫布元素，以及用於互動的新控制項（例如滑桿）。此時，競爭技術開始衰落，人們開始使用 HTML5 支援互動式網頁。下圖顯示了求職網站 Indeed.com（ http://www.indeed.com/ ）上廣告中關鍵字頻率的趨勢。
圖 1. 互動式 Web 技術職位招募訊息
為了順應這一趨勢，JMP 與其他軟體產品一樣，將 Web 開發從 Flash 轉向了互動式 HTML。 JMP 互動式 HTML 報告是一個 HTML 文件，可供以下使用者共用：
- 將其發佈到互聯網上，
- 將其儲存到共用資料夾，或
- 透過電子郵件發送給同事。
圖 2. JMP 互動式 HTML 報告
何時使用它
互動式 HTML 需要嵌入資料。無論使用什麼資料來建立圖表，這些資料都嵌入在網頁中。數據被混淆了，但有動機的駭客還是可以讀取的。
看起來，透過加密資料可以減輕這種安全風險。不能。資料必須可以被網頁瀏覽器讀取。因此，加密資料需要解密金鑰，網路瀏覽器和其他所有人都可以讀取該金鑰。加密資料相當於為自己的房子購買一個昂貴的防盜警報器，然後把鑰匙放在墊子下面。
您可以透過匿名化資料來消除一些風險，例如，建立沒有名稱或ID列的資料子集。自己創建這個子集是最安全的。但是，JMP 報告中未使用的欄位不會嵌入到互動式 HTML 檔案中。因此，只要您不使用任何識別列作為標籤或其他目的，資料就會有效地匿名化。
如果您分析敏感數據，您始終可以使用不嵌入資料的靜態 HTML 格式（HTML 版本 4）。在「檔案：另存為」對話方塊中，HTML4 被簡單標記為「HTML 檔案」。 HTML5 被標記為“帶有資料的互動式 HTML”，以強調互動性和安全性。
圖 3. 靜態 HTML (HTML4) 和互動式 HTML (HTML5) 的「檔案：另存為」對話框
除了嵌入的資料之外，互動式 HTML 還需要現代的網頁瀏覽器。在 Windows 上，Internet Explorer 8 不支援 HTML 5，而 IE 9 和 10 僅支援其部分內容。 Android預設瀏覽器比較舊，速度比較慢，Chrome等瀏覽器容易下載。
自 2015 年起，JMP 建議在以下瀏覽器和裝置上使用互動式 HTML：
- Windows 上的 IE 11 與 Edge
- Windows 和 Mac 上的 Firefox
- Windows 和 Mac 上的 Opera
- Windows、Mac 和 Android 平板電腦上的 Chrome
- Mac 與 iPad 上的 Safari
- Kindle Fire 上的 Silk
我們不在手機上測試互動式 HTML。然而，在較新的 iPhone 和 Android 手機上，它通常運作良好。性能和功能因手機不同而有很大差異。
如何使用
儲存報告
若要以 HTML5 格式儲存報告，請在 Windows 上選擇“檔案：另存為：”，或在 Mac 上選擇“檔案：匯出”，然後指定格式“帶有資料的互動式 HTML”。
圖 4. 互動式 HTML（HTML5）的「檔案：另存為」對話框
互動式 HTML 支援 JMP 最常用的功能。如果您的報告包含不支援的功能，您將在對話方塊中看到警告，如圖 5 所示。如果發生這種情況，報告的一部分將匯出為靜態圖像，與靜態 HTML4 相同。
圖 5. 不支援功能的警告
大綱
當您建立互動式 HTML 報告時，建立頁面時關閉的圖形和表格將在網頁中保持關閉狀態，直到您開啟它們。透過點選或點選報告中的大綱按鈕來開啟或關閉報告部分。
下圖顯示如何開啟「失配度」表。 “變異數分析”和“參數估計”表已經開啟。
圖 6：使用大綱按鈕
JMP Interactive HTML 採用「行動優先」使用者介面設計策略（Wroblewski，2011）。當您建立互動式 HTML 報告時，您並不總是知道它會在哪些裝置上被讀取。因此，無論是在桌面還是行動裝置上，按鈕等控制項都很大且易於使用。
選單
使用選單來改變報告內容的狀態或外觀。菜單內容取決於相關大綱的內容。例如，Profiler 有一個選單可以重置其狀態。
圖 7：使用 Profiler 選單
氣泡圖具有廣泛的選單系統來改變其外觀和行為。
圖 8：使用氣泡圖選單
模式
關於使用者介面的模式，傳統的設計建議是「盡可能避免它們」（Nielsen，1993）。然而，為了支援像 JMP 這樣具有豐富互動功能的產品，某些模式是必要的。
一個熟悉的例子是選擇模式。您可能想要選擇單一物件或多個物件。單選和多重選擇是兩種不同的模式。
在桌面產品中，Shift 和 Ctrl 鍵用於在選擇模式之間切換。然而，在行動裝置上，這些密鑰並不存在。
因此，選擇模式以一對切換按鈕的形式顯示在頁面頂部。預設情況下，按下該對中的第一個按鈕。這使您可以一次選擇一個對象，並取消選擇所有其他對象。
圖 9：選擇單一對象
若要選擇多個對象，請按一下或點選第二個切換按鈕。這使您可以選擇或取消選擇多個物件。
下圖中，選取了三個直方圖條。與 JMP 一樣，所有圖表都是連結的，因此在一個圖表中選定的行會在所有圖表中突出顯示（Becker and Cleveland，1987）（Stuetzle，1987）。
圖 10：選擇多個對象
Shift 和 Ctrl 鍵的行為與切換按鈕的行為之間有有用的差異。這些按鍵可以實現臨時模式切換，有助於減少使用者錯誤（Raskin 2000）。切換按鈕可以實現持久模式的切換，這在行動裝置上更簡單、更容易學習。如果您在桌面上查看互動式 HTML 報告，則這兩種行為都受支援。
第二對切換按鈕將焦點從整個報告切換到資料。預設情況下，按下該對中的第一個按鈕。在行動裝置上，第一個切換按鈕使您能夠捲動和縮放報告。在所有裝置上，它使您能夠識別報告中的物件。互動式 HTML 報告中的幾乎所有物件都可以顯示一些識別資訊。
圖 11：識別對象
下圖顯示了使用 Iris.jmp 進行的雙變量擬合，Iris.jmp 是一個 JMP 樣本資料表，包含三種不同鳶尾花的 Fisher 測量值。一個資料點已透過其 X 和 Y 座標以及行號進行標識。下表顯示了p值及其相關描述。
圖 12：識別資料值
圖 13：描述p值
您並不總是想識別對像或操縱報告。通常，您的目標是探索數據。透過點擊或點擊第二個切換按鈕，您可以拖曳一個矩形來選擇圖表中的行。這稱為刷選，是探索多元資料的重要技術（Becker and Cleveland，1987）。拖曳矩形的中心來移動它，或拖曳角落來調整其大小。
圖 14：刷數據
為了獲得更大的功率，可以組合多種模式。如果您使用具有多項選擇的畫筆，這會導致畫筆擴展選擇範圍，「繪製」數據，如下圖所示。
這兩對模式支援資料探索最常見、最有用的互動功能。 JMP 提供了一組豐富的附加模式，其中許多都出現在工具面板中（Cooper 和 Reimann，2003）。由於遊標支援不佳，工具調色板隱喻在 Web 應用程式中用處不大，但其中一些模式可能會在未來的版本中得到支援。
圖 15：使用多項選擇進行刷塗
如何實現自動化
可以使用 JMP 腳本語言 (JSL) (SAS, 2014) 自動產生互動式 HTML 報告。新命令“儲存互動式 HTML”啟用此功能。
// 導出雙變數擬合。
dt = 開啟( “$SAMPLE_DATA/Big Class.jmp” ) ;
obj = 雙變量（Y（：體重），X（：身高），擬合線）；
obj << 儲存互動式 HTML( "C:\Bivariate.html" );
開啟(“C:\Bivariate.html”);
在上面的腳本中，「儲存互動式 HTML」指令後面跟著「開啟」指令。這會自動在您的預設網頁瀏覽器中顯示報告。
如何組織
如果您建立許多互動式 HTML 報告，您將受益於 JMP 自動發布外掛程式 (Valente、Brady 和 Kennedy，2014)。這提供了一種自動化的方式來組織您的報告，其中封面和縮圖草圖連結到各個報告。從 JMP 使用者社群(https://community.jmp.com/docs/DOC-6689 ) 下載 JMP 自動發布外掛程式。
JMP 自動發布外掛程式為我們在http://www.jmp.com/jmphtml5/上的範例產生了下面的封面。
圖 16. 使用 JMP 自動發布外掛程式組織的報告
未來工作
該專案的開發是由客戶需求驅動的。 JMP 11 支援最常用的表格和圖形。 JMP 12 中加入了氣泡圖和刻畫器。
對於未來的版本，對 GraphBuilder 的需求相當大。我們還希望將 JMP 自動發布插件整合到主產品中，並且我們最感興趣的是客戶的要求。
參考
Becker R. 與 Cleveland W. (1987)。 “刷散點圖”， 技術計量學 ，127-142。
Berners-Lee T.（1989 年）。 “資訊管理：一項提案”， 歐洲核子研究中心 。
Cooper A.和Reimann R（2003）。關於Face 2.0：互動設計要點。威利，322-323。
Crockford D.（2008 年）。 JavaScript：好的部分。奧萊利。
Meyer E.（2004 年）。層疊樣式表：權威指南。奧萊利。
Nielsen J.（1993 年）。可用性工程。學術出版社，146-148。
Raskin J.（2000 年）。人性化介面：設計互動系統的新方向。 ACM 出版社，55-59。
SAS（2014 年）。 JMP 11 腳本指南，第二版。 SAS 研究所
Stuetzle W.（1987 年）。 “Plot Windows”，美國統計協會雜誌， 82，466-475。
Valente D.、Brady B. 與 Kennedy, A. (2014)。 “用於自動發布互動式 HTML 報告的 JMP 外掛程式”， 2014 年 JMP 探索高峰會 。
Wroblewski L.（2011 年）。移動優先。一本與眾不同的書。
