揚聲器 | 成績單 |
| 喬波 | 你好，歡迎來到我的演講。 |
| 本次演講的動機是基於 JMP 使用者社群的討論。安德森·梅菲爾德博士是美國國家海洋暨大氣總署 (NOAA) 和邁阿密大學的海洋生物學家。 |
| 他研究珊瑚礁的健康狀況。他在我們的 JMP On Air 地球日特別節目中發表了演講。他也在這次會議上發表了演講。 |
| 因此，在 JMP 用戶社群貼文中，他在此處發布了這張圖片。如果你能看到的話，它有所有這些代表珊瑚或珊瑚礁的圖形 |
| 它們代表多個數據，全部都在一個小圖形中，這有點像視頻遊戲，當你有玩家統計數據時 |
| 當它們在場景中奔跑時，它們會在玩家周圍盤旋。所以現在你可能明白為什麼我把我的演講稱為“當你將電子遊戲、海洋生物學家和 JMP 結合起來時你會得到什麼？”那麼讓我們繼續吧。 |
| 我要談論的是 JMP 中可能實現的基於遊戲或受遊戲啟發的解決方案，包括使用自訂圖形腳本， |
| 自訂地圖。然後我將討論我建立的基於 3D Web 的散點圖應用程式以及如何將 JMP 資料集整合到該應用程式中。 |
| 這是圖形腳本的範例。 |
| 這是使用自訂地圖的範例。這是我的 3D 散點圖應用程式。 |
| 那麼就讓我們開始吧。要了解如何使用自訂圖形腳本，我在這裡提供了一些範例。 |
| 當我打開 JMP 並運行 |
| 這個小圖，實際上，我會談論這個。 |
| 我使用這個從頭開始創建的虛構資料集。這基本上是關於魚類的種族從大堡礁一直到雪梨。 |
| 因此，要獲得圖形腳本，您可以做的就是進行自訂。 |
| 然後這個小加號按鈕可以讓您新增一個腳本。一開始是空的，但我們在 JMP 中有一些樣本。 |
| 所以我喜歡多邊形腳本。這很簡單。它只是畫了一個三角形。因此，如果我將其應用到我的圖表中，您可以在其中看到一個三角形。 |
| 我們只花了三行程式碼，設定透明度，設定填滿顏色，然後繪製多邊形。 |
| 但我們追求的是，如何將其實際嵌入腳本中？所以最簡單的方法就是按下接聽按鈕 |
| 然後將腳本儲存到腳本視窗。這是腳本。首先，我的小型雙變量平台正在啟動，包含緯度和經度。下面有一個包含新增圖形腳本的調度。 |
| 然後是樣本的三行。 |
| 這是一個使用圖形腳本的真正簡單的範例。 |
| 現在這是我要嵌入的圖形腳本。它繪製了漂浮在每個點上的這些條。 |
| 我在這個應用程式中首先要做的就是設定透明度，然後繪製小圖形的背景。 |
| 一種是飢餓，一種是力量，一種是速度。 |
| 現在我將向您展示整個腳本，因為它依賴於其他東西。它依賴於我設定的這些常數，這些常數主要用於處理顏色和背景以及諸如背景之類的一些內容。 |
| 這是我的功能繪圖列。它需要一個位置、長度和顏色。這樣就可以用於每個欄位。所以如果我運行該腳本。 |
| 就是這樣，你已經得到了帶有小圖標的圖形 |
| 當魚順澳大利亞東流向悉尼游去時，一種受遊戲啟發的健康監測器會懸停在每條魚的上方。 |
| 這將為您提供一個想法，基本上是該功能如何運作的一步一步。我們從螢幕上的一個標記開始，對於每個標記，我們設定像素原點。 |
| 然後我們開始繪製背景，但這需要幾個步驟。我們第一次設定線條粗細時，您實際上看不到任何東西。 |
| 然後我們設定顏色，它將是黑色。然後我們進行移動和線條繪製背景和非常粗的線條。 |
| 對於每個條形，我們將設定條形的顏色，移動到該位置，然後繪製一條線。然後我們繪製背景，設定其顏色並繼續長條。當然，我們對其他兩條生產線也這樣做。 |
| 現在您可以使用許多不同的圖形功能。這裡是 JSL 語法參考的圖形函數部分，您可以建立任何您想要的內容。所以就去做吧。 |
| 接下來，我將討論使用自訂地圖。 |
| 打擾一下。 |
| 要使用自訂地圖，基本上您需要提供兩個表。第一個表格是您要使用的所有形狀的定義。第二個命名了表中的形狀。 |
| 對於這個名稱列，基本上您需要新增的是地圖角色列屬性，並且它需要是形狀名稱定義類型。我會在一分鐘內向您展示這一點。 |
| 那麼只是做一個真正簡單的例子，當然我們需要的是Big Class。我將有一個非常簡單的。 |
| 它的地圖也只有兩個長方形。讓我打開這些文件。 |
| 所以正如我所說，這是一張非常小的地圖。為了向您展示這些座標，我有一些 |
| 這裡的腳本基本上顯示了重點。 |
| 如果我突出顯示前四個，那就是頂部矩形，接下來的四個是底部矩形。 |
| 上面的是重量，下面的是高度。如果你看一下列屬性， |
| 這是地圖角色，形狀名稱定義。 |
| 所以一旦我們準備好這張地圖，我們就可以打開大類了。 |
| 我們不能直接重複使用它。我們首先需要做的是獲取身高和體重列並將它們堆疊起來。所以我們去餐桌。讓我把它們疊起來。 |
| 現在我有一個表格，其中堆疊了這些列。 |
| 您會看到標籤具有交替的高度和重量，為了將其連接到地圖文件，我們需要做的是添加另一個列屬性。 |
| 這個就一直到這裡，再次映射角色。但我們不會說形狀名稱定義，我們會說形狀名稱使用，我們需要選擇 |
| 地圖文件，名稱地圖文件。 |
| 並將列設定為名稱。 |
| 然後我們就完成了。現在我們已經有了它，我實際上可以在圖表中使用它。 |
| 我們要處理的圖表基本上使用地圖形狀的標籤列，它設定頂部和底部形狀，然後我們可以拖曳包含所有資料的資料列 |
| 進入色彩角色。就這樣，這是大班所有學生的總結，但我們真的很想要得到 |
| 每位學生一份。如果我將其拖曳到換行角色，它會有點緊，但我將透過每行執行一個層級並將其設為 10 來展開它。 |
| 我們開始吧。這正是我所追求的。這可能是有用的圖表 |
| 在其自己的。 |
| 現在讓我們做一些更複雜的事情。 |
| 好吧，實際上，如果您正在做更複雜的事情，您可能需要使用自訂地圖建立器外掛程式。 |
| 這是一個很棒的插件。 |
| 當您完成所有形狀的追蹤後，按一下“使用隨機資料完成”，它將生成 |
| 您需要的兩個形狀文件，以及允許您測試自訂地圖的隨機資料集。這是我只做了四個變數和一個在中心的變數。所以它基本上是我在原始幻燈片中看到的方形版本。 |
| 現在這並不是我們的目標。我們想要一些圓形的東西，我相信梅菲爾德博士稱之為複雜的餡餅。 |
| 我不知道這是否是官方術語，但我決定用腳本來建立這些東西。 |
| 所以我想做的是建立形狀文件並確保我得到了醫生的命令。那是四個形狀，中間有一些東西。 |
| 然後我想，好吧，我是一名程式設計師。我喜歡做得更多一點，做得更靈活一點。 |
| 所以我想也許有些人想做同樣的事情，但只有兩個變數加上一個平均值或中心變數或更多。 |
| 我想也許能夠製作不同的形狀（例如菱形或正方形）會很好。所以，我不是天才。我很幸運。 Xan Gregg 實際上回答了一篇關於如何在 JMP 中製作極坐標圖的文章。 |
| 它來了。 |
| 我們去吧 |
| 他們正在尋找像這樣的形狀，它看起來非常像我需要的形狀。 |
| Xan所做的事情真的很棒。這是一個靈活的腳本，可以執行此操作，並圍繞圓生成這些楔形，但唯一缺少的是中心以及以我想要的特定方式命名文件。 |
| 但這並不太難。這就是我的腳本所做的。當你運行複雜的餡餅時，有這個餡餅的配方，你打開複雜的餡餅製作器。然後你添加一些成分。首先，你需要說出形狀的數量。 |
| 然後你是否要將其居中，無論是在頂部還是稍微偏向一邊。 |
| 然後還有一個平滑度變數。 |
| 然後您還需要提供內半徑（無論您想要更多填充還是更少）以及外半徑。 |
| 當然，下一步是運行腳本，它會生成 |
| 這些 |
| 為您建立形狀文件，並進行範例測試，就像自訂餅圖製作器或自訂地圖新增一樣。 |
| 並將平滑度設為七。你可以使用五個或六個，如果它們是的話，那可能還是沒問題的。 |
| 畫得真小。大小並不重要。更重要的是相對內半徑和外半徑。這大約是梅菲爾德博士要做的，所以我堅持用四個作為內半徑，九個作為外半徑。 |
| 那麼讓我們看看如何實際使用這些東西。就像我們在 Big Class 演示中所做的那樣，我們將不得不......我們將不得不堆疊列。但有一點不同的是，我的形狀檔案中並沒有真正的力量和健康變數。他們其實是 |
| 在形狀檔案中，它們被命名為楔形 1、2 3 和 |
| 中心。 |
| 所以我需要建立一個 |
| 文件將 |
| 將兩者連結在一起。 |
| 首先，我有這個堆疊的小型學校範例， |
| 我透過將健康、力量、速度欄堆疊在一起來做到這一點。 |
| 這是形狀檔案...我將要使用的名稱形狀檔案。 |
| 請注意，它有一個列屬性 |
| 地圖角色， |
| 對了，映射角色定義。 |
| 當您製作自己的自訂形狀時，這是必需的。 |
| 因此，鏈接的文件，將列映射到形狀，我基本上是通過列出我的內的標籤來構建的 |
| 堆疊文件。 |
| 然後在另一列“形狀名稱”中，我列出了形狀名稱。 |
| 現在，重要的是這裡的形狀名稱 |
| 有一個屬性是地圖角色，但這個屬性是形狀名稱使用。 |
| 這個資料標籤列將有一個連結 ID，因此它可以虛擬地連接回我的堆疊表。 |
| 現在我已經把這些表都設定好了 |
| 接下來要做的實際上是建立一個圖表。 |
| 現在，它將與我之前所做的類似。一個區別是，現在我使用這個虛擬連接列，而不是只是將標籤向下拖曳到地圖形狀，將其向下拖曳到地圖形狀，這就是我想要的形狀。接下來我需要做的是將資料新增到顏色列。 |
| 然後新增名稱進行換行。還有我所有的魚 |
| 每一個都有一張圖形。為了嘗試獲得正確的漸變，我轉到此處的漸變，這就是這裡的漸變。 |
| 我想確保綠色很好，所以我要反轉顏色。 |
| 我們終於得到它了。這是 |
| 地圖本身很有用，因為您可以查看每條魚並了解它們的表現。但當然，我想為此做更多的事情。 |
| 我想做的是將這些圖像放入工具提示中。 |
| 為了做到這一點，我們將製作數據表。 |
| 帶回我的文件和那張圖片。 |
| 所以它在這裡要做的是，在紅色三角形下面有一個數據表的製作。這將產生一個新的數據表 |
| 包含所有這些圖像，這非常有用，特別是如果我們將其連結回來。我會轉動它並將其設置為連結 ID，以便我可以從我的簡單的小型學校文件中指向它，這樣我就能夠擁有每個標記，找到每個字符的圖表。 |
| 好吧，我已經將其實際儲存在另一個文件中，我將打開該文件。我稱之為健康圖像。 |
| 所以我們不再需要這個了。 |
| 我們不再需要堆疊文件了。 |
| 但我們確實需要的是我開始時的小型學校示例。 |
| 現在您需要做的第一件事是讓這些顯示在 |
| graph就是要設定那個影像列，那個虛擬列， |
| 如標籤所示。 |
| 您也可以在簡單的圖表中執行此操作。 |
| 所以我們已經有了一個例子......好吧，我要再次打開這個。為什麼不？我的比賽腳本，只是為了向您展示我是從頭開始的。但由於我已經標記了這一欄，現在當我將滑鼠懸停在其中一個圖形上時，您會得到......這三個圖形 |
| 該圖形的資訊片段，您可以這樣做並固定任意數量的這些字元。 |
| 這是使用這些圖形的一種方法。 |
| 另一種方法是使用 use for 標記。 |
| 您將獲得的圖形將漂浮在點上，並取代我之前使用的菱形形狀。 |
| 我會帶回那些健康圖像，小學校，我甚至會帶回那張圖片。 |
| 所以現在，我們已經得到了這些鑽石。為了把它們變成這裡的這些形狀， |
| 我們必須添加另一個 |
| 此虛擬連線列的徽章。它真的很受歡迎，所以可以用來做標記。因此出現了新的徽章。而在我身後， |
| 您會看到這些圖像已放入場景中。最後一個細節是我不太喜歡圖像周圍的白色。這實際上已內建到圖形圖像中。 |
| 我可以解決這個問題的一種方法是，它有一個腳本可以找到白色區域並設定 Alpha 通道，以便使它們透明。所以現在我們有一個很好的圖表 |
| 圓形，而不是方形背景。您可能想做的另一件事是增加標記大小。 |
| 我們最多可以到 11 個。 |
| 看起來怎麼樣？這看起來很像我所擁有的； 10 可能會更好。但我喜歡去 11 點。 |
| 從標記中使用。我們想要製作一個更複雜一點的圖表。這就是安德森·梅菲爾德博士想要的，是標記後面的熱圖。這相當複雜，但 JMP 可以處理。這實際上是一個輪廓。 |
| 所以我這裡有一個小學校的另一個版本。但這一次，我得到了海洋溫度 |
| 在底部 |
| 並且它們是隱藏的，因此它們不會顯示為實際點。 |
| 所以我已經為此構建了圖像。 |
| 實際上，與我之前構建的圖像相同。 |
| 我將從 |
| 到這裡就結束了，這樣我們就能真正明白我要做什麼。所以我基本上想要這些圖形 |
| 懸停在輪廓上，這裡有一些圖例顯示了事物的本質。 |
| 那應該不會太難。我將從已經放置的地圖開始，並且 x 和 y 上已經有經緯度。 |
| 所以我想做的第一件事就是添加輪廓。 |
| 我們需要提供一點顏色，所以我將臨時角色拖曳到顏色角色上，然後我將調整該輪廓上的等級數。 |
| 稍微改變 alpha 並加入一些平滑度。 |
| 接下來我想做的就是讓它變得透明一點。 |
| 讓我們給它加上 .6。 |
| 這和我之前的情況差不多。現在要新增標記，您可以透過兩種方法來執行此操作。您可以按住 Shift 鍵並按一下這些點，也可以將其拖曳到。 |
| 然後你可以再次設定標記大小， |
| 這樣做是透過 |
| 去這裡做其他的，這次我們用 10。我覺得11有點太大了。好吧，看起來不錯。差不多就這樣了。我們想為這個傳奇而努力。我們如何將這些顏色放入其中？好吧，我們已經扮演了健康角色。 |
| 您可以將其拖曳到角落，只需新增第二個顏色角色即可。最初有點弄亂你的圖表。 |
| 我們可以解決這個問題。問題是輪廓並不真正需要使用健康角色。因此，如果我們禁用它，那麼我們就回到了我們想要的狀態。 |
| 因此，您要做的下一件事就是為此處的實際圖例添加顏色。我們可以像以前一樣再次自訂它。 |
| 到時候我們會做更多的事情。我想要四個標籤。 |
| 我想讓它從五點開始一直到 |
| 20. |
| 哦，我也想反轉顏色。 |
| 到了這裡，看起來很像，就快完成了。我只是想把它美化一點。我想修復傳說中的一些問題。 |
| 因此，進入圖例設定並刪除這些似乎沒有添加太多的東西，並將健康圖例移至頂部。 |
| 我們就有了。所以我認為我正在盡我所能地匹配我想要的東西。 |
| 這樣我就可以擺脫那個了。我相信不再需要這個了。 |
| 但我確實想補充一點。 |
| 添加這個圖例怎麼樣，因為它並不是真正了解該圖形的哪個區域做了什麼的方法，你知道飢餓、速度、力量和健康狀況。幸運的是我們有那個 |
| 映射文件。它從列名稱到形狀。 |
| 我想先談一下這個問題。 |
| 因此，您可以在這裡看到我已經標記了所有行，並且還標記了資料標籤列。這意味著當您建立圖表時， |
| 一切都會被貼上標籤。所以這個真的很簡單。您只需獲取形狀名稱並將其拖曳到地圖角色中，我們就真正完成了該圖形。 |
| 因此，如果我想將其添加到場景中，最好的方法就是選擇它、加號，然後複製它。 |
| 然後打開一些圖像編輯應用程式並將其保存到磁碟。當然，我已經這麼做了。所以我要去 |
| 一旦你有了它，我需要再次帶回我的圖形， |
| 哇我可以把這個拖進去。 |
| 就是這樣。哦，它不在那裡。嗯，所以有辦法找到它。轉到自訂，它會將其放在背景中，因為通常當您拖入圖像時，您會拖入背景圖像。 |
| 所以我們現在需要做的就是……讓我們把它移開，這樣你就可以看到發生了什麼……就是移到前面。它來了 |
| 我們就這樣吧。它在前面。我實際上想為此添加一點透明度，因為對我來說有點太亮了。 |
| 所以讓我們輸入 0.8。 |
| 現在我們只需要把它拖到角落就可以了。 |
| 好的，內容很多，牽涉到很多文件。因此，讓我們總結一下使用的所有文件。我使用複雜的餅圖產生器產生了所需的兩個地圖檔案和形狀檔案。我上了小學校，然後把它堆起來。 |
| 我創建了此列來形狀映射文件，該文件需要指向具有映射角色的名稱文件。我使用連結引用進行虛擬連接回到小型學校堆疊。 |
| 然後我製作了一個想要製作成資料表的圖形，並將其保存到我的 health images.jmp 中。 |
| 當然，必須將其虛擬地連接回原來的小學校，以便我可以用它來製作圖形。 |
| 然後我對小型學校海洋溫度做了同樣的事情，我對健康圖像的連結引用。 |
| 我只是...我將我的列放入形狀文件中，並為我嘗試用海洋溫度進行處理的圖形繪製了圖例，並且我使用了...我只是通過基本上將其拖入來使用它。 |
| 這就是我想做的 2D 演示。讓我們稍微喘口氣，現在我們將進入 3D 的世界，甚至是網路的世界 |
| 應用。 |
| 好的。 |
| 這是我的 Web 3D 散點圖應用程式。 |
| 我將向您展示如何將 JMP 中的資料匯入其中。 |
| 我的應用程式基於 JMP 的 3D 散點圖。所以這只是為了提醒您它的外觀。 |
| 現在我已經有一個小演示了。 |
| 所以基本上，它...我將向您展示一些功能，首先是選擇不同資料集的能力。這是鑽石資料集。 |
| 當然還有這個繪圖點。這就是整個想法。它們是用這個小球形狀繪製的，我將在一分鐘內解釋這是如何完成的。 |
| 但您可以做的其他事情是旋轉它，就像在 JMP 中一樣，您可以縮放、前後移動它。 |
| 然後它也有懸停標籤。您可以看到右下角我繪製了軸和網格，並添加了一些自訂內容。不是太多。 |
| 您可以變更背景，設定牆壁的顏色。讓我們看看是否可以給它一點藍色。 |
| 是的，也許這不符合你的喜好。但這只是一個演示。然後您可以更改標記的大小。 |
| 網路上有這樣的。 |
| 好吧，當我啟動這個應用程式時，我想做的第一件事是，它可以在網路上執行嗎？它在我的 iPhone 或 iPad 上運作良好嗎？ |
| 因為那些機器沒有我的桌上型電腦那麼強大。因此，我創建了內建 3D 或三個點數量不斷增加的隨機資料集。我去了並使用了... |
| 我認為在低功率設備上值得嘗試 25,000，但對於高功率設備實際上可以更高。 |
| 然後我想，好吧，我應該嘗試引入一些真實數據，我找到了著名的鳶尾花數據集，它採用 CSV、逗號分隔變數格式。 |
| 我把它引入了。 |
| 我想，JMP 有很多資料集。我寧願把這些帶進來。唯一的區別是流式細胞儀，它並沒有很好的效果 |
| 使用顏色的類別，他們實際上必須更改我的應用程式以接受沒有任何顏色的圖表。 |
| 所以應用程式非常簡單。只有一個......它是一個單頁網頁應用程式。這樣就有一個 HTML 檔案。我有幾個 JavaScript 文件，並且使用了一些第三方函式庫以及一種字體和一種紋理，紋理是用於形狀的球。 |
| 所以我在遊戲產業使用的技術是粒子或粒子系統。它們非常常用於模擬遊戲和 3D 視覺化。您可以製作一些很酷的效果，例如火、煙、煙火和雲。 |
| 我過去花了一些時間研究商業遊戲引擎，我的職責實際上是採用粒子系統並改進它。 |
| 所以我確實已經有一些這方面的經驗了。嗯，那是在 C++ 世界中，而不是 JavaScript。但由於我在互動式 HTML5 和 JMP 上工作了一段時間，我認為是時候看看我是否可以接受 |
| 我的兩個愛好並將它們結合起來，並提出了一個使用粒子系統的基於網路的版本。我很幸運。我找到了這個函式庫，Three.js。 |
| 它可以進行硬體加速 3D 繪圖，並且擁有出色的文檔，並且有許多程式碼範例（包括粒子系統），因此建立我的應用程式變得非常容易。 |
| 事實上，對我來說最困難的部分是弄清楚如何從 JMP 取得資料。 |
| 但我會......我會為此分享腳本。我所做的一件事就是確保我可以輕鬆使用這些對象 |
| 在我的應用程式中。所以我做的一件事是我剛剛創建了一個數組 JavaScript 對象，並且對於數字列實際上添加了最小值和最大值，因此我不必在 JavaScript 中進行計算。當然，JMP 非常擅長計算此類內容。 |
| 嗯，對於類別，對於顏色列，我需要做的是像類別字典一樣使用。基本上，所有這些都是一個列表中的類別名稱，然後透過基於零的索引指向這些值。這就是該結構的工作原理。 |
| 我認為做一個用戶界面會很好。事實上，這是一件很容易做到的事。我稍後會向您展示這一點。但基本上我需要做的就是將其限制為 x、y 和 z 的數字列。 |
| 然後將其限制為顏色角色的分類列。 |
| 那麼讓我們來看看該程式碼。 |
| 好吧，我先舉一個非常簡單的資料集的例子。 |
| 然後對話真的很容易進行。我使用列對話框，並指定了我想要的數字列和我想要的顏色列，並確保建模類型是分類的，因此它是序數和名義的。 |
| 接下來，我取得列資料並建立我需要的 JavaScript 物件。這是最小和最大字串。這只是建構一串這些物件。 |
| 如果有顏色欄，我也會這麼做。這有點複雜，因為我需要取出這些字串並將它們填充到 JavaScript 物件中。 |
| 最後，它所需要做的就是將其保存到文字檔案中。 |
| 那麼就讓我們來試試吧。 |
| 當然，我將使用 Big Class，因此它是一個不錯的小檔案。 |
| 和 |
| 所以我運行腳本。 |
| 它問我，我想要什麼 XYZ。我已經選擇了身高和體重，年齡是一個數字列，所以我也將使用它，性別是一個很好的顏色。 |
| 然後我們就完成了。實際上，這裡的輸出告訴我文件在哪裡。 |
| 我碰巧在下一張幻燈片上看到了這一點。那麼就讓我們開始吧。 |
| 所以我敢打賭你總是想知道 Big Class 在 JavaScript 中是什麼樣子的。就是這樣。所以你可以看到這三個 |
| 數字列包含最小值和最大值，然後顏色列包含用於類別的 F 和 M 字典，零表示女性，1 表示男性。好了，這就是我對這次演講的激動人心的結束，我希望你喜歡它。 |
| 感謝您的觀看，如果有任何問題，請詢問他們。 |
