可視化基礎(chǔ)

數(shù)據(jù)可視化
--盡可能高效傳達(dá)一個故事或者概念的方法
--使用顏色赴穗、尺寸形狀等從視覺上最好地呈現(xiàn)出某些基礎(chǔ)數(shù)據(jù),從而向讀者傳達(dá)信息或者見解
--結(jié)合敘述或者故事缎罢,讓可視化作者與讀者分享自己發(fā)現(xiàn)的有趣的事情和見解
--mapping values to visuals
利用數(shù)據(jù)可視化探索數(shù)據(jù)中的模式少梁,傳達(dá)最終結(jié)果
數(shù)據(jù)可視化允許我們以不同方式理解和探索數(shù)據(jù)
book:
the visual display of quantitative information
《用數(shù)據(jù)講故事》

高質(zhì)量的數(shù)據(jù)可視化的特點

相關(guān)經(jīng)驗

  1. 對內(nèi)容背景有透徹的理解
    了解用戶是誰蹂空,他們要知道或者要做什么,之后再真正開始思考如何呈現(xiàn)數(shù)據(jù)
    2.恰當(dāng)選擇圖像的類型
    思考想讓觀眾如何處理這些信息锐锣,何種圖表或者視覺類型能讓觀眾輕松腌闯、直接地處理信息
    3.排除無效信息
    習(xí)慣去識別并刪除那些不會為圖像增加信息價值的內(nèi)容
    這么做可以減少認(rèn)知負(fù)擔(dān),也讓數(shù)據(jù)顯得更突出
    4.吸引用戶注意力雕憔,讓他們?yōu)槟愕馁u點買單姿骏,戰(zhàn)略性地把顏色、尺寸和頁面布局作為指示指標(biāo)斤彼,讓它們對觀眾說:“嗨分瘦,我很重要”
    5.最成功的數(shù)據(jù)可視化案例會讓其本身成為故事或者敘述內(nèi)容的關(guān)鍵點

數(shù)據(jù)可視化專家 = 設(shè)計師+工程師+作家

數(shù)據(jù)科學(xué)全貌

image.png

computer science:
web scraping,log collection,database accesses,building scalable extract transform and load pipeline (extract transform load)

statistics and data mining:
modeling,date mining and exploratory analysis

探索性數(shù)據(jù)分析和數(shù)據(jù)可視化之間的區(qū)別就像是筆記和演講之間的區(qū)別
EDA 并不試圖向任何人證明你對數(shù)據(jù)做了什么

得到數(shù)據(jù):
繪制數(shù)據(jù)圖表(python中的matplotlib/R中的ggplot)
--發(fā)現(xiàn)數(shù)據(jù)圖形的模式、趨勢和異常值
概括性統(tǒng)計量:均值琉苇、方差嘲玫、相關(guān)系數(shù)、最優(yōu)擬合線

數(shù)據(jù)類型
1.數(shù)值數(shù)據(jù):具有數(shù)值的變量 quantitative data
分為:
1.1 離散變量:可計數(shù)的變量 discrete
2.2 連續(xù)變量 continuous

2.分類數(shù)據(jù) categorical/nominal data
對數(shù)據(jù)進(jìn)行標(biāo)注或分組的一種方式
可以以數(shù)值形式表示分類數(shù)據(jù)并扇,但是這些數(shù)值不必具有任何數(shù)學(xué)意義

3.有序數(shù)據(jù) ordered data

--population bins(0-10 million,10-100 million,100-500 million,>500 million)
--class difficulty (beginner,intermediate,advanced)

每一種數(shù)據(jù)類型都可以進(jìn)行視覺編碼去团,我們需要根據(jù)不同的數(shù)據(jù)類型選擇正確的視覺編碼方法

視覺編碼
visual encodings
data → display elements
display elements (planar variables,retinal variables)

image.png

position can be good for encoding two variables

image.png

size/orientation/color saturation 很難定量觀察差異

時間變量:在可視化圖表中各幀移動


image.png

視覺編碼的排序

image.png

分解可視化圖形
分解可視化圖形

facebook募股
facebook募股

雙編碼:使用兩種視覺編碼編寫同一個變量
在facebook募股的例子中,
size & position y 對變量company value進(jìn)行編碼
color hue & position x對變量year of IPO 進(jìn)行編碼

不透明性opacity 有時不被認(rèn)為是一種視覺編碼

動畫在技術(shù)上并不是一個視覺編碼穷蛹,但在某種程度上土陪,可以認(rèn)為它可對一些信息進(jìn)行編碼或改變信息
通過動畫傳達(dá)消息更簡單、更高效

可視化技術(shù)

HTML5 Canvas

WebGL

SVG(可縮放向量圖形)

D3.js

NVD3

Dimple.js

Rickshaw

Chartio

RAW

在可視化光譜中穿梭
層級由低到高肴熏、靈活性由高到低鬼雀、效率由低到高排列如下:
--webGL,canvas,svg (類似匯編語言)
efficient,performant
flexible
low level
hard to develop with

--D3.js(類似C/C++)
使用的核心技術(shù)是開放式網(wǎng)絡(luò)標(biāo)準(zhǔn),如下:
javascript
html
svg
css

--NVD3,Dimple.js,Rickshaq(類似python/ruby)
這些是在D3語句塊上建立的高級層庫
NVD3,Dimple.js ---charting libararies
Rickshaq--有效輕松地顯示時間序列和實時數(shù)據(jù)流/specific type of data

--Raw,Chartio(predefined charts)
Raw:是建立在D3基礎(chǔ)上的一個開放源庫蛙吏,通過Raw可以輕松源哩、快速地建立預(yù)先定義的圖表
Chartio是一款基于web的產(chǎn)品鞋吉,與tableau類似,可以使你快速励烦、輕松地探索數(shù)據(jù)谓着,建立dashboard和圖表

we now focus on D3.js

詳解D3

D3 : Data Driven Documents

Data: 我們努力顯示的一些信息,CSV,JSON崩侠,或從外部加載漆魔,或只是一個JavaScript對象或者變量

Documents
--指網(wǎng)頁或Web文檔,HTML,CSS, JavaScripts,SVG
--其實是所謂的文檔對象模型或者DOM Document Object Model

web瀏覽器能夠存儲兩個版本的web頁面或兩個視圖
一個是從web服務(wù)器返回的初始源
另一個是解析的DOM對象

DOM是一個規(guī)范却音,更像HTML和CSS改抡,為HTML和XML文檔規(guī)定了常見的編程接口,一旦HTML源從服務(wù)器返回web瀏覽器系瓢,便會解析文件阿纤,并將其轉(zhuǎn)換成一個能夠通過JavaScript以編程方式評估的分層對象

實際上D3將數(shù)據(jù)和DOM而非HTML源或視覺元素對接,但由于DOM實際上代表并于視覺顯示內(nèi)容相互作用夷陋,我們將數(shù)據(jù)與DOM對接時欠拾,D3就指的是DOM的視覺表達(dá),并在DOM的數(shù)據(jù)基礎(chǔ)上創(chuàng)建一個圖表

關(guān)于D3的小結(jié)

  • during page load,the DOM get created
  • the DOM can be accessed through JavasScript API
  • the DOM is specification and hierachical object(層次結(jié)構(gòu)對象)

為什么使用D3

  • leverages existing technologies (DOM,CSS,SVG,etc)
    可以運用已創(chuàng)建的文檔和HTML文檔
  • separation of concerns
    *在服務(wù)器段骗绕,為復(fù)雜的可視化圖預(yù)先提供HTML和SVG對象藐窄,在客戶端簡單使用JavaScript實現(xiàn)各種互動或者動態(tài),如果你擁有通過D3建立的程式庫酬土,通過這樣一個步驟荆忍,你可以為服務(wù)器端提供D3對象,靜態(tài)圖像或者JSON
    *D3可視化可以直接在DOM和html上運行撤缴,所以可以利用開放網(wǎng)頁的所有改進(jìn)與發(fā)展刹枉,例如瀏覽器增強(qiáng)插件,JavaScript加速以及HTML5等新標(biāo)準(zhǔn)
    benefits from advances in browser related technologies(JavaScript,HTML5)
  • 開發(fā)人員可以使用他們熟悉的工具運用D3屈呕,例如各種調(diào)試器微宝,文本編輯器和已有程式庫
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市虎眨,隨后出現(xiàn)的幾起案子蟋软,更是在濱河造成了極大的恐慌,老刑警劉巖嗽桩,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钟鸵,死亡現(xiàn)場離奇詭異,居然都是意外死亡涤躲,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門贡未,熙熙樓的掌柜王于貴愁眉苦臉地迎上來种樱,“玉大人蒙袍,你說我怎么就攤上這事∧奂罚” “怎么了害幅?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長岂昭。 經(jīng)常有香客問我以现,道長,這世上最難降的妖魔是什么约啊? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任邑遏,我火速辦了婚禮,結(jié)果婚禮上恰矩,老公的妹妹穿的比我還像新娘记盒。我一直安慰自己,他們只是感情好外傅,可當(dāng)我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布纪吮。 她就那樣靜靜地躺著,像睡著了一般萎胰。 火紅的嫁衣襯著肌膚如雪碾盟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天技竟,我揣著相機(jī)與錄音冰肴,去河邊找鬼。 笑死灵奖,一個胖子當(dāng)著我的面吹牛嚼沿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播瓷患,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼骡尽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了擅编?” 一聲冷哼從身側(cè)響起攀细,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎爱态,沒想到半個月后谭贪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡锦担,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年俭识,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洞渔。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡套媚,死狀恐怖缚态,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情堤瘤,我是刑警寧澤玫芦,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站本辐,受9級特大地震影響桥帆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜慎皱,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一老虫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宝冕,春花似錦张遭、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至宝剖,卻和暖如春洁闰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背万细。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工扑眉, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人赖钞。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓腰素,卻偏偏與公主長得像,于是被迫代替她去往敵國和親雪营。 傳聞我的和親對象是個殘疾皇子弓千,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 本系列「數(shù)據(jù)可視化基礎(chǔ)」文章共三篇,介紹可視化中最基礎(chǔ)献起、最重要的一些概念洋访、理論。這篇為第三篇谴餐,主要介紹視覺編碼姻政,另...
    GeekPlux閱讀 3,977評論 2 3
  • 本系列「數(shù)據(jù)可視化基礎(chǔ)」文章共三篇,介紹可視化中最基礎(chǔ)岂嗓、最重要的一些概念汁展、理論。這篇為第二篇,主要介紹數(shù)據(jù)模型善镰,另...
    GeekPlux閱讀 1,637評論 0 4
  • 數(shù)據(jù)可視化參考流程 科學(xué)可視化的早期可視化流水線妹萨,描述了從數(shù)據(jù)空間到可視空間的映射,包含串行處理數(shù)據(jù)的各個階段: ...
    samYau閱讀 1,111評論 0 2
  • 可視化是機(jī)器學(xué)習(xí)與數(shù)據(jù)挖掘的最后一公里炫欺,好的可視化可以讓人們對數(shù)據(jù)結(jié)果一目了然。下面介紹一下基本知識和可視化要點熏兄。...
    Dorts閱讀 756評論 0 1
  • 堅持原創(chuàng)分享第182天 12點品洛,眼睛已經(jīng)睜不開,但是我的臉還沒有洗摩桶,由此想到分享還沒有寫桥状。 腦海中也閃...
    我是一只沒有腳的鳥閱讀 109評論 0 0