アルダグラムでソフトウェアエンジニアとして活動している松田です。
データは数値や文字のみの表現では、情報の把握が難しい場合があります。
1画面に複数のデータを視覚化して表示することで、情報の把握が容易になることがあります。
一般的には、それをダッシュボードと呼びます。
本稿では、ダッシュボード開発のために調査したReactのグラフ描画ライブラリおよび関連技術をまとめています。
データビジュアライゼーションの一助になれば、幸いです。
グラフ描画に関連する技術
SVGとCanvas
ブラウザでグラフ描画を行う主な手段としては、 SVG と Canvas があります。
簡易比較表
| SVG | Canvas | |
|---|---|---|
| 描画方式 | ベクタ | ラスタ |
| 解像度 | 解像度非依存。伸縮で画質が劣化しない。 | 解像度依存。伸縮で画質が劣化する。 |
| 描画単位 | DOM | ピクセル |
| 要素数に対するパフォーマンス | 少ない場合は高速。 数万オーダー以上になると低速。 | 要素数にはあまり依存しない。 |
| CSSの適用 | ⭕ | ❌ |
| インタラクティブ操作 | ⭕ イベントリスナーを各SVG要素に直接追加できる。 | ❌ 要素に対して直接イベントを付与することは難しい。 |
| 3D描画 | ❌ | ⭕ |
| ファイルサイズ | 複雑な描画内容でも比較的軽量。 | 描画内容に応じて、メモリ使用量が増加する可能性がある。 |
| 学習曲線 | 緩 | 急 |
どちらを利用するべき?
簡易的なグラフ描画には、SVGが適しているケースが多いと考えられます。
特に、拡大・縮小を伴うインタラクティブなUIの実装は、ベクタ方式が得手とするところです。
ただ、数万オーダーの要素や3D描画など、リッチな描画要件を実現する必要がある場合には Canvas を検討した方がよいかもしれません。
参考
ライブラリ
グラフ描画のための機能を提供するライブラリ
グラフ描画を主目的としたライブラリは多数ありますが、グラフ描画機能を直接提供するのではなく、視覚効果を提供するライブラリも存在します。
D3.js
グラフ描画関連においては、よくこのライブラリの名称が上がります。
D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.
D3 is not a charting library in the traditional sense. It has no concept of “charts”. When you visualize data with D3, you compose a variety of primitives.
引用にあるように、 グラフ描画機能 を直接提供するライブラリではなく、あくまで描画の補助ツールになります。
D3.jsを用いてグラフ描画機能を独自実装することも可能ですが、D3.jsを用いた high-level なグラフ描画ライブラリが多数存在します。
Visx
Airbnb社から提供されているライブラリです。
こちらは、D3.jsをReactで利用するということを目的としたライブラリとなります。
グラフ描画機能の直接的な提供こそありませんが、D3.jsの視覚効果をReactで直接利用したい場合や、自前でReact向けのグラフ描画機能を実装したい時に役立つかもしれません。
React向けのグラフ描画ライブラリ
React向けのライブラリ、もしくはReact用のラッパーが存在するライブラリについて、以下にまとめました。
なお、最終リリースが3年以上前のものも多数存在しますが、それらは除外しています。
| Name | Language | License | Developer | Used by [k] | Contributors | Star [k] | 備考 |
|---|---|---|---|---|---|---|---|
| Recharts | TypeScript | MIT | Recharts Group | 286 | 290 | 23.5 | 比較的シンプルなライブラリ。Reactチャートライブラリとして広く採用されている。 |
| Nivo | TypeScript | MIT | - | 1.9 | 205 | 13 | モジュール化された設計で、必要な機能を組み合わせて使用可能。SSRにも対応。 |
| Victory | TypeScript | MIT | Nearform Commerce | 24.8 | 188 | 10.9 | React Nativeに対応。公式ドキュメントの記述量が多い。 |
| Ant Design Charts | JavaScript | MIT | Ant Group | 10.9 | 66 | 1.9 | |
| Billboard.js | TypeScript | MIT | NAVER | 1.5 | 153 | 5.8 | |
| react-chartjs-2 | TypeScript | MIT | - | 375 | 72 | 6.5 | 知名度の高いChart.jsのReact向けラッパーライブラリ。 |
| Mui X Charts | TypeScript | MIT, 有償 | Material−UI | 125 | 418 | 4 | Material-UI拡張パッケージ。 |
| unovis | TypeScript | Apache-2.0 | F5 | - | 9 | 2.1 | |
| react-plotly | JavaScript | MIT | Plotly | 14.3 | 17 | 1 | plotly.js のReact向けラッパーライブラリ。 |
| AG Charts | TypeScript | MIT, 有償 | AG Grid | - | 24 | 0.14 | 機能制限版がMIT License。 |
| Charts.css | HTML, CSS | MIT | - | 0.43 | 2 | 6.2 | HTMLとCSSだけでグラフが描画できるライブラリ。なるべくJS使いたくない場合などに使えるかも。 |
この中で、メンテナンスが継続的に行われている、以下の3つの主要なReact向けのグラフ描画ライブラリについて、簡単に紹介します。
- Recharts
- Nivo
- Victory
| Recharts | Nivo | Victory | |
|---|---|---|---|
| 開発主体 | Palantir社 | 有志 | Formidable社 |
| React 18対応 | ⭕ | ⭕ | ⭕ |
| React Native対応 | ❌ | ❌ | ⭕ |
| 円グラフ | ⭕ | ⭕ | ⭕ |
| 棒グラフ | ⭕ | ⭕ | ⭕ |
| 折れ線グラフ | ⭕ | ⭕ | ⭕ |
| グラフ内スクロール | ⭕ | ⭕ | ⭕ |
| 要素hover時の表示 | ⭕ | ⭕ | ⭕ |
| x軸の伸縮 | ⭕ ただし、wrapper含め、全部再レンダリングされる。 | ⭕ SVGのtransformで制御され、DOMの再生成は基本発生しない。 | デフォルトではなさそう? zoomDimensionで表示倍率を変更することは可能。 |
| 差分比較機構 | ❌ データ変更があれば、全部再レンダリングされてしまう。 | ⭕ | ⭕ |
| 遅延描画 | ❌ | ⭕ | ⭕ |
| Canvas | ❌ | ⭕ | ❌ |
| SSR | ❌ | ⭕ | ❌ |
| Typescript | 100% | nivo/core のみjs | 一部スタイリング機能のみjs |
| アニメーション | react-smooth | react-motion | react-spring |
| SVGレンダラー | D3.js | D3.js | D3.js |
Recharts
The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
Simply deploy with React components.
Native SVG support, lightweight depending only on some D3 submodules.
Declarative components, components of charts are purely presentational.
開発コストの低減を最優先している印象を受けました。
反面、差分比較機構がなくて、再レンダリングのコストが高く付きそうです。
また、Canvasによる描画には未対応な模様。
Nivo
nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.
Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.
SSR対応が一番の特徴。一部グラフについてはCanvasもサポートしています。
開発主体が有志のみというのが懸念点。
Victory
React Nativeをプロダクトで利用しているのであれば、最有力候補になりそうです。
参考
調査結果から見えるライブラリ選定の要点
開発によりソリューションを提供する上で、ライブラリの存在は心強いです。
ただ、選定を見誤ると、実装や保守のコストが却って高く付く危険性もあります。
考えられるシチュエーションには、以下のようなケースが挙げられます。
- 保守開発が芳しくないライブラリのため、どこかのタイミングで撤廃を余儀なくされる
- 機能拡張時に必要な機能がない、あるいはカスタマイズ性に乏しいため、独自実装やライブラリ移行の必要性に迫られる
- 取り扱うデータの性質に適した機能でないため、レンダリングパフォーマンスが劣る
1を防ぐために、ライブラリがメンテナンスされているかどうかは、選定の上でよく検討される事項だと思います。
今回はそこから更に踏み込んで、2,3を防ぐために、基本的な描画手法から低級ライブラリ (ライブラリのためのライブラリ) 、実践的な高級ライブラリを調査しました。
少々回りくどく感じるかもしれませんが、こうして技術背景を遡ることは、実装の目的に沿った適切な選定のために役立つ情報源となります。
もっとアルダグラムのエンジニア組織を知りたい人は、ぜひ下記の情報もチェックしてみてください！
株式会社アルダグラムのTech Blogです。 世界中のノンデスクワーク業界における現場の生産性アップを実現する現場DXサービス「KANNA」を開発しています。 採用情報はこちら: herp.careers/v1/aldagram0508/
Discussion