在 JSM 2019,我正在參加一個會議動態交互式數據可視化 。當我第一次被會議主席Blanton Godfrey邀請做貢獻時,我的第一個想法是,“當然,JMP有很多動態和交互式的數據可視化。”但是第二個想法很快跟隨,“這真的是什麼?意思?這些天來,一切都是互動的。“
這導致我試圖對不同的交互方法進行分類。崇高的目標是幫助定義數據可視化交互性的分類,這對於比較產品或討論單個實現是有用的。在最初的努力中,我已經分類了九種技術,以及內部交互的視頻 JMP 。
- 圖形構建
- 選擇鏈接
- 行過濾
- 懸停細節
- 模型調整
- 審美映射
- 列切換
- 卷切片
- 軸縮放
我在整個示例視頻中使用相同的數據集。它包含60多個美國3000多個縣的人口統計,經濟和選舉數據。現在開始的方法!
圖形構建
交互式圖形構建意味著構建或重構具有即時視圖更新的圖形。在JMP中,相互作用直接表面上。其他實現仍然可以與圖表側面的拖放區域交互。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-w1Yng3aTE6cNO7Pg5DSI6NI35O7flBl5w928h446r11', 'w1Yng3aTE6cNO7Pg5DSI6NI35O7flBl5', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"928px","height":"446px"});
(在我的視頻中查看)
該視頻突出了幾個挑戰。當添加第二個Y變量“Rep Pct”時,Y落差區域比以前多,所以我們可以指定相對於現有Y變量放置它的位置。顏色和尺寸下降區域是人為的,因為它們與X和Y軸變量的自然位置不同。
這個結尾圖很像一個特色紐約時報的文章標題為“最保守的縣是獲得政府援助最多的國家。”有一些人 Twitter上的討論關於回歸線和其他功能。這導致我自己收集和探索數據( 經濟分析局和選舉結果托尼麥戈文 )。當我意識到在探索過程中我練習了多少交互方法時,我認為這將成為一個合適的演示數據集。
選擇鏈接
當有多個視圖使用相同的數據表時,選擇鏈接意味著在一個視圖中突出顯示的元素在其他視圖中突出顯示其對應的元素。在JMP中,選擇鏈接始終處於開啟狀態,這意味著即使數百萬行也必須快速。為實現這一目標,選擇將作為每個數據表的核心部分。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-91Y3g3aTE6UQB4ZFOYAANeKz_24gCiwgw912h446r804', '91Y3g3aTE6UQB4ZFOYAANeKz_24gCiwg', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"912px","height":"446px"});
(在我的視頻中查看)
最大的挑戰是圖元素彼此之間沒有一對一的對應關係,例如縣級點和示例中的州級形狀。對任何圖表類型以清晰的方式顯示部分選擇是一個開放的挑戰。對於地圖,當其他任何縣被選中時,JMP會突出顯示整個州的形狀。對於按計數大小的圖形元素,例如直方圖條,JMP將使用部分突出顯示來反映部分選擇。
行過濾
行過濾是最常見的數據可視化交互類型之一。我們的想法是,可視化僅使用數據表行的子集,基於視覺旁邊出現的過濾器的約束。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-5iZHg3aTE6SQv6VAfU_xNjFfMCuO01jbw856h406r586', '5iZHg3aTE6SQv6VAfU_xNjFfMCuO01jb', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"856px","height":"406px"});
(在我的視頻中查看)
我在視頻中使用了一個名為“Lock Scales”的選項,用於在過濾時保持軸固定。否則,將針對每個過濾的子集調整它們。
懸停細節
被動類型的交互是將鼠標懸停在圖形元素上,並顯示一個浮動窗口,其中包含更多詳細信息。有時這些被稱為“工具提示”,因為它們最初用於工具欄圖標。在數據可視化中,懸停細節是一種顯示圖表變量的更精確值以及其他相關變量的方法。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-NoZHg3aTE6ufjR5lBO2jl20LGnTPiryRw944h332r543', 'NoZHg3aTE6ufjR5lBO2jl20LGnTPiryR', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"944px","height":"332px"});
(在我的視頻中查看)
在示例中,請注意,縣名稱包含在散點圖的懸停詳細信息中,即使該變量不在圖表中。這是因為數據表中的變量標有一個屬性,默認情況下會使其顯示在所有懸停詳細信息中。
模型調整
模型調整意味著視覺表示隨著模型參數的改變而改變。在該示例中,模型是樣條平滑器,模型參數是剛度參數lambda。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-lwZHg3aTE6Cxjm8c2z_c_96H3HNrYoBKw876h386r150', 'lwZHg3aTE6Cxjm8c2z_c_96H3HNrYoBK', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"876px","height":"386px"});
(在我的視頻中查看)
雖然許多模型對於這種交互式調整來說太慢了,但計算機的速度足夠快,可以比我們經常意識到的更多。這個看起來很簡單的模型有很多。有四個單獨的平滑器,每個平滑器具有250x自舉置信區間,因此每次剛度參數更改時,有1,000個樣條模型適合。
審美映射
將美學屬性映射到圖元素是一種簡單但重要的交互。有了美學,例如顏色和線條樣式,你經常需要看到它才能知道它的工作原理。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-c0ZXg3aTE6a3ZbW4jgVWp0XEhClvYMmcw888h422r187', 'c0ZXg3aTE6a3ZbW4jgVWp0XEhClvYMmc', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"888px","height":"422px"});
(在我的視頻中查看)
可以通過右鍵單擊更改簡單屬性,而更複雜的屬性(如漸變顏色映射)需要設置對話框,因此具有較小程度的交互性。
列切換
在列切換中,將一個或多個數據列替換為一組中的另一列。這裡,Y變量與左側面板中的列一個一個地替換。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-swZ3g3aTE6nqw8PbCMQysv4S0v_x9j8Iw856h386r61', 'swZ3g3aTE6nqw8PbCMQysv4S0v_x9j8I', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"856px","height":"386px"});
(在我的視頻中查看)
列切換可以是快速通過新數據集的好方法。
卷切片
體積切片是通過繪製一組二維切片來探索多維數據空間的一種方式。該探查在JMP中使用切片來探索多維模型。在這個例子中,我們在Y上對Rep Pct建模,針對三個因素:個人收入,個人轉移和投票率,這導致了四維表面。每幀顯示一個X上的切片,而其他X保持固定。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-4yZ3g3aTE6juUfpYEYjPJuyqCiE3P95ew876h378r954', '4yZ3g3aTE6juUfpYEYjPJuyqCiE3P95e', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"876px","height":"378px"});
(在我的視頻中查看)
個人轉移似乎影響不大(至少在這個片段中它是一條扁平線),但是當我們與它互動並改變其他幀使用的固定值時,我們看到與個人收入的互動。個人收入有很高的積極斜率,個人轉移率很高,而個人轉移價值低則有很強的負斜率。
軸縮放
比例定義數據值如何映射到屏幕坐標,並且本身可視化為軸。軸縮放交互是通過直接操縱軸來更改該映射的能力。交互包括平移,拉伸和縮放。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-JhZ3g3aTE6fEz1j6iZo-YcS1fqY37RRLw756h406r321', 'JhZ3g3aTE6fEz1j6iZo-YcS1fqY37RRL', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"756px","height":"406px"});
(在我的視頻中查看)
軸縮放並不總是只是在不同位置重繪元素。請注意,右側的點圖必須調整其新標度的標記閃避佈局,並且軸本身有時必須重新計算諸如刻度標記間隔之類的內容。在案例或地理可視化中,根據比例切換投影甚至是有用的。
LITHIUM.OoyalaPlayer.addVideo('https:\/\/player.ooyala.com\/static\/v4\/production\/', 'lia-vid-BxZ3g3aTE6g374JDRrFcRvP3b9lNPY_9w920h426r791', 'BxZ3g3aTE6g374JDRrFcRvP3b9lNPY_9', {"pcode":"ltbGkyOjMl3V3pZ3Trn6T2z1_rjF","playerBrandingId":"ODI0MmQ3NjNhYWVjODliZTgzY2ZkMDdi","width":"920px","height":"426px"});
(在我的視頻中查看)
對於JMP,區域規模使用a 阿爾伯斯等面積投影,世界規模使用a Kavrayskiy VII 妥協投射。
更多互動?
鑑於這九種數據可視化交互方法,我們可以更好地考慮更多問題:
- 還有哪些其他通用交互方法在數據可視化中有用?我說的是“一般”方法,因為我認為對於特定類型的圖表,專業交互的數量沒有限制。例如,JMP有一種交互式更改直方圖bin大小的方法,我在這裡沒有將其作為一般方法。
- 是否應將其中一些方法拆分為多種方法?也許數據探索與模型探索的體積切片不同。我正在考慮將交互式圖形調整大小作為一種軸縮放,但也許值得擁有自己的類別。
- 是否應將這些方法中的某些方法組合為同一方法的變體?行過濾和列切換可能是較大的子集交互的兩種變體。
- 這些方法有更好的名稱,無論是預先存在的還是新的?其中一些名稱來自JMP術語,有些是我自己的討論發明。
- 是否應該識別每種方法的不同級別?例如,我們是否應該區分使用或不使用實時預覽的圖形構建。
我希望能夠在這裡,在JSM或Twitter上聽到有關這些問題和其他問題的反饋。