D3.js與相關JavaScript資料視覺化函式庫簡介

簡介

幾年前第一次看到D3.js時真令人興奮，對其製作出來的東西感到嘆為觀止，因為不僅做出來的網頁式互動式圖表美觀漂亮，而且它還是開放源碼。

D3.js也簡稱為D3，全稱是Data-Driven Documents，是JavaScript函式庫，用來在網頁瀏覽器上產生動態互動式資料視覺化。

D3可以做出相當複雜的視覺化效果，在官網上可看到不少的範例及源碼。這裡也提供兩篇應用介紹：

• World Map with D3 Microlibraries and rotated to contain Russia
• An OHLC Chart Component for D3 

相對的，D3在學習與使用上具有一定的複雜度，必須撰寫較多的程式代碼。如果所需要的資料視覺化效果是較為制式化、相對簡單的圖表，那麼可以考慮其他基於D3發展出來的函式庫，其中有一些在使用上相對簡單許多，可省下不少撰寫代碼的工作，例如C3js，請見之前寫的〈C3.js 簡易快速入門〉。

基於D3的函式庫

這類有相當多，上述〈C3.js 簡易快速入門〉中已提到幾個，這裡再列一些，不按照特定的順序：

• plotly.js：The open source JavaScript graphing library that powers Plotly.
• Recharts：Redefined chart library built with React and D3.
• Taucharts：Flexible javascript charting library for data exploration.
• Britecharts is a client-side reusable Charting Library based on D3.js v4 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
• React Stockcharts：Highly customizable stock charts built with React JS and d3.
• billboard.js：Re-usable easy interface JavaScript chart library, based on D3 v4+. Forked from C3.js.

要注意所選用的這類函式庫與D3版本的搭配，如C3.js目前仍停留在使用D3 v3的版本，就不能使用已經出來快一年的新版D3 v4。這類最低版本需求請見函式庫的說明文件。

其他JavaScript圖表函式庫

除了D3與其延伸的函式庫之外，還是有相當多的類似函式庫可選擇，以下列一些之前看到過的：

• JavaScript InfoVis Toolkit：Create Interactive Data Visualizations for the Web.
• InfoViz is an information visualization library based on Raphaël.
• g9.js：g9 is a javascript library for creating automatically interactive graphics.
• ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.
• jQPlot：Pure JavaScript plotting plugin for jQuery.
• Chart.js：Simple HTML5 Charts using the canvas element.

有些可能稍舊。

上面提到的都是開放源碼也可免費使用，除此之外，也不乏做得不錯的商業付費版，像HighCharts。

上面列的沒做太多說明，這篇〈50 JavaScript Libraries for Charts and Graphs〉有較多的介紹文字，其中有一些是上面提到過的。

結語

JavaScript有相當多的資源，在資料視覺化這方面就已經多的令人眼花撩亂，以上提到的也只是一部分。想採用這類函式庫的，可先從中找個具有豐富範例與詳細說明文件，但說明文件又不會太多，可以在短時間內很快上手的先試一下。當然，也要考量所要呈現的視覺效果是哪一類，所挑選的函式庫要適用這類才行。