數(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ù)可視化的特點:
- 出于探索目的,你得試著理解數(shù)據(jù)稚照,理解數(shù)據(jù)揭示的信息
http://www.vizwiz.com/2013/01/alberto-cairo-three-steps-to-become.html
相關(guān)經(jīng)驗:
- 對內(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é)全貌
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)
position can be good for encoding two variables
size/orientation/color saturation 很難定量觀察差異
時間變量:在可視化圖表中各幀移動
視覺編碼的排序
分解可視化圖形
分解可視化圖形
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ù)
在可視化光譜中穿梭
層級由低到高肴熏、靈活性由高到低鬼雀、效率由低到高排列如下:
--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)試器微宝,文本編輯器和已有程式庫