758519_zh-TW

liliconcom

把海洋生物學家、電子遊戲和 JMP 結合會得到什麼？ （2020-US-45MP-543）

John Powell，SAS/JMP部門首席軟體開發人員

創新理念往往源自於不同產業方法的融合。 JMP Discovery Summit 和 JMP 用戶社群為跨產業思想交流提供了絕佳平台。本次演講源自於一位海洋生物學家在 JMP 使用者社群提出的需求：如何在有限的空間中展示眾多變數。視頻遊戲中使用的技術為解決方案提供了可能。我將示範 JMP 的可自訂視覺化功能如何幫助這些潛在方案的實現。 JMP 中提供的 3D 散佈圖功能也是電玩技術的應用之一。這種方法需要強大的圖形處理能力，而這通常是現代桌上型電腦所擁有的。但是，如果需要在網路上分享這些散點圖呢？人們用來瀏覽網頁的設備圖形處理能力差異很大。因此，我們需要使用即使在性能較低的設備上也能運作的技術。遊戲產業再次提供了解決方案—粒子系統！我將介紹粒子系統的基礎知識，以及如何將 3D 資料匯出到我使用粒子系統在網路上建立的 3D 散點圖應用程式中。

自動產生的成績單…

揚聲器	文字稿
喬波威	大家好，歡迎聆聽我的演講。
	本次演講的緣起是JMP使用者社群的討論。安德森·梅菲爾德博士是美國國家海洋暨大氣總署（NOAA）以及邁阿密大學的海洋生物學家。
	他研究珊瑚礁的健康狀況。他曾在我們JMP On Air的地球日特別節目中做過演講。他也會在本次會議上演講。
	所以，他在JMP用戶社群的貼文中貼出了這張照片。如果你仔細看，你會發現圖片上有很多代表珊瑚或珊瑚礁的圖案。
	它們將多個數據整合到一個小圖表中，這有點像電子遊戲中的玩家統計數據。
	它們會圍繞著玩家盤旋，看著玩家在場景中奔跑。所以現在你大概明白我為什麼要把演講題目叫做「當電子遊戲、海洋生物學家和JMP結合在一起會得到什麼」了吧？那麼，我們繼續。
	我將要討論的是JMP中基於遊戲或受遊戲啟發而實現的解決方案，包括使用自訂圖形腳本。
	自訂地圖。接下來，我將介紹我建立的一個基於 Web 的 3D 散佈圖應用程序，以及如何將 JMP 資料集整合到該應用程式中。
	以下是圖形腳本的範例。
	這裡有一個使用自訂地圖的例子。這是我的3D散點圖應用程式。
	那麼，我們就開始吧。為了示範如何使用自訂圖形腳本，我這裡有一個小範例。
	當我打開 JMP 並運行
	這個小圖表，實際上，我接下來要談談這個。
	我使用了我自己從零開始創建的虛構資料集。它主要講述的是一群魚從大堡礁一路游到雪梨的故事。
	所以，要進入圖形腳本，你可以選擇自訂。
	然後，這個小小的加號按鈕可以讓你加入新的腳本。它最初是空的，但我們在 JMP 中有一些示例。
	我喜歡多邊形腳本，它非常簡單，功能就是繪製三角形。所以如果我把它應用到我的圖表上，你就能看到一個三角形了。
	我們只用了三行程式碼：設定透明度、設定填滿顏色，然後繪製多邊形。
	但我們真正想知道的是，如何將它嵌入腳本中？最簡單的辦法就是點擊「答案」按鈕。
	然後將腳本儲存到腳本視窗。腳本內容如下：首先，啟動我的小型雙變量平台，輸入經緯度。下方是一個調度程序，其中包含一個添加圖形的腳本。
	然後是樣本中的三行。
	這是一個使用圖形腳本的非常簡單的例子。
	現在我要嵌入一個圖形腳本。它會在每個數據點上方繪製懸浮的長條圖。
	在這個應用程式中，我首先設定透明度，然後繪製我的小圖形的背景。
	一個為了飢餓，一個為了力量，一個為了速度。
	現在我要向你們展示整個腳本，因為它依賴其他東西。它依賴我設定的這些常數，這些常數主要用於處理顏色、背景以及其他一些事情，例如背景等等。
	這是我的繪製長條圖函數。它接受位置、長度和顏色三個參數。因此，它可以用於每個條形圖。如果我運行這個腳本…
	就是這個，你看到了那個帶有小圖案的圖形。
	就像遊戲裡那樣，每條魚上方都懸停著健康監測器，它們沿著澳洲東部洋流游向雪梨。
	這將幫助你了解該函數的工作原理，基本上是一步一步地講解。我們首先在螢幕上放置一個標記，然後為每個標記設定像素原點。
	然後我們開始繪製背景，但這需要幾個步驟。第一次設定線條粗細時，你其實什麼也看不見。
	然後我們設定顏色，設為黑色。接著我們移動滑鼠，畫一條很粗的背景線。
	對於每個長條圖，我們要先設定長條圖的顏色，然後再移動到指定位置，再畫一條線。接著繪製背景，設定背景顏色，並使其與長條圖銜接。當然，其他兩條線也需要重複這些步驟。
	現在你可以使用許多不同的圖形函數。這裡是 JSL 語法參考中的圖形函數部分，你可以建立任何你想要的東西。開始吧！
	接下來，我將談談如何使用自訂地圖。
	打擾一下。
	要使用自訂地圖，基本上需要提供兩個表。第一個表格定義了所有要使用的形狀。第二個表則為這些形狀命名。
	至於這個名稱列，基本上你需要新增的是一個映射角色列屬性，而且它的類型必須是形狀名稱定義。我稍後會示範給你看。
	為了舉一個非常簡單的例子，當然，我們需要的是大類。我將舉一個非常簡單的例子。
	還有一張地圖，上面只有兩個長方形。我這就打開那些文件。
	正如我所說，這是一張非常小的地圖。為了向您展示這些座標，我這裡有一張很小的地圖。
	這裡有一個腳本，它基本上顯示了這些要點。
	如果我選取最上面的四個，那就是上面的長方形，接下來的四個就是下面的長方形。
	上面的是體重，下面的是身高。如果你查看列屬性，
	這是地圖角色，形狀名稱定義。
	地圖準備好後，我們就可以開始大班制了。
	我們不能直接重複使用它。首先我們要做的是提取身高和體重這兩列數據，然後將它們堆疊起來。所以我們進入表格部分。讓我來堆疊它們。
	現在我得到了一個表格，其中的列是堆疊的。
	您可以看到標籤的高度和寬度交替顯示，為了將其連接到地圖文件，我們需要新增另一個列屬性。
	這個在這裡，又是映射角色。但我們不會說“形狀名稱定義”，我們會說“形狀名稱用途”，我們需要選擇…
	映射文件，即映射文件的名稱。
	同時將列名設定為 name。
	這樣就完成了。現在我們有了這些數據，就可以把它用在圖表裡了。
	我們要做的圖表基本上是利用標籤列來建立地圖形狀，這樣就能設定頂部和底部形狀，然後我們可以拖入包含所有資料的資料列。
	進入顏色角色。好了，以上就是大班所有學生的總結，但我們真正想說的是…
	每位學生一份。如果我把它拖到捲軸上，會有點擠，但我打算透過每行設置 10 層來分散開來。
	好了。這基本上就是我想要的效果。這張圖表很有用。
	單獨。
	現在我們來做一些更複雜的事情。
	其實，如果你要做更複雜的事情，你可能需要使用自訂地圖來建立插件。
	這是一個很棒的插件。它允許你拖入圖像，然後沿著圖像進行描摹。
	當你完成所有形狀的描繪後，點擊“使用隨機數據完成”，它就會生成
	你需要兩個形狀文件，以及一個隨機資料集，用於測試你的自訂地圖。這裡我舉個例子，只設定了四個變量，其中一個位於中心。所以它基本上是我之前幻燈片中展示的地圖的正方形版本。
	但這並非我們想要的結果。我們想要的是圓形的，我記得是梅菲爾德博士稱它為複雜派。
	我不知道這算不算正式術語，但我決定用腳本來建構這些東西。
	所以我想要做的就是創建形狀文件，確保我得到了醫生要求的東西。那就是四個形狀，每個形狀的中心都有一些東西。
	然後我想，嗯，我是個程式設計師。我喜歡多做一些事情，讓程式更靈活一些。
	所以我認為可能有些人也想做同樣的事情，但只有兩個變量，外加一個平均值或中心變量，或更多。
	我當時想，如果能畫菱形或正方形等其他形狀就更好了。我並非天才，只是運氣好。 Xan Gregg 正好回答了一個關於如何在 JMP 中繪製極坐標圖的帖子。
	它來了。
	好了，就這樣。
	他們想要的形狀是這樣的，這和我需要的形狀非常相似。
	Xan 的作品真的很棒。這是一個靈活的腳本，可以實現這個功能，並在圓週上產生這些楔形，但唯一缺少的是中心點以及我想要的特定檔案命名方式。
	但其實不難。我的腳本就是用來做這個的。當你運行“複雜派”程序時，裡面有這個派的配方，你打開“複雜派”製作器，然後添加一些配料。首先，你需要指定形狀的數量。
	然後，你要決定要把它放在正中間，還是放在頂部，或稍微偏向一邊。
	然後還有一個表示平滑度的變數。
	然後，您還需要提供內半徑（您想要更多填充還是更少填充）和外半徑。
	當然，下一步是運行腳本，它將生成
	這些
	這裡有形狀檔案供您選擇，還可以做一個範例測試，就像自訂餅圖產生器或自訂地圖外掛程式一樣。這裡有一個複雜餅圖的範例，形狀數量為 5。
	平滑度設定為 7。如果它們要…的話，用 5 或 6 可能也還可以。
	畫得很小。尺寸其實不重要，更重要的是內半徑和外半徑的相對大小。這和梅菲爾德博士的設想大致相同，所以我沿用了內半徑4和外半徑9的設定。
	那麼，讓我們看看如何實際使用這些東西。就像我們在“大班級”演示中所做的那樣，我們需要…我們需要堆疊這些列。但有一點不同，我的 shapefile 中並沒有強度和健康變數。它們實際上是
	在形狀檔案中，它們被命名為楔形 1、2、3 和
	中心。
	所以我需要建造一個
	文件將
	將兩者聯繫起來。
	首先，我舉一個小型學校的例子，
	我透過將健康、力量、速度這幾列數據堆疊在一起來實現這一點。
	這就是我要使用的形狀檔案…也就是名稱形狀檔案。
	請注意它具有列屬性
	地圖角色，
	好的，映射角色定義。
	當你製作自己的自訂形狀時，這是必要的。
	所以，我建立的連結文件，也就是將列映射到形狀的文件，基本上是透過列出標籤來實現的。
	堆疊文件。
	然後，在另一列“形狀名稱”中，我列出了形狀及其名稱。
	現在，這裡的形狀名稱很重要。
	有一個屬性是地圖角色，但這個屬性是形狀名稱用途。
	這個資料標籤列將有一個連結 ID，以便可以虛擬地連接到我的堆疊表。
	現在我已經把這些桌子都擺好了，
	下一步就是實際建立圖表。
	現在，操作步驟和之前類似。唯一的區別是，我不再直接將標籤拖曳到地圖形狀中，而是使用虛擬連接列，將其拖曳到地圖形狀中，這樣就得到了我想要的形狀。接下來，我需要將資料新增到顏色列。
	然後加上名字。我的魚就都在這裡了。
	每個圖案都對應一張圖。為了找到合適的漸變效果，我在這裡設定漸變，就是這個效果。
	為了確保綠色效果良好，我要把顏色反轉一下。
	好了，就是這樣。這就是…
	這張地圖本身很有用，因為你可以查看每條魚的狀況。當然，我還想在此基礎上做一些更深入的開發。
	我希望能夠將這些圖像添加到工具提示中。
	為了實現這一點，我們將把它製作成資料表。
	請把我之前的文件和那張圖片找回來。
	所以，在這裡，紅色三角形下方有一個「建立資料表」的按鈕。它會產生一個新的數據表。
	有了這些圖片，這真的很有用，尤其是當我們把它連結回去的時候。我會把它設定成連結ID，這樣我就可以從我簡單的學校文件中指向它，這樣我就可以讓每個標記找到每個字元的圖表。
	好的，我把這些內容儲存在另一個文件裡，我現在要打開那個文件。我把它命名為「健康圖片」。
	所以我們不再需要它了。
	我們不再需要堆疊文件了。
	但我們真正需要的是我一開始提到的那個小型學校的例子。
	現在，為了讓這些內容顯示在螢幕上，你需要做的第一件事是…
	圖表的作用是設定影像列，即虛擬列。
	如標籤所示。
	你也可以用簡單的圖表來做到這一點。
	我們已經有一個例子了……好吧，我再打開一次。何樂而不為呢？這是我的比賽腳本，只是為了向你們展示我是從零開始的。但是，既然我已經為這一列添加了標籤，現在當我把滑鼠懸停在這些圖表上時，你們會看到…三個
	此圖形包含資訊片段，您可以執行此操作並固定任意數量的字元。
	這是使用這些圖形的一種方法。
	另一種方法是使用標記。
	您將看到的圖形將漂浮在這些點上，並取代我之前使用的菱形。
	我會把那些健康圖片、小學校的圖片，甚至那張圖表都帶回來。
	所以現在，我們有了這些鑽石。為了把它們變成這些形狀，
	我們不得不再增加一個。
	給這個虛擬連接欄添加一個徽章。現在它非常流行，所以可以用作標記。因此，這裡會顯示一個新的徽章。在我身後，
	你會看到這些圖像被放置在場景中。最後一點，我不太喜歡圖像周圍的白色部分。實際上，這是圖表圖像本身就包含的。
	解決這個問題的一個方法是，它有一個腳本可以找到白色區域並設定 alpha 通道，使其透明。這樣我們就得到了漂亮的圖表。
	是圓形，而不是方形背景。你可能還需要做的就是增大標記的粗細。
	我們最多可以做到11。
	這樣看起來怎麼樣？跟我之前想的差不多；10個可能比較好。但我喜歡11個。好了，就是這樣。
	使用標記點。我們想製作一個更複雜的圖表。安德森·梅菲爾德博士想要的是在標記點後面添加一個熱力圖。這相當複雜，但 JMP 可以處理。這其實是一個等高線圖。
	我這裡有一個小學校的另一個版本。但這次，我加入了海洋溫度資料。
	在底部
	它們被隱藏起來，所以不會顯示為實際積分。
	我已經為此創建了鏡像。
	實際上，這些圖像和我之前建立的圖像是一樣的。
	我先從…開始
	到此為止，這樣我們就能真正看到我想要的效果了。所以，我基本上想要這些圖形。
	將滑鼠懸停在輪廓上，這裡會出現幾個圖例，顯示各個部分的含義。
	這應該不難。我會先放好地圖，並在 x 軸和 y 軸上標出經緯度，這樣就能完成一部分工作。
	所以我首先要做的就是添加輪廓。
	我們需要添加一點色彩，所以我將臨時角色拖曳到顏色角色上，然後調整這個輪廓的色階數。
	稍微調整一下透明度，增加一些平滑度。
	接下來我想做的就是讓它稍微透明一點。
	我們不妨加上0.6。
	這和我之前的情況差不多。現在要新增標記，有兩種方法。你可以按住Shift鍵點擊這些點，或是直接拖曳。拖曳的方法如下：
	然後您可以再次設定標記大小。
	這樣做
	去這裡，做其他操作，這次我們用10。我覺得11有點太大了。好了，看起來不錯。快完成了。我們要處理這個圖例。怎麼把這些顏色放進去呢？嗯，我們已經有了生命值角色。
	你可以把它拖到這裡角落，加入第二個顏色角色。一開始可能會弄亂你的圖表。
	我們可以解決這個問題。問題在於輪廓其實並不需要使用健康角色。所以如果我們禁用它，就能達到我們想要的效果。
	接下來，你需要為圖例加上顏色。我們可以像之前一樣再次進行自訂。
	這次我們打算多做一些。我想要四個標籤。
	我希望它從五點開始，一直到…
	20.
	哦，我也想把顏色反過來。
	好了，差不多就是這樣了，快完成了。我只想再美化一下。圖例裡還有幾處要修改。
	所以，請前往圖例設置，移除那些似乎沒有太大作用的元素，並將生命值圖例移到最上方。
	就是這樣。所以我覺得我基本上已經達到我的預期目標了。
	這樣我就可以把它處理掉了。我覺得現在並非所有人都需要它了。
	但我還想補充一點。
	不如加上這個圖例，因為之前根本看不懂這張圖的每個區域分別代表什麼，例如飢餓、速度、力量和健康。幸好我們現在有了圖例。
	映射文件。它從列名映射到形狀。
	我這就打開它一會兒。
	所以你可以看到，我已經為所有行都添加了標籤，也為資料標籤列添加了標籤。這意味著當你創建圖表時，
	所有東西都會被標記出來。所以這個很簡單。你只需取得形狀名稱並將其拖曳到地圖角色中，我們就完成了這個圖形。
	所以如果我想把它加到我的場景中，最好的方法就是選中它，點擊加號，然後複製它。
	然後你打開一個影像編輯軟體，把它儲存到磁碟。當然，我已經這麼做了。所以我接下來要…
	一旦你有了那個，就顯示出來，我需要再次調出我的圖形。
	哇，我可以直接把它拖進去。
	找到了。哦，不在那裡。好吧，其實還有辦法找到它。去自訂設定裡，它被放到背景裡了，因為通常情況下，拖入圖片時，拖入的也是背景圖片。
	所以現在我們只需要……先把這個移開，這樣你就能看清發生了什麼事……走到前面去。來了。
	好了，就在前面。我想稍微增加一點透明度，因為我覺得它有點太亮了。
	所以我們設為0.8。
	現在我們只需要把它拖到角落裡，就差不多完成了。
	好的，工作量很大，牽涉到很多文件。讓我們來總結一下所有用到的文件。我用我開發的複雜餅圖產生器產生了所需的兩個地圖檔案（形狀檔）。我選取了小塊區域並進行了堆疊。
	我創建了這一列來格式化映射文件，該文件需要指向具有映射角色的名稱文件。我使用連結引用執行虛擬連接，返回到小型學校堆疊表。
	然後我製作了一個圖形，我想把它轉換成數據表並保存到我的健康圖像.jmp 檔案中。
	當然，這必須透過虛擬方式與最初的小學校連接起來，這樣我才能用它製作圖形。
	然後，我對小型學校的海洋溫度做了同樣的事情，我的健康圖片連結參考。
	我只是…我把我的列轉換成形狀文件，然後繪製了圖例，用來表示我嘗試製作的海洋溫度圖表，我基本上就是把它拖進去的。
	好了，我想做的二維演示就到此為止了。我們稍作休息，接下來我們將進入三維世界，甚至包括網路世界。
	應用。
	好的。
	這是我的網頁版 3D 散佈圖應用程式。
	接下來我要向你們展示的是如何將 JMP 中的資料匯入到這個軟體中。
	我的應用程式是基於 JMP 的 3D 散點圖的。所以這裡只是為了讓您回憶一下它的樣子。
	現在我這裡有個小示範。
	所以基本上，它有…我將向您展示一些功能，首先是能夠選擇不同的資料集。這是鑽石資料集。
	當然，還有這些繪圖點。這就是關鍵所在。它們是用這種小球形狀繪製的，我稍後會解釋它是怎麼做的。
	但你也可以像在 JMP 中一樣旋轉它，也可以縮放、前後移動它。
	它還帶有懸停標籤。你可以看到右下角我畫了座標軸和網格，並做了一些自訂設定。不多。
	你可以更改背景，設定牆壁顏色。我們來看看能不能加點藍色。
	或許您不太喜歡這樣。但這只是個示範。之後您可以調整標記的大小。
	網路上已經有了。
	好的，當我開始開發這個應用程式時，我首先想知道的是，它能否在網頁上運行？它在我的 iPhone 或 iPad 上能否流暢運作？
	因為那些機器的性能不如我的桌上型電腦。所以我創建了內建的 3D 模型，或者說是三個隨機資料集，每個資料集的點數遞增。然後我使用了…
	我當時覺得在低功耗設備上嘗試 25,000 毫安時比較合適，但實際上在高功率設備上你可以嘗試更高的毫安時。
	然後我想，好吧，我應該嘗試引入一些真實的數據，所以我找到了著名的鳶尾花數據集，它是 CSV（逗號分隔變數）格式的。
	我把它導入進來了。但我必須編寫一些程式碼才能將其轉換為我的內部結構。
	我當時想，JMP有很多資料集，我寧願直接匯入這些資料集。所以我導入了汽車、鑽石和流式細胞儀的數據。唯一的區別是流式細胞儀的數據不太好。
	由於涉及使用顏色，他們不得不修改我的應用程序，使其能夠接受一個沒有任何顏色的圖表。
	這個應用程式非常簡單，只有一個頁面，就是一個單頁網頁應用程式。只有一個HTML文件，幾個JavaScript文件，也用到了一些第三方函式庫、一種字體和一個紋理，紋理是一個用來表示形狀的球體。
	我從遊戲產業借鏡的技術是粒子系統。它們在模擬遊戲和3D視覺化中應用非常廣泛。你可以用它們做出一些很酷的效果，例如火焰、煙霧、煙火和雲。
	我之前曾花過一段時間參與商業遊戲引擎的開發，我的職責是改進粒子系統。
	所以，我之前確實有一些這方面的經驗。嗯，那是在 C++ 領域，不是 JavaScript。不過，由於我從事互動式 HTML5 和 JMP 開發已經有一段時間了，我覺得是時候看看自己能否勝任了。
	我將自己的兩大愛好結合起來，開發了一個基於 Web 的粒子系統版本。我很幸運，找到了 Three.js 這個函式庫。
	它支援硬體加速的 3D 繪圖，並且擁有優秀的文件和大量的程式碼範例，包括粒子系統，這使得建立我的應用程式變得非常容易。
	實際上，對我來說最困難的部分是如何從 JMP 將資料匯入其中。
	但我會…我會分享相關的腳本。我做的一件事就是確保這些物件的使用非常方便。
	在我的應用程式中，我建立了一個 JavaScript 物件數組，並為數值列添加了最小值和最大值，這樣我就不必在 JavaScript 中計算這些值了。當然，JMP 在計算這類數據方面非常出色。
	嗯，對於類別，也就是顏色列，我需要做的就是使用一個類別字典。基本上，就是把所有類別的名稱放在一個清單中，然後透過從零開始的索引來指向這些值。這就是這種結構的工作原理。
	我想做一個使用者介面。實際上，這很容易做到。我馬上就給你示範一下。基本上，我只需要把 x、y 和 z 欄位限制為數值即可。
	然後將其限制為顏色角色的分類列。
	那我們來看看這段程式碼。
	好的，首先我舉一個非常簡單的資料集的例子。
	然後，對話功能就很容易實現了。我使用了列對話框，分別指定了數值列和顏色列的設置，並確保建模類型為分類數據，這樣它就同時具有序數和名義屬性。
	接下來，我取得列數據，並建立所需的 JavaScript 物件。這是最小值和最大值字串。而這只是建構這些物件的字串。
	如果還有顏色列，我也會做同樣的處理。這稍微複雜一些，因為我需要提取這些字串並將它們放入 JavaScript 物件中。
	最後，它只需要將此內容保存到文字檔案中。
	那麼，我們來試試看。
	當然，我會使用 Big Class，所以它會是一個很小的檔案。
	和
	於是我運行了腳本。
	它問我，我的XYZ想要什麼。我已經選擇了身高和體重，年齡是數值列，所以我也會用它，性別很適合用來選顏色。
	這樣就完成了。實際上，這裡的輸出結果會告訴我文件在哪裡。
	我剛好在下一張投影片放了那部分內容。那我們來看那部分吧。
	所以，我猜你肯定一直很好奇 JavaScript 中的 Big Class 會是什麼樣子。這就是了。你可以看到這三個部分。
	數值列包含最小值和最大值，顏色列則包含 F 和 M 這兩個類別的字典，其中 0 代表女性，1 代表男性。好了，我的精彩演講就到此結束，希望你們喜歡。
	感謝觀看，如有任何疑問，請隨時提出。

進階統計建模基礎資料分析與建模內容組織數據探索與視覺化實驗設計品質與工藝工程可靠度分析分享和交流成果