最好的JavaScript數據可視化庫都在這裏了

最好的JavaScript數據可視化庫都在這裏了

做者｜Jonathan Saring
譯者｜吳留坡
編輯｜覃雲
在 JS 程序中，爲了實現漂亮的圖形、圖表和數據可視化，咱們選擇使用開源庫。生活在數據爆炸的時代，咱們開發的每個應用程序幾乎都使用或者藉助數據來提高用戶體驗。爲了幫助你輕鬆地爲你最喜歡的應用程序添加漂亮的數據可視化，這裏列出了 2018 年最好的 JavaScript 數據可視化庫（排名不分前後）。

1. D3js

star 數：80K
D3.js 多是最流行和使用最普遍的 JavaScript 數據可視化庫。D3 用於基於數據的文檔操做，並使用 HTML、SVG 和 CSS 讓數據活起來。它基於 Web 標準，結合現代瀏覽器，不須要與專有框架耦合，將可視化組件和數據驅動的方法結合到 DOM 操做上。它容許你將任意數據綁定到文檔對象模型（DOM），而後在文檔上應用數據轉換。
這裏有一個很棒的例子 ：https://github.com/d3/d3/wiki/Gallery
項目地址：https://github.com/d3/d3/

2. ChartJS

star 數：40K
一個很是受歡迎的開源 HTML5 圖表庫，它使用畫布元素構建響應式 Web 應用。ChartJS 提供了混合圖表類型，新的圖表軸類型和漂亮的動畫。它的設計簡單而優雅，有 8 種基本的圖表類型，你能夠將該庫與 moment.js 結合在一塊兒使用，用於渲染時間軸。
項目地址：https://cdnjs.com/libraries/Chart.js

3. ThreeJS

star 數：45K
ThreeJS 用 WebGL 建立 3d 動畫。該項目的靈活性和抽象性意味着它也可用於 2 維或 3 維的數據可視化。
例如，你可使用這個指定的模塊（https://github.com/davidpiegza/Graph-Visualization）和 WebGL 進行 3D 圖形可視化，或者嘗試在線試驗（https://www.steema.com/files/public/teechart/html5/latest/demos/canvas/webgl/threejs_example.htm）。
項目地址：https://github.com/mrdoob/three.js/

4. Echarts & Highcharts

star 數：30K
百度的 Echarts 項目是一個基於瀏覽器的交互式圖表和可視化庫。它是用純 JavaScript 編寫的，基於 zrender 畫布。它支持以畫布、SVG(4.0+) 和 VML 的形式繪製圖表。除了 PC 和移動瀏覽器外，ECharts 還能夠與 node 上的 node-canvas 一塊兒使用，以便進行高效的服務器端渲染（***）。
這裏是完整的示例庫：
http://echarts.baidu.com/echarts2/doc/example-en.html
項目地址：
https://github.com/apache/incubator-echarts

star 數：8K
Highcharts JS 是一個廣受歡迎的基於 SVG 的 JavaScript 圖表庫，針對舊的瀏覽器可降級到 VML 和畫布。世界上最大的 100 家公司中，有 72 家公司（Facebook、Twitter 等）使用了這個庫，這使得它成爲世界上最流行的 JS 圖表 API。
項目地址：
https://github.com/highcharts/highcharts

5. Metric-Graphics

star 數：7K
Metric-Graphics 用於可視化和佈局時間序列數據。它相對較小（80kb），提供了小而優雅的線條圖、散點圖、直方圖、柱狀圖和數據表，以及地格圖（rug plot）和基本線性迴歸等特性。
這裏有一個交互式的示例庫：
https://metricsgraphicsjs.org/examples.htm
項目地址：
https://github.com/metricsgraphics/metrics-graphics

6. Recharts

Recharts 是一個使用 React 和 D3 構建的圖表庫，能夠做爲聲明性的 React 組件使用。 該庫提供原生 SVG 支持，輕量級依賴樹（D3 子模塊）高度可定製。官網文檔中能夠找到不少例子。
項目地址：
https://github.com/recharts/recharts

7.Raphael

star 數：10K
Raphael 是一個 JavaScript 矢量庫，可在 Web 中繪製矢量圖形。該庫使用 SVG W3C 和 VML 做爲建立圖形的基礎，所以每一個圖形對象也是 DOM 對象，你能夠附加 JavaScript 事件處理程序。Raphael 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。
項目地址：
https://github.com/DmitryBaranovskiy/raphael

8.C3js

star 數：8K
C3 是一個基於 D3 的可重用 Web 應用圖表庫。該庫爲每一個元素提供了相應的類，這樣你就能夠經過這些類來自定義樣式，並經過 D3 直接擴展結構。它還提供了多種 API 和回調來訪問圖表狀態。藉助它們，你能夠更新圖表，即便是已經渲染好的圖標。
看看這些例子：https://c3js.org/examples.html
項目地址：https://github.com/c3js/c3

9. React Vis

star 數：4K
React-vis 是 Uber 開發的一系列數據可視化組件，包括線 / 面 / 柱狀圖、熱圖、散熱圖、等高線圖、六角熱圖等等。使用該庫不須要事先掌握 D3 或任何其餘 data-vis 庫的知識，並提供了低級模塊化的構建塊組件，如 x/y 軸。
項目地址：https://github.com/uber/react-vis

10.React Virtualized

star 數：12K
React virtualized 是一組 React 組件，有效地呈現大型列表和表格數據。ES六、CommonJS 和 UMD 版本能夠在每一個分發版中使用，該項目支持 Webpack 4 工做流。請注意，爲了不版本衝突，必須將 react，react-dom 指定爲 peer 依賴。
項目地址：https://github.com/bvaughn/react-virtualized

11.Victory

star 數：6K+
Victory 在 Web 和 React Native 應用程序中使用相同的 API，以便於跨平臺繪製圖表。一種優雅而靈活的方式來利用 React 組件來支持實用的數據可視化。
項目地址：
https://github.com/FormidableLabs/victory

12. CartoDB

star 數：2K
Carto 是一個位置智能和數據可視化工具，用於發現位置數據中的看法。你能夠經過 Web 表單上傳地理空間數據（Shapefiles、GeoJSON 等），並在數據集或地圖上將其可視化，使用 SQL 進行搜索，並使用 CartoCSS 來應用地圖樣式。
這裏有一些視頻演示：https://vimeo.com/channels/carto
項目地址：https://github.com/CartoDB/cartodb

13.Raw graphs

star 數：5K
Raw 是電子表格和數據可視化之間的鏈接，基於 d3.js 庫建立基於向量的自定義可視化。它能夠處理表格數據（電子表格和 CSV）和從其餘應用程序複製和粘貼的文本。由於是 SVG 格式，因此可使用矢量圖形編輯器編輯，或直接嵌入到網頁中。
這裏有一個例子：https://rawgraphs.io/gallery/
項目地址：
https://github.com/densitydesign/raw

14. Metabase

star 數：11K+
Metabase 是一種至關快速和簡單的方法，能夠在不瞭解 SQL 的狀況下建立數據儀表盤（分析師和數據專業人士可以使用 SQL 模式）。 你能夠建立片斷和度量指標，發送數據到 Slack（經過 MetaBot 在 Slack 中查看數據）等等。它多是一個很好的工具，可用它在團隊內部可視化數據，儘管可能須要作一些維護工做。
項目地址：
https://github.com/metabase/metabase

15. tauCharts

star 數：2K
tauCharts 一個基於 D3 的圖表庫。該庫提供了一個聲明接口，用於將數據字段快速映射到可視化屬性，它的架構容許你使用插件構建切面和擴展圖表行爲。
項目地址：
https://github.com/TargetProcess/tauCharts

特別推薦

1.chartist-js
簡單的響應式圖表。
地址：https://github.com/gionkunz/chartist-js
2.semiotic
結合了 React 和 D3 的數據可視化框架。
地址：https://github.com/emeeks/semiotic
3.nvd3
一個用 d3.js 編寫的可重用的圖表庫。
地址：https://github.com/novus/nvd3
4.viser
一個適合數據工程師的工具箱。
地址：https://github.com/viserjs/viser
5.tui.chart
漂亮的數據可視化圖表。
地址：https://github.com/nhnent/tui.chart
6.datamaps
使用 D3.js 在單個 JavaScript 件中自定義 SVG 地圖可視化。
地址：https://github.com/markmarkoh/datamaps
7.sheetsee.js
用於對谷歌表格的數據進行可視化。
地址：https://github.com/jlord/sheetsee.js
8.BizCharts
基於 G2 和 React 的數據可視化庫。
地址：https://github.com/alibaba/BizCharts
9.sigma.js
一個專門用於圖形繪製的 JavaScript 庫。
地址：https://github.com/jacomyal/sigma.js
10.incubator-echarts
一個強大的、交互式的圖表和可視化的瀏覽器庫。
地址：https://github.com/apache/incubator-echarts
11.vis
一個動態的基於瀏覽器的可視化庫。
地址：https://github.com/almende/vis
原文連接
https://blog.bitsrc.io/11-javascript-charts-and-data-visualization-libraries-for-2018-f01a283a5727