web數據可視化js,web數據可視化框架源代碼

本文目錄一覽：

• 1、webgl、three.js、d3.js這三者是什麼關係
• 2、初識 D3.js ：打造專屬可視化
• 3、5個常用的大數據可視化分析工具
• 4、4行代碼就可以完成一個Web版的3D地球可視化展示——Gio.js
• 5、驚艷：近百種數據可視化工具效果展示，總有一款適合你！
• 6、數據分析可視化工具推薦？

webgl、three.js、d3.js這三者是什麼關係

webgl、three.js、D3.js這三者的關係是：

1、D3.js是一個數據可視化的庫，看看他們的DEMO就可以知道，技術基礎是SVG。兼容性是IE9+。

2、webgl是HTML5中提出的新技術，是一種3D繪圖標準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，關於它的教程可以看看hiwebgl。目前兼容性堪憂

3、three.js是以webgl為基礎的庫，封裝了一些3D渲染需求中重要的工具方法與渲染循環。它的教程同樣可以在hiwebgl裡面找到。

4、three.js之於webgl，類似於windows版本的虛幻引擎之於D3D。當然，虛幻引擎的能力範圍比three.js大得多。d3.js跟上面兩者沒有關係。

初識 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後，限制我們實現可視化的不再是技術而是想象力。

5個常用的大數據可視化分析工具

1、FineReport

FineReport是一款純Java編寫的、集數據展示(報表)和數據錄入(表單)功能於一身的企業級web報表工具，只需要簡單的拖拽操作便可以設計複雜的中國式報表，搭建數據決策分析系統。

2、Echarts

前面說過了，Echarts是一個開源免費的javascript數據可視化庫，它讓我們可以輕鬆地繪製專業的商業數據圖表。

大家都知道去年春節以及近期央視大規劃報道的百度大數據產品，如百度遷徙、百度司南、百度大數據預測等等，這些產品的數據可視化均是通過ECharts來實現的。

3、FineBI

FineBI是新一代自助大數據分析的商業智能產品，提供了從數據準備、自助數據處理、數據分析與挖掘、數據可視化於一體的完整解決方案，也是我比較推崇的可視化工具之一。

FineBI的使用感同Tableau類似，都主張可視化的探索性分析，有點像加強版的數據透視表。上手簡單，可視化庫豐富。可以充當數據報表的門戶，也可以充當各業務分析的平台。

4、pyecharts

Echarts(下面會提到)是一個開源免費的javascript數據可視化庫，它讓我們可以輕鬆地繪製專業的商業數據圖表。當Python遇上了Echarts，pyecharts便誕生了，它是由chenjiandongx等一群開發者維護的Echarts Python接口，讓我們可以通過Python語言繪製出各種Echarts圖表。

5、Bokeh

Bokeh是一款基於Python的交互式數據可視化工具，它提供了優雅簡潔的方法來繪製各種各樣的圖形，可以高性能的可視化大型數據集以及流數據，幫助我們製作交互式圖表、可視化儀錶板等。

4行代碼就可以完成一個Web版的3D地球可視化展示——Gio.js

Gio.js 是一個基於Three.js的web 3D地球數據可視化的開源組件庫。使用Gio.js的網頁應用開發者，可以快速地以申明的方式創建自定義的Web3D數據可視化模型，添加數據，並且將其作為一個組件整合到自己的應用中。

Gio.js 是一個基於Three.js的web 3D地球數據可視化的開源組件庫。使用Gio.js的網頁應用開發者，可以快速地以申明的方式創建自定義的Web3D數據可視化模型，添加數據，並且將其作為一個組件整合到自己的應用中。

這個庫的開發是受到Google 2012 Info大會上的某項目可視化的啟發，該項目開發者是Google員工Michael Chang。使用Gio.js就可以快速構建這種炫酷的3D模型，並以此為基礎進行深入地開發。

在HTML的head中引入Three.js和Gio.js依賴， 以下展示了如何使用script標籤引入依賴:

在引入Three.js和Gio.js在頁面之後，已經可以創建3D Gio地球了。在此我們將先展示如何創建基礎樣式的Gio地球。

創建一個p，Gio地球將會被渲染在這個區域中：

添加一下4行Javascript代碼在你的HTML中， 用以創建並渲染：

在Gio.js 1.0發布之後，開發者們提出了很多很酷的、很有建設性的建議，比如微信應用開發者希望Gio.js支持微信小程序，有經驗的Three.js開發者希望Gio.js提供Three.js編程接口等。在經過仔細研究、綜合設計之後，Gio.js 2.0實現了大部分功能，並且添加了有關文檔說明。以下列出了主要的2.0新增特性：

Gio.js僅依賴於Three.js。

經過測試，Gio.js在Three.js R90版本下可以很好地運行和使用。

Gio.js可以運行在以下的瀏覽器環境中:

更多詳細的介紹就不在本文中介紹了，官方文檔非常詳細，感興趣的小夥伴可以直接移步文檔：

Gio.js可以說是Three.js中實踐的非常不錯的了，官方還提供了非常多的實例，通過一些簡單的API配置即可實現非常炫酷的Web3D可視化地球，而且文檔非常詳細，更多實用和有趣的地方等待你的 探索 ！

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

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

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

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萬份開源數據在地圖上可視化，創造帶交互的可視化分析作品，並將作品嵌入網站、博客或分享到社交網絡上。

來源: 悟空智能 科技

數據分析可視化工具推薦？

其實國內外有不少可視化工具還是相當好用的，比如FineBI、Echart、Tableau等等。借這個話題我盤點了一下國內外的可視化工具，涉及數據分析、軟件分析、圖像處理等等幾乎所有可視化相關領域，大家可以Mark起來當做參考。

1、FineBI

簡潔明了的數據分析工具，優點是零代碼可視化、可視化圖表豐富，只需要拖拖拽拽就可以完成十分炫酷的可視化效果，擁有數據整合、可視化數據處理、探索性分析、數據挖掘、可視化分析報告等功能，更重要的是個人版免費。

2、Infogr.am

十分強大的圖表製作工具，本身帶有十分豐富多樣的模板，如果個人不滿意還可以手動設計，優點也是不需要代碼編程，缺點就是只能用來製作圖表，更加炫酷的可視化效果實現起來比較困難。

3、Easel.ly

幾年前開始流行的信息圖製作軟件，界面簡潔、操作簡便、圖片精美，而且用戶只需要登錄Easel.ly官方網站即可開始進行信息圖製作，在網站上你可以盡情分享和查找素材，當然有些是不免費的。

4、Color Brewer

強大的配色工具，你在這裡面幾乎可以找到任何你想要的顏色，它本身也是一個繪圖系統，擁有很多配色模板，可以當做一個小工具收藏，配合其他可視化工具使用。

5、ChartBlocks

英國的一家公司開發的製作統計圖表的線上工具，省去在Excel軟件里製作圖表的繁複，讓圖表更加多樣化，無需專業的軟件技能就可以輕鬆製作漂亮的圖表，但是功能不多。

6、Visual.ly

在線圖表神器，這家網站以豐富的信息圖資源而著稱，很多用戶樂意把自己製作的信息圖上傳到網站中與他人分享，最近好像爆出消息還能幫助人們製作信息圖，不知道免不免費。

7、Nuvi

一款非常簡單好用的信息圖形生成器，擁有好幾百個模版，當然，如果你喜歡，也可以不用模版

8、Dygraphs

用的比較少，網站上資源也幾乎沒有，在國內屬於小圈冷門的可視化工具，但功能其實是很強大的，不想費力找資源的建議選擇其他的工具。

9、ECharts

ECharts就不用說了，搞數據可視化的99%都知道，是一款商業級數據圖表，純JavaScript的圖標庫，缺點是要代碼操作，小白上手難度很高，適合碼農這樣的數據人。

10、Cytoscape

適合做一些文章里的網格圖、散點圖、結構圖、思維圖，寫論文、報告等場景下非常好用，適合大學生或者搞科研的人。

11、圖表秀

適合做PPT時做一些好看的圖表，圖表製作功能比較強大，但是我記得導出高清圖片的時候要收費，只能導標清圖比較坑吧。

12、BDP

BDP個人版是國內海致公司旗下的數據可視化分析產品（BDP也有商業版，針對企業用戶，但我非商業版用戶，所以就不多說了），有多數據整合、數據合表處理、可視化分析等數據功能，總體來看數據功能還是非常全面的，雖然不免費但是成本低一些

13、xdatainsight

國產的一站式敏捷可視化工具，以前還比較好用，現在基本沒人用了

14、Tagul

國外一款詞雲製作神器，免費的小工具，非常好用

15、Tagxedo

跟上面的tagul一樣，也是詞雲製作工具，而且是在線製作網站，但是需要翻牆

16、Wordle

很老的信息可視化工具了，主要也是製造詞雲的，當年也是大名鼎鼎，但是也有很多缺點，字體顏色沒有意義、可視化還很初級等

17、WordItOut

詞語云一鍵生成網站，非常方便，但是沒辦法根據頻率調整大小，功能比較粗糙

18、ToCloud

ToCloud是一個在線免費標籤雲生成器，你可以設置詞的長度和頻率，還能提取短語，是一個比較好的標籤雲工具之一利用詞頻生成詞雲，你可以快速了解頁面優化了某些單詞

19、圖悅

這款國內的在線詞頻分析工具，在長文本自動分詞並製作詞雲方面還是很出眾的，而且也容易上手，還可以自定義定製圖形模板：標準、微信、地圖等，切換自如，用起來體驗很不錯

20、語義分析系統

主要是用於分析文章中的各種參數，包括頻率等內容，百度的語義分析系統功能還是挺不錯的

21、騰訊文智

騰訊的中文語義網站，分析語句、篇章等，教學類平台

22、polymaps

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

23、nodebox

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

24、processing

堪比python的編程語言，能夠實現幾乎所有的可視化效果，語句規範上不如python ，但是比較容易上手

25、processingjs

跟上面的一樣，是一門可視化編程語言，ProcessingJS是它的JavaScript實現，使用HTML5的canvas，配合現代瀏覽器來實現web客戶端的可視化技術

26、Tangle

Tangle是個用來探索、Play和查看文檔更新的交互式庫，既是圖表，又是互動圖形用戶界面的小程序

27、FF chartwell

一款自動生成分析圖的黑科技字體，字體很多

28、SAS Visual Analytics

SAS可視化分析是一款擅長做交互式可視化分析的產品，同時它同樣也可以創建出一些很好的可視化圖表，不過比較笨拙，不靈活

29、數字冰雹

國內專門做可視化的，主要是大屏，面向企業而不是個人

30、Data-Driven Documents

簡稱D3，是一個很神奇的基於Javascript的在網頁上實現數據可視化的工具，不過現在已經不更新了，缺點是要學的東西太多，HTML、編程都得掌握才行

31、leafletjs

做全屏地圖比較方便，同樣是需要掌握編程基礎，優點是有手機端

32、Crossfilter

Crossfilter是一個數據計算模型，能夠很好地結合DC.JS進行數據解析繪圖，屬於數理類工具

33、openlayers

OpenLayers作為業內使用最為廣泛的地圖引擎之一，已被各大GIS廠商和廣大WebGIS二次開發者採用，入門難度極高

34、wolframalpha

數學開發軟件，同時也可以做數理計算可視化，屬於專業性質的工具

35、visme5

Visme為用戶提供30萬張高清圖片、6500種圖標、750多種圖表模板以及120多種字體

36、databoard

製作儀錶板的，關注數據可視化本身，更多地關注利用可視化技術，高效，批判性地監控數據

37、googlecharts

文檔和幫助信息豐富的 Google Charts 對於剛剛入門 Java 繪圖的人來說是極佳的選擇。它的文檔里到處都是帶注釋的代碼和逐步的講解，可以直接用來把 HTML5 / SVG 圖標嵌入到你的網頁中。

38、timeline

以時間軸的形式進行可視化，別有一番風味

39、FusionCharts

FusionCharts 支持 vanilla Java、jQuery、Angular 等一系列高人氣的庫和框架。它內置90多種圖表和超過1000種地圖，相比 Google Charts 和 MetricsGraphics 要完整得多

40、envision.js

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型

41、Sigma

Sigma 有着自己獨特的定位，那就是圖模型的繪製。它基於 Canvas 和 WebGL 開發並提供了公開的 API，所以你可以在 GitHub 上找到社區貢獻的許多插件

42.dc.js

dc.js 是一個開源的 Java 繪圖庫。它非常適合用來創建交互式的儀錶盤（Dashboard），圖表之間是有聯繫的，所以當你與其中一個部分進行交互時，其他部分都會做出實時的反饋