優(yōu)秀的數(shù)據(jù)可視化五點(diǎn)建議

• 對內(nèi)容背景有透徹的理解，了解誰是觀眾以及他們需要什么，之后再思考如何呈現(xiàn)數(shù)據(jù)
• 以何種可視化的呈現(xiàn)方式能夠讓觀眾更直觀、輕松的理解，處理數(shù)據(jù)
• 去刪除那些不會為圖像增加信息價值的內(nèi)容，這么做能減少認(rèn)知負(fù)擔(dān)，也能讓數(shù)據(jù)能突出
• 戰(zhàn)略性的把顏色、尺寸、頁面布局作為指示標(biāo)志，讓他們對觀眾說：這個最重要，往這看
• 最棒的可視化是這項(xiàng)可視化會成為故事或者敘事內(nèi)容的關(guān)鍵點(diǎn)。

可視化的整個流程

InfoVis 是信息可視化（Information visualization）的縮寫。

HCI 是人機(jī)交互（Human-Computer Interaction）的縮寫。

第三個變量顯示方法

如果我們想在一個二維的圖表中顯示第三個變量我們可以采用如下方法：

視網(wǎng)膜變量

時間這個變量可以通過幀的變化來加以體現(xiàn)。

不同的可視化語言比較

如圖所示，在可視化中從低到高，可視化開發(fā)效率越來越高，但是靈活性也越來越差。

HTML5 Canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

WebGL https://en.wikipedia.org/wiki/WebGL

SVG（可縮放向量圖形） https://developer.mozilla.org/en-US/docs/Web/SVG

D3.js https://d3js.org/

NVD3 http://nvd3.org/

Dimple.js http://dimplejs.org/

Rickshaw http://code.shutterstock.com/rickshaw/

Chartio https://chartio.com/

RAW http://rawgraphs.io/

D3介紹

為什么選擇D3

• D3不會掩藏文檔對象的模型，而是通過CSS選擇器等常見約定，直接利用HTML模式和SVG對象
  應(yīng)對文檔對象模型
• D3能讓可視化圖形更有表現(xiàn)力。將可視化與機(jī)器相區(qū)分，從而讓設(shè)計(jì)師直接與開發(fā)人員互動
• D3可視化可直接在DOM（文檔對象模型）和SVG上運(yùn)行，因此和CSS網(wǎng)頁和其他所有網(wǎng)頁一樣，通過相同方式設(shè)計(jì)。
• D3編碼可以用于已創(chuàng)建的文檔和HTML文檔

擴(kuò)展閱讀

牛人的數(shù)據(jù)可視化博客：http://www.storytellingwithdata.com/
成為可視化設(shè)計(jì)者的三步驟：http://vizwiz.blogspot.com/2013/01/alberto-cairo-three-steps-to-become.html

合適的圖形認(rèn)知 : http://flowingdata.com/2010/03/20/graphical-perception-learn-the-fundamentals-first/

分解可視化圖像示例 ： https://www.targetprocess.com/articles/visual-encoding/

“英國溫變史” ： http://charts.animateddata.co.uk/uktemperaturelines/

總結(jié)

以上是生活随笔為你收集整理的可视化基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。