優秀的數據可視化五點建議

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

可視化的整個流程

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

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

第三個變量顯示方法

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

視網膜變量

時間這個變量可以通過幀的變化來加以體現。

不同的可視化語言比較

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

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對象
  應對文檔對象模型
• D3能讓可視化圖形更有表現力。將可視化與機器相區分，從而讓設計師直接與開發人員互動
• D3可視化可直接在DOM（文檔對象模型）和SVG上運行，因此和CSS網頁和其他所有網頁一樣，通過相同方式設計。
• D3編碼可以用于已創建的文檔和HTML文檔

擴展閱讀

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

合適的圖形認知 : 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/

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。