盤(pán)點(diǎn)：20個(gè)數(shù)據(jù)可視化（數(shù)據(jù)視覺(jué)化）工具

盤(pán)點(diǎn)：20個(gè)數(shù)據(jù)可視化（數(shù)據(jù)視覺(jué)化）工具

獲得信息的最佳方式之一是，通過(guò)視覺(jué)化方式，快速抓住要點(diǎn)信息。另外，通過(guò)視覺(jué)化呈現(xiàn)數(shù)據(jù)，也揭示了令人驚奇的模式和觀察結(jié)果，是不可能通過(guò)簡(jiǎn)單統(tǒng)計(jì)就能顯而易見(jiàn)看到的模式和結(jié)論。正如作家、記者和信息設(shè)計(jì)師DavidMcCandless在TED上說(shuō)道：“通過(guò)視覺(jué)化，我們把信息變成了一道可用眼睛來(lái)探索的風(fēng)景線，一種信息地圖。當(dāng)你在迷失在信息中時(shí)，信息地圖非常實(shí)用?！?伯樂(lè)在線補(bǔ)配視頻：視覺(jué)化數(shù)據(jù)DavidMcCandless)講故事有很多種方式，但萬(wàn)事都源于構(gòu)思。俗話說(shuō)，一圖勝千言。不過(guò)制作一張超酷的信息圖，又是一件費(fèi)時(shí)又費(fèi)力的事。本文就整理了20個(gè)相應(yīng)工具，應(yīng)該能簡(jiǎn)化你的工作。01.iChartsiChartscanhaveinteractiveelements，andyoucanpullindatafromGoogleDocsiCharts提供了一個(gè)用于創(chuàng)建并呈現(xiàn)引人注目圖表的托管解決方案。有許多不同種類的圖表可供選擇，每種類型都完全可定制，以適合網(wǎng)站的顏色主題。iCharts有交互元素，可以從GoogleDoc、Excel表單和其他來(lái)源中獲取數(shù)據(jù)。iCharts的免費(fèi)版只允許你用基本的圖表類型，如果基本圖表類型無(wú)法滿足需求，升級(jí)到付費(fèi)用戶吧。02.FlotCreateanimatedvisualisationswiththisjQuerypluginFlot是一個(gè)用于jQuery的專業(yè)繪圖庫(kù)，有很多便捷的特性，最關(guān)鍵的是，跨瀏覽器(包括IE6)?？砂褦?shù)據(jù)做成動(dòng)畫(huà)，因?yàn)樗且粋€(gè)jQuery插件，所以你完全可以控制動(dòng)畫(huà)、演示和用戶交互的方方面面。03.Rapha?lThishandyJavaScriptlibraryoffersarangeofdatavisualisationoptionsRapha?l是一個(gè)能夠在網(wǎng)頁(yè)上創(chuàng)建和操作矢量圖形的JavaScript庫(kù)。它使用SVG&VML來(lái)創(chuàng)建圖形。因?yàn)槊總€(gè)生成的圖形都是一個(gè)DOM對(duì)象，所以可以通過(guò)JavaScript操作這些圖形?？汕f(wàn)Rapha?l官網(wǎng)查看Demo，04.ModestMapsIntegrateanddevelopinteractivemapswithinyoursitewiththiscooltoolModestMaps是一個(gè)輕量級(jí)、簡(jiǎn)單、免費(fèi)的地圖工具(JS庫(kù))，網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)人員可輕松地把它整合到網(wǎng)站中。05.LeafletUseOpenStreetMapdataandintegratedatavisualisationinanHTML5/CSS3wrapper另外一個(gè)地圖工具，支持HTML5和CSS3，Leaflet可以輕松使用OpenStreetMap的數(shù)據(jù)，并且完全把交互可視化數(shù)據(jù)集成在一起。Leaflet的內(nèi)核庫(kù)很小，但是有很多插件能擴(kuò)展其功能，比如：動(dòng)態(tài)標(biāo)記、masks和熱圖，非常適用于需要顯示地理位置的項(xiàng)目。麻雀雖小，五臟俱全。06.TimelineTimeline是一個(gè)奇妙的小工具，坑繪制漂亮的交互式時(shí)間軸，用戶滾動(dòng)鼠標(biāo)，時(shí)間軸會(huì)響應(yīng)變化。點(diǎn)擊時(shí)間軸上的元素，可顯示更多信息。(MIT開(kāi)發(fā))07.Exhibit和Timeline一樣，Exhibit也是MIT開(kāi)發(fā)的，完全開(kāi)源。借助Exhibit，用戶可輕松做出交互地圖，還有其他基于數(shù)據(jù)的可視化內(nèi)容，比如國(guó)旗，名人的出生地。08.WolframAlphaWolframAlpha是由WolframResearch公司推出的一款在線自動(dòng)問(wèn)答系統(tǒng)。WolframAlpha這一款自動(dòng)問(wèn)答系統(tǒng)的特色是可以直接向用戶返回答案，而不是像其它搜索引擎一樣提供一系列可能含有用戶所需答案的相關(guān)網(wǎng)頁(yè)。如果輸入公開(kāi)數(shù)據(jù)，比如一個(gè)函數(shù)，可以生成函數(shù)曲線(見(jiàn)上圖)。另外，WolframAlpha提供一個(gè)小掛件(Widget)，可嵌入在你的網(wǎng)站上。09.Visual.lyVisual.ly是一個(gè)結(jié)合gallery和信息圖的生成器。它有一個(gè)簡(jiǎn)單的工具箱，用來(lái)展示數(shù)據(jù)信息，它也是一個(gè)分享作品的平臺(tái)。這個(gè)網(wǎng)頁(yè)有制作過(guò)程示例。10.VisualizeFreeVisualizeFree是一個(gè)托管工具，它允許你使用公用數(shù)據(jù)，或上傳自己是數(shù)據(jù)，來(lái)做交互式的圖片，以展示數(shù)據(jù)?？梢暬h(yuǎn)超過(guò)了簡(jiǎn)單的圖表，并且這個(gè)工具完全免費(fèi)，不過(guò)它是用Flash輸出結(jié)果，所以有些場(chǎng)景下用不了這個(gè)工具了。11.BetterWorldFluxOrientatedtowardsmakingpositivechangetotheworld，BetterWorldFluxhassomelovelyvisualisationsofsomeprettydepressingdata.Itwouldbeveryuseful，forexample，ifyouwerewritinganarticleaboutworldpoverty，childundernourishmentoraccesstocleanwater.Thistooldoesn’tallowyoutouploadyourowndata，butdoesofferarichinteractiveoutput.(這個(gè)工具，在其官網(wǎng)試了多次，都測(cè)試不成功……)12.jQueryVisualize這個(gè)工具由jQuery的ThemeRoller和jQueryUI幕后團(tuán)隊(duì)開(kāi)發(fā)制作。jQueryVisualize是一個(gè)開(kāi)源的圖表插件，使用HTMLCanvas繪制多種不同類型的圖表。這個(gè)插件有個(gè)重要的特性是支持ARIA?？蓮腉ithub下載該插件。13.jqPlot如果你已經(jīng)在使用jQuery，不想為HighCharts付費(fèi)，而且情況很簡(jiǎn)單，不需要D3那樣復(fù)雜的庫(kù)，那么jqPlot是很好的選擇。14.DipityDipity可用來(lái)創(chuàng)建豐富的交互式時(shí)間線，并嵌入到網(wǎng)站中。有免費(fèi)版和商用版。不多介紹，請(qǐng)?jiān)L問(wèn)Dipity官網(wǎng)(提示：請(qǐng)自備梯子)實(shí)際查看。15.ManyEyesManyEyes是由IBM研究的視覺(jué)通訊實(shí)驗(yàn)室(?0?2VisualCommunicationLab)和IBMCognos軟件集團(tuán)于2007年所創(chuàng)建的一個(gè)在線可視化社區(qū)。通過(guò)這個(gè)社區(qū)，用戶可以創(chuàng)建可視化作品，上傳數(shù)據(jù)集，對(duì)其他用戶所創(chuàng)建的可視化進(jìn)行評(píng)論，或者分享，并可以對(duì)可視化作品加以評(píng)分。ManyEyes允許用戶快速?gòu)墓_(kāi)可用或已上次的數(shù)據(jù)集中完成可視化，并且有廣泛的分析特性，比如：掃描文本，分析關(guān)鍵詞的密度和飽和度。16.D3.jsD3.js是最流行的可視化庫(kù)之一，它被很多其他的表格插件所使用。它允許綁定任意數(shù)據(jù)到DOM，然后將數(shù)據(jù)驅(qū)動(dòng)轉(zhuǎn)換應(yīng)用到Document中。你可以使用它用一個(gè)數(shù)組創(chuàng)建基本的HMTL表格，或是利用它的流體過(guò)度和交互，用相似的數(shù)據(jù)創(chuàng)建驚人的SVG條形圖。PS：《D3.js應(yīng)用代碼案例集合》/zjIrNMp，比如這個(gè)案例WorldTour，按首字母順序在地球儀上展現(xiàn)各個(gè)國(guó)家與地區(qū)：/zjfM10z。D3用到了SVG技術(shù)，所以國(guó)內(nèi)開(kāi)發(fā)者在使用時(shí)要好好在IE下調(diào)試哦。17.JavaScriptInfoVisToolkitJavaScriptInfoVisToolkit是一個(gè)在Web上創(chuàng)建可交互式的數(shù)據(jù)圖表JS庫(kù)，同樣包括了多種圖表類型，并有漂亮的動(dòng)畫(huà)效果。雖然是免費(fèi)工具，但建議有條件的童鞋捐贈(zèng)作者。JIT的作者是NicolasBelmonte，目前是Twitter的DataVisualizationScientist，除了這個(gè)項(xiàng)目，他還寫(xiě)了PhiloGL和V8-GL。18.jpGraph如果需要在服務(wù)器端生成圖表或圖片，jpGraph提供了一個(gè)基于PHP的解決方案，只需從數(shù)據(jù)庫(kù)中取出相關(guān)數(shù)據(jù)，定義標(biāo)題，圖表類型，剩下的事就交給jpGraph了。它很多種圖表類型(見(jiàn)上圖)。非商業(yè)使用是免費(fèi)。19.HighchartsHighcharts是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù)。能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用，也有商業(yè)授權(quán)。目前HighCharts支持的圖表類