js資料庫可視化,js 數據可視化

本文目錄一覽：

• 1、初識 D3.js ：打造專屬可視化
• 2、數據可視化工具有哪些,越炫酷越好,任務比較急在一個月之內需要完成,有知道的朋友給介紹一下唄。
• 3、深入淺出丨帶你看懂數據可視化「美」的歷程
• 4、驚艷：近百種數據可視化工具效果展示，總有一款適合你！

初識 D3.js ：打造專屬可視化

隨著現在自定義可視化的需求日益增長，Highcharts、echarts等高度封裝的可視化框架已經無法滿足用戶各種強定製性的可視化需求了，這個時候D3的無限定製的能力就脫穎而出。

如果想要通過D3完成可視化，除了對於D3本身API的學習, 關於web標準的HTML, SVG, CSS, Javascript 和 數據可視化的概念以及標準都是需要學習的。這無疑帶來了較高的學習門檻，但這也是值得的，因為掌握 D3 後，我們幾乎可以實現任何 2d 的可視化需求。

本文通過對D3核心模塊分析以及進行具體案例實踐的方式，來幫助初學者學習了解D3的繪圖思路。

D3的全稱是 Data-Driven Documents（數據驅動文檔），是基於數據來操作文檔的 JavaScript 庫，其核心在於使用繪圖指令對數據進行轉換，在源數據的基礎上創建新的可繪製數據， 生成SVG路徑以及通過數據和方法在DOM中創建數據可視化元素（如軸）。

相對於Echats等開箱即用的可視化框架來說，D3更接近底層，它可以直接控制原生的SVG元素，並且不直接提供任何一種現成的可視化圖表，所有的圖表都需我們在它的庫里挑選合適的方法構建而成，這也大大提高了它的可視化定製能力。而且D3 沒有引入新的圖形元素，它遵循了web標準（HTML, CSS, SVG 以及 Canvas ）來展示數據 ，所以它可以不需要依賴其他框架獨立運行在現代瀏覽器中。

在V4版本後，D3的 API 現在已經被拆分成一個個模塊，我們可以根據自己的可視化需求進行按需載入。根據泛義可以將D3 API模塊分為以下的幾大類： DOM操作、數據處理，數據分析轉換、地理路徑，行為等 。

這裡我們主要對 D3-selection 和 D3-scale 模塊進行解析：

D3-selection （選擇集） 是 D3js的核心模塊，主要是用來進行選擇元素，設置屬性、數據綁定，事件綁定等操作。

選擇元素： D3-selection 提供了兩種方法來獲取目標元素，d3.select()：返回目標元素的第一個節點，d3.selectAll()：返回目標元素的集合，乍一看有點類似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一個 selection 對象，querySelector 返回的是一個 NodeList 數組。通過控制台列印的信息，可以看到 selection 下的 groups 存放了所有選擇的元素集合，parents 存放了所有選中元素的父節點。

設置屬性或者綁定事件： 我們不需要關心 groups 的結構是怎麼樣的。當調用 selection.attr 或者 selection.style 的時候, selection 中的所有 group 的所有子元素都會被調用，group 存在的唯一影響是: 當我們傳參是一個function 的時候，例如 selection.attr(‘attrName’, function(data, i)) 或 selection.on(‘click’, function(data, i)) 時， 傳遞的 function(data, i) 中, 第二個參數 i 是元素在 group 中的索引而不是在整個 selection 中的索引。

數據綁定： 實際上是給選擇的DOM元素的 __data__ 屬性賦值，這裡提供了3種方式進行數據綁定：

（1）給每一個單獨的 DOM 元素調用 selection.datum：d3.select(‘body’).datum(20) 等價於 document.body.__data__ = 20

（2）從父節點中繼承來數據, 比如: append , insert , select，子節點會主動繼承父節點的數據：

（3） 調用 selection.data() 方法，支持傳入裝有基礎數據類型的數據，也支持傳入一個function(parentNode, groupIndex)根據節點索引與數據做映射，data()方法引入了 d3 中非常重要的 join 思想:

綁定 data 到 DOM 元素， 在D3中是通過比較 data 和 DOM 的 key 值來找到對應關係的。 如果我們沒有單獨設置 key 值，那麼默認根據 data 的下標索引來設定，但是當數據順序發生改變，這個默認下標 key 值 就變得不可靠了，這時我們可以使用 selection.data(data, keyFunction) 中的第二個參數 keyFunction，根據當前的數據返回一個對應的 key 值。通過下面的圖例可以看出，不管是有一個還是多個 group（每個group 都是獨立的），只要我們保證在任意一個 group 中的 key 值是唯一的，數據一旦發生變化都會反映給對應的 DOM 元素（ update 的過程）：

上面提到的都是data數據和DOM元素數量相同的情況下的數據綁定，那如果data數據和DOM元素數量不相同時，我們來看看 D3 又是如何進行數據綁定的：現在終於可以來介紹 D3-selecion 模塊的核心 Join 思想了，這個思想簡單來說就是 「不應該告訴D3去怎麼創建元素, 而是告訴D3，.selectAll() 得到的 selecion 集合應該和 .data(data) 綁定的數據要怎麼一一對應」。

從上圖可以看出，在進行 d3.data(data) 數據綁定的時候，會產生三種狀態的選擇集：

用 Join 的方式來理解意味著，我們要做的事情僅僅是聲明 DOM集合和數據集合之間的關係, 並且通過處理三個不同狀態的集合 enter、update 、 exit 來描述這種關係。這種方式可以大大簡化我們對DOM元素的操作，我們不需要再用 if 和 for 循環的方式來進行複雜的邏輯判斷，來得到我們需要得到的元素集合。並且在處理動態數據的時候，可以通過處理這三種狀態，輕鬆的展示實時數據和添加平滑的動態交互效果。

D3-scale （比列尺） 提供多種不同類型的比例尺。經常和 D3-axis 坐標軸模塊一起使用。

D3-scale 提供了多種連續性和非連續性的比例尺，總體可以將他們分為三大類：

常用的一些比例尺：

（1）d3-scaleLinear 線性比例尺(連續性輸入和連續性輸出)

可以看出，調用d3.scaleLinear()可以生成線性比例尺，domain()是輸入域，range()是輸出域，相當於將domain中的數據集映射到range的數據集中。

使用示例：

映射關係：

（2）d3-scaleTime 時間比例尺(連續性輸入和連續性輸出)

時間比例尺與線性比例尺類似，只不過輸入域變成了一個時間軸。正常我們使用比例尺都是個正序的過程，但是D3也提供了invert()以及invertExtent()方法，我們可以通過輸出域中的具體值得出對應輸入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(連續性輸入和離散性輸出)

量化比例尺是將連續的輸入域根據輸出域被分割為均勻的片段，所以它的輸出域是離散的。

使用示例：

映射關係：

（4）d3. scaleThreshold 閾值比例尺(連續性輸入和離散性輸出)

閾值比例尺可以為一組連續數據指定分割閾值，閾值比例尺默認的 domain：[0.5] 以及默認的 range：[0, 1] ，因此默認的 d3.scaleThreshold() 等價於 Math.round 函數。 閾值比例尺輸入域為 N 的話，輸出域必須為 N + 1，否則比例尺對某些值可能會返回 undefined，或者輸出域多餘的值會被忽略。

使用示例：

存在三種映射關係：

a. 當domain和range的數據是 N : N+1

b. 當domain和range的數據是 N : N + 大於1

c. 當domain和range的數據是 N + 大於0 : N

（5）d3.scaleOrdinal 序數比例尺(離散性輸入和離散性輸出)

與scaleLinear等連續性比例尺不同，序數比例尺的輸出域和輸入域都是離散的。

使用示例：

存在三種映射關係：

a.當domain和range的數據是一一對應

b.當domain少於range的數據

c.當domain多於range的數據

通過以上的學習，應該對d3是如何操作DOM以及坐標軸的數據映射為相應的可視化表現有了一定的了解，下面我們來實際運用這兩個模塊，來實現我們常見的可視化圖表：柱狀圖。

（1）首先添加一個SVG元素。

（2）根據我們上面說到 d3.scale 模塊以及 d3.axis 模塊繪製坐標軸，d3.scaleBand() 叫做序數分段比例尺，類似我們說的 d3.scaleOrdinal() 序數比例尺，但是它支持連續的數值類型的輸出域，離散的輸入域可以將連續的範圍劃分為均勻的分段。這裡再講一個細節，在繪製網格的時候，我們並沒有額外添加 line 元素來實現，而是通過 d3.axis 坐標軸模塊的 axis.ticks() 方法對坐標軸刻度進行了設置，通過 tickSIze() 設置了刻度線長度，來模擬和圖表寬度相等的網格線，並且還可以通過 tickFormat() 對Y軸刻度值進行格式化轉換。

（3）坐標軸繪製好了後，我們通過數據綁定來繪製與之對應的矩形(rect)元素了。

（4）這個時候柱狀圖已經基本繪製好了，我們再豐富內容展示，添加標籤、標題等提示信息。

（5）最後我們通過給柱子綁定監聽事件，實現tooltips的信息浮層交互。

通過對 d3.selection 、d3.scale 以及 d3.axis等模塊的學習，我們已經可以繪製出常用的柱狀圖等圖表，我們也可以通過d3提供的其他模塊繪製出更加複雜的可視化效果，例如通過 d3-hierarchy(層級模塊) 實現層級樹圖可視化，d3-geo(地理投影) 實現地圖數據可視化等，本文講解的內容還只是D3庫的冰山一角。所以等我們掌握了D3後，限制我們實現可視化的不再是技術而是想像力。

數據可視化工具有哪些,越炫酷越好,任務比較急在一個月之內需要完成,有知道的朋友給介紹一下唄。

數據分析之大數據可視化之初級篇–零編程工具

Tableau

Tableau 是一款企業級的大數據可視化工具。Tableau 可以讓你輕鬆創建圖形，表格和地圖。 它不僅提供了PC桌面版，還提供了伺服器解決方案，可以在線生成可視化報告。伺服器解決方案可以提供了雲託管服務。

Infogram

Infogram的最大優勢在於，讓可視化信息圖表與實時大數據相鏈接。只須三個簡單步驟，可以選擇在眾多圖表，地圖，甚至是視頻可視化模板中進行選擇，支持團隊賬號。

ChartBlocks

ChartBlocks是一個易於使用在線工具，它無需編碼，便能從電子表格，資料庫中構建可視化圖表。整個過程可以在圖表嚮導的指導下完成。圖表是響應式的，並且可以和任何的屏幕尺寸及設備兼容。

Datawrapper

Datawrapper是一款專註於新聞和出版的可視化工具。 Datawrapper非常容易使用，不需要任何編程基礎。你只需要上傳你的數據，便能輕鬆地創建和發布圖表，甚至是地圖。Datawrapper提供了 眾多的自定義布局及地圖模板。

Plotly

Plotly幫助你在短短几分鐘內，從簡單的電子表格中開始創建漂亮的圖表。如果希望為JavaScript和Python等編程語言提供一個API介面的 話，Plotly是一款非常人性化的工具。

RAW

RAW彌補了很多工具在電子表格和矢量圖形(SVG)之間的缺失環節。你的大數據可以來自MicrosoftExcel中，谷歌文檔或是一個簡單的逗號分 隔的列表。它最厲害的功能是可以很容易地導出可視化結果，因為它和Adobe Illustrator，Sketch 和Inkscape是相容的。

Visual.ly

Visual.ly是一個可視化的內容服務。它提供專門的大數據可視化的服務。如果你想完 全外包可視化文件給第三方。你可以使用非常簡化的在線流程：你只需描述你的項目，服務團隊將在項目的整個持續時間內和你在一起。

數據可視化之開發展篇–JavaScript庫

D3.js

D3.js是最好的數據可視化工具庫。D3.js運行在JavaScript上，並使用HTML，CSS和SVG。 D3.js是開源工具，使用數據驅動的方式創建漂亮的網頁。 D3.js可實現實時交互。這個庫非常強大和前沿，所以它帶有沒有預置圖表也不支持IE9。

Ember Charts

Ember Charts – 顧名思義是一種基於Ember.js框架和使用d3.js的可視化工具。Ember Charts以繪製時間序列圖，柱狀圖，餅圖和散點圖為主。它非常優易於擴展，有極強的錯誤處理能力，當你遇到壞數據時，系統也不會崩潰。

NVD3

NVD3運行在d3.js之上, 它可建立可重用的圖表組件。該項目的目標是保持所有的圖表整潔和可定製性。 NVD3是d3.js之上的簡單的介面，保持了d3.js的所有強大功能。 NVD3由Novus Partners前端工程師開發和使其保持了圖表技術洞察力。

Google Charts

Google Charts 以HTML5和SVG為基礎，充分考慮了跨瀏覽器的兼容性，並通過VML支持舊版本的IE瀏覽器。所有您將創建的圖表是互動式的，有的還可縮放。 Google Charts非常人性化，有全面的模板庫，你可以從中找到所需模板。

FusionCharts

FusionCharts是最全面的JavaScript圖表庫，包括90個圖表和900種地圖。FusionCharts可以輕鬆集成像jQuery庫，Angularjs和React框架以及ASP.NET和PHP語言。 FusionCharts支持JSON和XML數據，並提供許多格式圖表：PNG，JPEG，SVG和PDF。

Highcharts

Highcharts是一個JavaScript API與jQuery的集成，全球最大的100家公司中有61家正在使用它。圖表使用SVG格式，並使用VML支持舊版瀏覽器。它提供了兩個專門的圖表類 型：Highstock和Highmaps，並且還配備了一系列的插件。

Chart.js 

對於一個小項目的圖表，chart.js是一個很好的選擇。開源，只有11KB大小，這使得它快速且易於使用，它支持多種圖表類型: 餅圖，線性圖和雷達圖等。

Leaflet

Leafleft 基於Open Street Map數據，使用HTML5 / CSS3繪製互動式可視化圖。可以使用他們的擴展插件庫添加熱點圖(heatmaps)和動畫標記。 Leaflet 是開源和只有33 KB大小。

Chartist.js

Chartist.js的開發社區一直致力於打敗所有其他JavaScript圖表庫。它使用了Sass的個性化風格，它的SVG輸出是響應式的。

N3-charts

N3-charts是一種基於AngularJS框架的工具。它建立在D3.js之上，幫助您創建簡單的互動圖表。 N3-charts是一種小型化的圖表工具，不適用於大型項目。

Sigma JS

Sigma JS 是互動式可視化工具庫。由於使用了WebGL技術，可以使用滑鼠和觸摸的方式來更新和變換圖表，同時支持JSON和GEXF兩種數據格式。這為它提供了大量的可用互動式插件。Sigma JS 專註於網頁格式的網路圖可視化，在大數據網路可視化中非常有用。

Polymaps

Polymaps是一款地圖可視化一個JavaScript工具庫。 Polymaps使用SVG實現從國家到街道一級地理數據的可視化。可以使用CSS格式來修改你的樣式。它是創建heatmap熱點圖的最好的工具之一，創建的所有地圖都可以變成動態圖。

Processing.js

Processing.js是一個基於可視化編程語言的JavaScript庫。作為一種面向Web的JavaScript 庫，Processing.js是能夠有效進行網頁格式圖表處理。這使得它成為了一種非常好交換式可視化工具。 Processing.js需要一個兼容HTML5的瀏覽器來實現這一功能。

深入淺出丨帶你看懂數據可視化「美」的歷程

深入淺出丨帶你看懂數據可視化「美」的歷程

古人說：「人不可貌相」，但從古至今，人類卻是一群感性動物，容易受到外在表象影響，先感性才理性。

《韓非子》里提到，春秋末期魯國人澹臺滅明，天生異像，「額低口窄，鼻樑低矮，不具大器形貌」，拜孔子為師，孔子沒有拒絕，但對他不上心，愛答不理，讓他坐冷板凳。於是，他毅然決然地離開孔子，自學成才，獨闢蹊徑，遊歷講學，積極傳播儒家學說，並培養出很多人才，深受老百姓愛戴。孔子聽聞他的事迹之後，幡然醒悟。

在今天，好看這件事也一樣是很重要的。「顏值即正義」，長得好看的人，似乎更容易受到歡迎和優待。

但古人也說過：「相由心生」，從一個人的外表和精神狀態可以大概知道這個人的內在狀況，相反，一個人的內心思想狀態，也會投射到形象外表。

因此，我們要注重自身內在涵養的健康發展，也要學會對外在美的表達與審視。

同樣地，好的設計也應該是兼具內容與形式。

信息時代讓人們的生活節奏加快，人們每一天都變得匆忙，時間被碎片化，甚至沒有多少時間完整看完一段文字。文字的力量是有限的。只有藉助可視化，信息才能高效地傳播。

數據可視化是數據領域一個重要的分支，目的是「讓數據說話」，展現數據之美。好的圖表會說話，好的圖表可以抓住用戶的心。

一、歷史篇：人類對世界的認知與表達從圖畫開始

研究發現，人腦處理圖片信息是同步進行的，而處理文字信息則是一步一步循序漸進的，而且一篇文字下來，大部分人只記住了其中的20%；人在看報紙時，99%的文字信息會自動被過濾掉，腦子裡只殘留了可憐的1%；人腦處理圖片的速度是處理文字的6000倍。也就是說，如果一篇6000字的文章需要10分鐘看完，而壓縮成一張圖片則只需要10/6000分鐘的時間。

圖片可以表達的內容要比文字更豐富，同時也可以給人留下很大的想像空間 ，可以體現真實性（有圖有真相），可以讓人賞心悅目。

其實，在遠古時期，我們遙遠的祖先——智人就已經學會畫畫，基於自己對周邊生活環境的認知，將人、鳥、獸、草、木等事物以及狩獵、耕種、出行、征戰、搏鬥、祭祀甚至男女交媾等日常活動刻畫在岩石上、石壁上、洞穴里……到目前為止，歐洲、亞洲、美洲、大洋洲的70多個國家150多個地區發現岩畫遺址，而僅非洲和澳洲少數族群目前還存有岩畫製作的傳統，例如著名的岩畫遺址拉斯科洞窟壁畫、阿爾塔米拉洞窟壁畫、大麥地岩畫、拉文特岩畫、平圖拉斯河手洞壁畫、非洲大象岩刻、將軍崖岩畫等。

岩畫學家埃馬努埃爾·阿納蒂在《世界岩畫：原初語言》一書中提到：隨著智人技術水平的提高、抽象和感知能力的增強，促使了複雜語言和藝術的產生，而岩畫正是這種語言的一種記錄形式；目前所知的70%岩畫都是狩獵採集社會的作品，剩餘30%是游牧和農耕時期的作品，在這些岩畫的結構中存在著共同的記憶和普遍性的認知模式。岩畫是象形文字，是無文字時代的寫作，是人類隱沒記憶的見證。

可見，人類對世界的認知與表達是從圖畫開始的。

圖1. 遠古時代的岩畫

人類造出文字之前，還經歷過「結繩記事」、「圖畫記事」等階段。

但隨著社會的發展，人類發生了「農業革命」，不再單純依靠狩獵為生，製造和使用工具更加嫻熟，剩餘產品逐漸增加，社會組織逐步成熟。這時，社會組織不斷產生大量的信息，除法令條紋外，還必須記錄各種交易、稅收、商品庫存、節假日以及打勝仗的日期等。在此之前，人類雖然可以利用圖畫記事，但更多的還是用自己的大腦記錄信息。隨著信息的大量產生，容易產生記憶過載，於是就有了文字。

象形文字是由原始的圖畫發展而來的。由於社會的發展，加上圖畫效率低，難以滿足社會化需求，於是人們逐漸從圖畫中抽離出一個個元素，形成象形文字。象形文字是一種最原始的造字方法，純粹利用圖形來作文字使用，而這些文字又與所代表的東西在形狀上很相像，圖畫性質減弱，象徵性質增強。蘇美爾楔形文字、甲骨文、古埃及象形文字、瑪雅文字都是獨立地從原始社會最簡單的圖畫和花紋產生出來的。

但象形文字也有很大的局限性，因為有些實體事物和抽象事物是畫不出來的，而且寫起來很慢又難讀懂。

圖2. 世界四大古文字

隨著社會的進一步發展，文字也得到了很大的發展，在象形文字的基礎上逐步分化出「表音」和「表意」兩種文字。文字是用來記錄和傳播語言的，而記錄和傳播只有兩種途徑，或「表音」，或「表意」。就漢字來說，其發展脈絡大致是：結繩記事—圖畫文字—象形文字—形意文字—意音文字。

社會的發展，推動了文字的發展，使得人們在對事物的表達上可以更加豐富多樣，可以指事、象形、形聲、會意、轉注、假借。人們對世界的認知和表達在廣度和深度上也都有了很大的延伸。反過來，由於更多樣化的文字，人們能夠更加準確、生動、深刻、靈活地記錄下所見所聞和所思所想，加快了知識的傳播與傳承，推動了社會的大發展。

文字即使再豐富，也有難以突破的局限性。文字需要理解，不能一目了然，對抽象事物及個體的表達，還不夠形象、到位。因此，在出現文字之後的時代，許多文獻就以圖文結合的形式流傳下來。例如，在1912年發現的伏尼契手稿中，字母和語言至今無人破解，但其中的植物、天體出浴美女等許多圖片，甚至出現了構造精緻的精美圖案，一目了然，讓人驚嘆。

圖3. 伏尼契手稿

二、發展篇：進入了「百花齊放、百家爭鳴」的時代

計算機出現之前，人們已經能夠靈活地運用柱形圖、線圖、餅圖等基本圖表來展示數據，而且也衍生了很多新型、創意的數據圖表。

大家應該都知道南丁格爾（國際上以她的生日命名了護士節），但很多人應該不知道南丁格爾玫瑰圖（下圖）就是她創造的。在克里米亞戰爭期間，南丁格爾通過搜集數據，發現很多死亡原因並非是「戰死沙場」，而是在戰場外感染疾病，或是在戰場上受傷，卻沒有得到適當的護理而致死。為了解釋這個原因，降低英國士兵死亡率，她畫了這個著名的圖表，於1858年遞交到維多利亞女王手中。(這麼漂亮的圖表，想必女王一定很受感動)

圖4. 南丁格爾玫瑰圖

世界著名的繪圖大師米納德，開創了許多重要的主題繪圖技巧，改良了其他技術。他是首個把餅圖和地圖結合在一起的人，並將流線放入地圖中。以下圖表是米納德最廣為人知的作品，被EdwardTufte認為是史上最傑出的統計圖。它描繪了拿破崙的軍隊自離開波蘭－俄羅斯邊界後軍力損失的狀況，在一張圖中通過兩個維度呈現了六種維度信息：拿破崙軍隊人數、行軍距離、溫度、經緯度、移動方向以及時間－地域關係。

圖5. 拿破崙行軍圖

計算機出現後，特別是互聯網的興起，人類社會以「摩爾定律」的速度，進入一個全新的時代，科學技術也得到了前所未有的革新與發展，同時也給人們帶來了很多新思維。

技術的進步，讓我們能夠採集到比以前多得多的信息，數據規模不斷成指數量級的增長，數據的內容和類型也比以前要豐富得多，改變了人們分析和研究世界的方式，也給人們提供了新的可視化素材，推動了數據可視化領域的發展。

與以前相比，數據可視化領域發生了很多的變化，得到了很大的發展。

1. 可視化的表現形式和場景更豐富

在當今信息時代，信息出現了「泛濫」與「過載」，人們每天都受到各種信息的「轟炸」。當我們打開網頁或手機APP時，首先進入我們視野的就是各種彈出的廣告信息。這些信息從內容到形式，都經過了精心設計。我們走在大街上，映入我們眼球的則是滿大街的廣告海報，還時常有人站在街邊向路人派發傳單。我們不僅僅只從書上看到了可視化的圖表，還從海報、信息圖、PPT、數據產品、大屏等獲取到了大量的可視化信息。

圖6. 可視化的表現形式

2. 可視化展現方式更多樣和靈活

數據圖表是最常用的可視化元素。除柱形圖、條形圖、餅圖、環形圖、線圖、散點圖、面積圖、雷達圖、K線圖、地圖等基本圖表外，現在也出現了更多新式的圖表，如山峰圖、雷達圖、氣泡圖、熱力圖、漏斗圖、樹圖、箱形圖、瀑布圖、河流圖、詞雲圖、儀錶盤、南丁格爾玫瑰圖、旭日圖、和弦圖、桑基圖、3D圖，等等。另外，智慧的人們也常常創意性地將各種圖表混搭，例如下圖，地圖和餅圖、散點圖、柱形圖等搭配使用。

圖7. 各種圖表的混搭

除圖表外，對圖片和圖標的靈活運用，使得可視化更加美觀、形象、貼切。

圖9. 圖標的靈活運用

3. 從靜態到動態

由於技術的發展，實時數據採集、實時數據傳輸以及實時數據計算得以實現，人們終於得以欣賞到數據的靈動之美。以前人們只能看到事後數據形成的分析結果，看到的是數據的過去式，領略的是數據的靜態之美。而現在，通過實時計算及數據可視化，人們可以知道「當前時刻發生了什麼」，看到了數據的變化，看到了數據的動態之美。

4. 設計上更注重用戶體驗

由「信息泛濫」引起「信息過載」，從而導致「信息焦慮」。無論是風格、元素、配色、文字、交互上還是細節上，人們的可視化作品都越來越注重用戶的視覺體驗，希望能讓用戶一目了然，不多花一點兒時間去理解。在設計風格上，從3D擬物化到簡潔扁平化再到擬物扁平化的發展變化，也在不斷地為用戶「做減法」。

三、原則篇：關於設計的四大原則

「別忘了，你是為讀者進行可視化設計。」

——《數據之美：一本書學會可視化設計》

所有的設計細節，都必須經過精心構思，都必須站在用戶角度來思考。

顏值高或者打扮好看的人，總能牢牢地吸引別人的目光，相反，衣著邋遢不修邊幅的人，卻往往是別人瞅一眼就嫌棄。那些聰明的人，必然深諳這樣的秘訣：好看的PPT報告，總能在第一時間吸引受眾，再加上生動的演講，就會收到很多好評；廣告牌做得越好，就越吸引路人的注意力，越能讓路人記住，廣告效果也就越好。

當你看到別人的可視化作品時，你是否總覺得不好，但怎麼也說不出到底哪些地方不好？如果你熟悉以下基本原則，就算不是一個專業的設計人員，你也可以快速看出哪裡出了問題並提出非常中肯的建議。如果你還能熟練運用這些原則，那你的可視化作品將煥然一新，更加專業、好看、有趣，也將收穫更多讀者的讚賞。

親密性（分組）

在生活中，幾乎每件事都有邏輯，人們也喜歡遵循一定的邏輯去理解世間之事，例如時間先後、空間、因果、總-分-總等邏輯結構。

在做可視化設計的時候，我們所要表達的內容一定不能是一些無序呈現，這樣會給讀者造成理解上的混亂。我們的可視化作品應當能夠遵循多數讀者所能理解的思維邏輯，將內容分成幾部分按順序一步一步地表達出來。

相同部分的內容，彼此相關，應當靠近，放在一起。這樣閱讀起來才能被理解成為同一單元的內容，而不是多個孤立的不相關的內容。不同部分的內容，應當明顯地區隔開來，例如上下部分內容之間用一空行隔開或者間距放大。這樣有助於組織信息，減少混亂，為讀者提供清晰的結構。

圖10. 親密性原則

對齊

在版式布局上，任何元素的擺放，都可能會影響甚至主導用戶的視覺流程。因此，任何元素都不能隨意擺放，否則會造成混亂，而混亂會令人不適。對齊，使每個元素都與其它元素建立起某種視覺聯繫。對齊，也讓可視化作品更加清晰、精巧、清爽。

對齊，不僅包括左對齊、右對齊、頂端對齊、低端對齊，還包括水平居中、垂直居中、橫向分布、縱向分布，等。

圖11. 對齊原則

重複/統一

我們都有「先入為主」的「陋習」，當看到與之前不和諧不一致的東西，常感突兀，甚至本能抗拒。因此，在可視化作品中反覆使用一些視覺要素，建立上下文之間的聯繫，增加條理性，保持視覺上的統一。

任何視覺元素都可以在同一作品中重複使用，例如顏色、形狀、材質、空間關係、線寬、字體、大小和圖片，等等。

圖12. 重複原則

對比/強調

在做可視化設計時，我們的初心是以圖文的形式把所要表達的信息清晰的傳遞給用戶，讓用戶一目了然，盡量不需要太多思考和理解。為了達到這個目的，我們需要強調重點，弱化次要，避免作品中所有的元素看起來重要程度都是一樣的。如果所有的東西都同等重要，那就相當於所有的東西都不重要。

圖13. 強調重點，弱化必要

如果你想突出某些信息要點，那就讓對應的元素（字體、顏色、大小、線寬、形狀、空間等）與其它元素不相同，讓它們截然不同，讓用戶首先能夠關注到它們。

圖14. 對比原則

表達，力求準確、到位、簡潔、易懂

當用戶看到我們的可視化作品時，我們最好要保證所表達的信息能被用戶正確理解。除使用上面幾個原則外，我們還要附加一些輔助信息，例如文字、箭頭等。在可視化作品中，文字必不可少，但篇幅要加以控制。

文字的表達，要準確、到位、簡潔、易懂，要能引導用戶正確地理解圖表的意思，要能不引起任何歧義。

圖15. 表達，要準確、到位

四、流程篇：要有數據可視化的正確姿勢

沒有什麼比親手創造美這件事更給人帶來成就感了。

當我們滿懷激動地開始數據可視化時，請不要馬上鑽入某個細節里，不要急著考慮用什麼酷炫的圖表來展現，也不要糾結於用什麼顏色、什麼字體。我們要有數據可視化的正確打開姿勢。

不同形式的數據可視化流程有所不同，這裡主要講重要且相通的部分。

(一) 了解你的需求

關於需求，在實現之前，一定要聽清楚做什麼，想清楚怎麼做，說清楚怎麼做。

了解與分析數據可視化需求，主要圍繞以下幾點來展開：

1. 看什麼，即哪些內容需要可視化。

很少需求方能夠準確、全面地說出他們真正想要什麼。他們只能描述出大概的樣子，因此需要不斷引導他們以明確真正詳細的需求。

· 可視化的目的是什麼，用戶是誰，在哪裡看，什麼情況下看，多久看一次；

· 了解數據，看看有哪些指標，哪些指標可以直接取，哪些需要複雜計算，哪些可以實時，哪些只能離線；

· 哪些指標必須展現，哪些指標不展現，哪些指標可展現可不展現；

· 展現的維度有哪些，按時間、部門、地域、指標，看實時數據還是歷史數據；

· 通過可視化，期望從中知道哪些信息，等等。

2. 誰看，即用戶是誰。

如果面對的是求真務實的老闆，那可能需要側重於內容，追求邏輯的合理性和數據的準確性；如果是來訪參觀的貴客，那可能為了展示公司實力與形象而追求高大上的圖表設計；如果是不懂技術的業務人員，在可視化時可能需要避免過於技術性。

3. 在哪裡看，即有哪些可視化形式。

一次性的工作彙報，可使用PPT，如果老闆嫌棄做PPT太慢，可以直接用Excel，或者其它工具，如腦圖；如果為很多用戶提供周期性計算的指標數據，且滿足不同條件下的查看，那適合做一款數據產品或者可視化報表；向來訪的貴客介紹公司情況時，如果想給客人們提供一種賞心悅目的視覺享受，用大屏可視化數據再合適不過了；如果想給公司各部門同事普及知識、介紹成果、通知活動等，做一張可視化信息圖，並在線發布，圖文結合，有趣生動，既吸引更多讀者關注，提升閱讀體驗。

4. 什麼情況下看。

「第一印象」肯定是重要的。用戶「第一眼」感覺不好，當然就沒有了然後，就不會有「第二眼」、「第三眼」，也就不會再往下看了。所以，要帶給用戶「第一眼」足夠良好的視覺體驗，就要多想想用戶會在什麼場景下去看你的可視化作品。

例如，打開手機，多數情形下，用戶只會根據標題有選擇地瀏覽少量文章，因此，取一個生動、有趣、亮眼的標題，比普通標題更有視覺衝擊力，會讓你的文章從眾多內容中脫穎而出，贏得更多用戶點擊閱讀。

圖16. 取一個有吸引力的標題

例如，在企業內部（特別是人多的公司），海報、信息圖形式的內容，每天都大量地以郵件地方式群發給各部門人員，或活動通知、或展現成果、或宣傳典型，等等。每個員工都「信息過載」，只能閱讀少量的信息。

除標題要吸引人外，還需要注意用戶打開郵件的實際場景。不少用戶打開這種群發郵件時，常常是下面的情況，一堆的收件人，一堆的抄送人，這已經佔據了有限電腦屏幕的一部分，剩下的部分就是點擊某個郵件時出現的正文內容的部分。因此，在這一區域完整顯示出標題（以及內容摘要），才能吸引用戶往下看。

圖17. 多想想具體的場景

（二）可視化設計

可視化設計是最重要的環節。只有做好這一環節，後面的事情才會變得簡單順暢。

1. 梳邏輯

我們在閱讀時，只要遇到稍微難懂的知識，基本上會本能地第一時間選擇退縮，不再看下去。之所以覺得難懂，最主要是因為邏輯不清晰給我們帶來理解上的困擾。邏輯就像一棵樹的樹榦，如果我們只見樹葉不見樹榦，就會迷失方向。因此，在可視化設計前，一定要站在用戶的角度，梳理出清晰的邏輯結構。這一步，想清楚怎麼做，很重要，多花點時間也沒關係。

對於數據可視化來說，邏輯就是確定各部分的核心內容，以及內容之間的先後次序和關聯關係，即講什麼不講什麼，先講什麼後講什麼。

把邏輯設計得簡單一些，清晰一些，用戶就能越快明白你的「良苦用心」。

2. 定風格

風格營造一種氛圍，驅動用戶沉浸式閱讀。不同的風格，適合不同的用戶不同的場景，例如科技、學院、活潑、嚴肅、可愛，等等。

3. 排版式

版式設計就是關於如何處理信息重點，因為在任何設計中，最重要的信息需要首先被注意到，然後是次要信息。

好的版式就像導盲犬，合理地對內容進行布局，適當地安排版式中的視覺流程，引導用戶第一時間看到最需要被關注的部分，暗示用戶「先看什麼，後看什麼」。

一般來說，可視化作品一般包括標題、正文、圖表、說明文字等要素。版式就是基於上述提到的幾個原則，確定元素之間的層次結構，合理擺放這幾個要素。

4. 選圖表

不是越酷炫的圖表就越適合。這首先要看展現什麼數據。某些圖表只適合展現相應格式的數據。其次，也需要對展現數據的圖表進行個性化定製，包括樣式、風格、顏色、字體，使之契合上下文語境，也讓圖表更有溫度。

不要將就而選擇默認設置的圖表，不要做那個「Mr.差不多」或「Ms.還行」。如果將默認設置的圖表放在可視化作品中，總是顯得那麼突兀和不協調。另外，對默認設置的棄用，可以強迫自己不斷精進，不斷提升可視化的能力。

5. 調細節

對單個部分的可視化設計，並不能完全保證整體上的和諧一致。因此，回到整體，根據前面提到的幾個原則，發現細節問題，對某些細節進行調整，使之整體上保持一致。例如，各部分視覺元素之間保持對齊，如標題、正文、圖表等；在配色、字體或其它細節上，各部分要盡量做到統一；各部分之間要有明顯的區隔，等等。

（三）指標計算

巧婦難為五米之炊。有數據，才能談數據可視化。數據的獲取、整合、計算，會佔用大量的時間。這一部分工作是相對獨立的。

但需要注意的是，模擬數據和真實數據是有區別的。根據模擬數據設計的圖表，一定要用真實數據展現與驗證，驗證圖表與真實數據的契合程度。例如下圖，模擬數據展示的圖表中各部門之間存在明顯的差異，但改為用真實數據展示時，卻「看起來感覺都一樣」，這時候就需要調整圖表的設置，凸顯視覺上的差異。

圖18. 用真實數據驗證可視化的效果

指標的計算過程，這裡略去不講。

（四）前端開發

數據產品、大屏的可視化實現，還需要前端開發。

理論上來講，只要設計出的圖表，就一定能在前端實現。但這個可能會受到前端開發人員的技術水平和展現工具的限制。所以，可視化設計有時候需要尋求一種關於設計與實現之間的平衡。

可視化設計人員最好事先有所評估，採用複雜圖表設計之前最好與開發人員溝通探討實現的可行性。

五、工具篇：你會用Excel設計圖表嗎？

Excel是最常用、最基本、最靈活且最應該掌握的圖表製作工具。 可以說，大多數圖表樣式都可以用Excel畫出來。如果你認為用Excel畫不出來某種樣式的圖表，有可能是你還未掌握Excel的高階技巧。

Excel展現的圖表是靜態的，且支持的數據量比較有限。所以，如果是企業級的動態數據展現，還需要藉助專業的大數據可視化工具。

專業可視化工具有很多，大致可分為三類：企業級專業可視化工具、輕量級在線可視化工具、編程式圖表工具。

企業級專業可視化工具

ECharts 是國內使用率非常高的開源圖表工具，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器，底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀、生動、可交互、可高度個性化定製的數據可視化圖表。ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，並且對移動端做了深度的優化。

D3.js 是最好的開源數據可視化工具庫。D3.js運行在JavaScript上，並使用HTML、CSS和SVG。 D3.js使用數據驅動的方式創建漂亮的網頁。 D3.js可實現實時交互。這個JS庫將數據以SVG和HTML5格式呈現，所以像IE7和8這樣的舊式瀏覽器不能利用D3.js功能。

Tableau是一款企業級的大數據可視化工具。Tableau 可以讓你輕鬆創建圖形，表格和地圖。 它不僅提供了PC桌面版，還提供了伺服器解決方案，可以讓您在線生成可視化報告。伺服器解決方案可以提供了雲託管服務。

輕量級在線可視化工具

BDP個人版，類似Tableau的在線免費的數據可視化分析工具，不需要破解、不需要下載安裝，在線註冊後就能一直使用，操作很簡單，只需要拖拽。支持幾十種圖表類型，也支持製作數據地圖（自帶坐標糾偏）。除可視化之外，BDP還有數據整合、數據處理、數據分析等功能。

百度圖說，基於ECharts，在線圖表製作工具，採用Excel式的操作方式製作樣式豐富的圖表，圖表自定義的選項很豐富，使數據呈現的方式更加美觀個性，易分享傳播。

文圖主要用在你要出一份包含文字說明的報告時使用，提供幾個確定好風格配色的主題供選擇，讓整個報告風格統一、簡潔美觀！文圖能夠良好地適配移動端。但文圖的排版不是很好用。

創客貼，在線平面設計工具，簡單，快速，輕鬆完成在線設計，據說是2016最好的在線設計網站。

編程式圖表工具

對於掌握編程語言的程序員來說，設計新穎、令人驚艷的數據圖表也可以通過代碼來實現。

Python有很多具有畫圖功能的包，如matplotlib、Seaborn、ggplot、Bokeh、pygal、Plotly、Geoplotlib、Gleam、missingno、Leather，等等。

R語言提供了很多數據可視化工具包，例如ggplot2、ggthemes、ggmap、ggiraph、ggstance、GGally、gganimate、ggradar、ggTimeSeries、ggseas、lattice、rgl、ggvis、htmlwidgets、leaflet、dygraphs，等等。

類似提供強大繪圖編程功能的語言還有PHP、HTML、JavaScript、CSS等。

六、技巧篇：刻意練習是提升可視化技能的唯一途徑

不斷練習，不斷精進

提升數據可視化技能的唯一途徑就是在理解可視化設計原則和方法論的基礎上，不斷練習，不斷精進。

除此之外，還要有點完美主義。

技巧在於平時的積累。多觀察，生活中看到好的設計，多想想為什麼人家設計那麼好，讓你忍不住多看幾眼。看到不好的設計，多想想到底哪裡不好。看到好看的圖表，看到別人介紹的小技巧，動手做一做。

技巧太多，這裡不做展開細講。

「去設施傾向」

「這是章北海看到的另一個以前很少有人想像到的現代技術特色——去設施傾向。這種傾向在地球上還只是初露端倪，但『去設施化』已成為比地球世界更先進的艦隊世界的基本結構。這個世界到處都是簡潔空蕩的，幾乎見不到任何設施，只有在需要時，設施才會出現，而且是在任何需要的位置出現。世界在被技術複雜化後，正在重新變得簡潔起來，技術被深深地隱藏在現實的後面。」

——《三體》

科幻小說《三體》裡面的這段話，給了我們提示。當我們做分析和可視化數據時，如果不用選項框和菜單欄時，應該隱藏起來，用到時才打開。另外，也盡量讓所使用的軟體最大化。這樣可以讓內容信息展現在最大的視野區域內，這樣有助於讓我們從中獲取更全面的信息，指導我們下一步做正確的決策。

圖19. 限的視野區域，信息最大化

顏色不宜過多，配色要合理

我們在可視化設計時，最好不要使用超過三種以上的主色調。顏色過多，無形中會分散用戶的注意力，使得用戶無法聚焦。

顏色的搭配要合理。大自然是最好的色彩家，可以借鑒大自然的色彩搭配。另外，如果你第一眼看到別人的設計，感覺很舒服，賞心悅目，那也可以借鑒作品中的色彩搭配。相信你的直覺，至少你的身體不會欺騙你。

圖20.顏色不宜過多，配色要合理

圖21.從生活和自然中學習配色技巧

驚艷：近百種數據可視化工具效果展示，總有一款適合你！

導讀 ：俗話說「巧婦難為無米之炊」。數據時代，沒有一款好的數據可視化分析工具，光有團隊怎麼行？商場如戰場，數據是把槍。亞馬遜運用大數據為客戶推薦商品信息，阿里用大數據成立了小微金融服務集團，而谷歌更是計劃用大數據接管世界……不知不覺，數據已經成為我們生活中必不可少的利器。本文收集了各個平台各種行業的數據可視化分析工具，讓你不僅大飽眼福，而且還可以讓你事半功倍。

一款免費的新型大數據可視化分析工具，操作簡單，支持多種數據源，上卷下鑽，數據預測，聚類分析，相關性分析，數據聯想，決策樹，地圖，組合圖等功能。

Charting Fonts是將符號字體與字體整合（把符號變成字體），創建出漂亮的矢量化圖標。

Gephi是進行 社會 圖譜數據可視化分析的工具，不但能處理大規模數據集並且Gephi是一個可視化的網路 探索 平台，用於構建動態的、分層的數據圖表。

CartoDB是一個不可錯過的網站，你可以用CartoDB很輕易就把表格數據和地圖關聯起來，這方面CartoDB是最優秀的選擇。

Google Chart提供了一種非常完美的方式來可視化數據，提供了大量現成的圖標類型，從簡單的線圖表到複雜的分層樹地圖等。它還內置了動畫和用戶交互控制。

D3（Data Driven Documents）是支持SVG渲染的另一種JavaScript庫。但是D3能夠提供大量線性圖和條形圖之外的複雜圖表樣式，例如Voronoi圖、樹形圖、圓形集群和單詞雲等。

Crossfilter既是圖表，又是互動圖形用戶界面的小程序，當你調整一個圖表中的輸入範圍時，其他關聯圖表的數據也會隨之改變

Raphael是創建圖表和圖形的JavaScript庫，與其他庫最大的不同是輸出格式僅限SVG和VML.

R語言是主要用於統計分析、繪圖的語言和操作環境。雖然R主要用於統計分析或者開發統

計相關的軟體，但也有用作矩陣計算。其分析速度可比美GNUOctave甚至商業軟體MATLAB。

如果你需要製作信息圖而不僅僅是數據可視化，Visual.ly是最流行的一個選擇。

Weka是一個能根據屬性分類和集群大量數據的優秀工具，Weka不但是數據分析的強大工具，還能生成一些簡單的圖表。

NodeBox是OS X上創建二維圖形和可視化的應用程序，你需要了解Python程序，NodeBox與Processing類似，但沒有Processing的互動功能。

Processing是數據可視化的招牌工具。你只需要編寫一些簡單的代碼，然後編譯成Java。Processing可以在幾乎所有平台上運行。

Leaflet是一個開源的JavaScript庫，用來開發移動友好地交互地圖。

Openlayers可能是所有地圖庫中可靠性最高的一個。雖然文檔注釋並不完善。且學習曲線非常陡峭，但是對於特定的任務來說，Openlayers能夠提供一些其他地圖庫都沒有的特殊工具。

PolyMaps是一個地圖庫，主要面向數據可視化用戶。PolyMaps在地圖風格化方面有獨到之處，類似CSS樣式表的選擇器。

Timeline即時間軸，用戶通過這個工具可以一目了然的知道自己在何時做了什麼。

jsDraw2DX是一個標準的JavaScript庫，用來創建任意類型的SVG互動式圖形，可生成包括線、矩形、多邊形、橢圓、弧線等圖形。

iCharts提供可一個用於創建並呈現引人注目圖表的託管解決方案。有許多不同種類的圖表可供選擇，每種類型都完全可定製，以適合網站的主題。iCharts有交互元素，可以從Google Doc、Excel表單和其他來源中獲取數據。

Modest Maps是一個輕量級、可擴展的、可定製的和免費的地圖顯示類庫，這個類庫能幫助開發人員在他們自己的項目里能夠與地圖進行交互。

Many Eyes是一個Web應用程序，用來創建、分享和討論用戶上傳圖形數據。

Anychart是一個靈活的基於Flash/JavaScript(HTML5)的圖表解決方案、跨瀏覽器、跨平台。除了圖表功能外，它還有一款收費的互動式圖表和儀錶。

Kartograph不需要任何地圖提供者像Google Maps，用來建立互動式地圖，由兩個libraries組成，從空間數據開放格式，利用向量投影的Python library以及post GIS，並將兩者結合到SVG和JavaScript library，並把這些SVG資料轉變成互動性地圖。

Sigma.js是一個開源的輕量級庫，用來顯示互動式的靜態和動態圖表。

經常使用開源軟體的朋友應該很熟悉ECharts，大家都知道去年春節以及近期央視大規劃報道的百度大數據產品，如百度遷徙、百度司南、百度大數據預測等等，這些產品的數據可視化均是通過ECharts來實現的。

Zoho Reports支持豐富的功能幫助不同的用戶解決各種個性化需求，支持SQL查詢、類四暗自表格界面等。

Quantum GIS(QDIS)是一個用戶界面友好、開源代碼的GIS客戶端程序，支持數據的可視化、管理、編輯與分析和印刷地圖的製作。

Tableau Public是一款桌面可視化工具，用戶可以創建自己的數據可視化，並將交互性數據可視化發布到網頁上。

Paper.js是一個開源向量圖表敘述架構，能夠在HTML5 Canvas 運作，對於初學者來說它是很容易學習的，其中也有很多專業面向可以提供中階及高階使用者。

Dundas Chart處於行業領先地位的NET圖表處理控制項，於2009年被微軟收購，並將圖表產品的一部分功能集成到Visual Studio中。

TimeFlow Analytical Timeline是為了暫時性資料的視覺化工具，現在有alpha版本因此有機會可以發現差錯，提供以下不同的呈現方式：時間軸、日曆、柱狀圖、表格等。

Gantti是一個開源的PHP類，幫助用戶即時生成Gantti圖表。使用Gantti創建圖表無需使用JavaScript，純HTML-CSS3實現。圖表默認輸出非常漂亮，但用戶可以自定義樣式進行輸出（SASS樣式表）。

Smoothie Charts是一個十分小的動態流數據圖表路。通過推送一個webSocket來顯示實時數據流。Smoothie Charts只支持Chorme和Safari瀏覽器，並且不支持刻印文字或餅圖，它很擅長顯示流媒體數據。

Flot是一個優秀的線框圖表庫，支持所有支持canvas的瀏覽器（目前主流的瀏覽器如火狐、IE、Chrome等都支持）。

Pizza Pie Charts是個響應式餅圖圖表，基於Adobe Snap SVG框架，通過HTML標記和CSS來替代JavaScript對象，更容易集成各種先進的技術。

Fusion Charts Suit XT是一款跨平台、跨瀏覽器的JavaScript圖表組件，為你提供令人愉悅的JavaScript圖表體驗。它是最全面的圖表解決方案，包含90+圖表類型和眾多交互功能，包括3D、各種儀錶、工具提示、向下鑽取、縮放和滾動等。它擁有完整的文檔以及現成的演示，可以幫助你快速創建圖表。

Protovis是一個可視化JavaScript圖表生成工具。

Arbor.Js提供有效率、以力導向的版面配置演演算法，抽象畫圖表組織以及篩選更新的處理。

Highchart.js是單純由JavaScript所寫的圖表資料庫，提供簡單的方法來增加互動性圖表來表達你的網站或網站應用程式。目前它能支援線圖、樣條函數圖。

Circos最初主要用於基因組序列相關數據的可視化，目前已應用於多個領域，例如：影視作品中的人物關係分析，物流公司的訂單來源和流向分析等，大多數關係型數據都可以嘗試用Circos來可視化。

NodeXLDE 主要功能是社交網路可視化。

BirdEye是Decearative Visual Analytics，它屬於一個群體專案，為了要提升設計和廣泛的開源資料視覺化發展，並且為了Adobe Flex建視覺分析圖庫，這個動作以敘述性的資料庫為主，讓使用者能夠建立多元資料視覺化界面來分析以及呈現資訊。

Visualize Free是一個建立在高階商業後台集游InetScoft開發的視覺化軟體免費的視覺分析工具，可從多元變數資料篩選並看其趨勢，或是利用簡單地點及方法來切割資料或是小範圍的資料。

OpenStreetMap是一個世界地圖，由像您一樣的人們所構築，可依據開放協議自由使用。

OpenHeatMap簡單易用，用戶可以用它上傳數據、創建地圖、交流信息。它可以把數據（如Google Spreadsheet的表單）轉化為互動式的地圖應用，並在網上分享。

GeoCommons可以使用戶構建富交互可視化應用來解決問題，即使他們沒有任何傳統地圖使用經驗。你可以將實 社會 化數據或者GeoCommons保存的超5萬份開源數據在地圖上可視化，創造帶交互的可視化分析作品，並將作品嵌入網站、博客或分享到社交網路上。

來源: 悟空智能 科技