Architecture Decision Record
← 決定記録の例

アーキテクチャ決定記録: TypeScript と JSON を使用したデータ可視化のためのチャートライブラリツールキット

主な目的:
TypeScript と JSON を使用して、金融データ、科学データ、政府データに焦点を当てたインタラクティブな可視化を作成するための、高度なチャートツールキットを選択すること。ライブラリは、堅牢な機能と柔軟性を提供し、オープンソースである必要があります。

コンテキストと要件:

  1. アジャイル開発(高優先度): スタートアップとして、迅速な反復、プロトタイピング、開発の柔軟性が不可欠です。チャートライブラリは、高速な開発サイクルを可能にするものでなければなりません。

  2. チャートの種類(高優先度):

    • ドーナツチャート(Doughnut Chart)
    • レーダーチャート(Radar Chart)
    • クラスタリングプロセスチャート(Clustering Process Chart)
    • 時間軸付きエリアチャート(Area Chart with Time Axis)
    • ローソク足チャート(Candlestick Chart)
    • ナイチンゲールチャート(Nightingale Chart)
    • 地理 SVG マップ(Geo SVG Map)

    これらのチャートの種類は、金融トレンド、科学的指標、地理情報などの複雑なデータセットを可視化するために特に重要です。

  3. 無料でオープンソース(高優先度): ツールキットは、ライセンスコストを避け、透明性を提供し、カスタマイズの柔軟性を提供するために、オープンソースである必要があります。

  4. 低優先度の基準:

    • 実行速度: パフォーマンスは重要ですが、この決定においては最優先ではありません。
    • スケーラビリティ: スケーラビリティは一般的に重要ですが、当面の必要性は、時間とともに成長しうる MVP を構築することです。スケーラビリティの懸念は後で対処できます。
    • 後方互換性: ライブラリがモダンで活発にメンテナンスされている限り、最初のビルドでは主要な懸念事項ではありません。

評価したライブラリ:

  1. Apache ECharts
  2. Chart.js
  3. ApexCharts
  4. AG Charts
  5. Highcharts
  6. Carbon Charts
  7. Layer Cake
  8. D3.js

1. Apache ECharts

概要:
Apache ECharts は、インタラクティブでカスタマイズ可能な可視化のための、強力で柔軟なチャートライブラリです。幅広い種類のチャートをサポートしており、特に複雑で動的な可視化に強みがあります。

強み:

  • 高度なインタラクティビティ: ECharts は、ズーム、パン、動的なデータ更新などの機能を備えたインタラクティブなチャートの提供に優れています。
  • ドーナツ、レーダー、ローソク足、地理 SVG マップ: ECharts は、ドーナツ、レーダー、ローソク足、地理マップの可視化を含む、必要なチャートの種類の多くをサポートしています。
  • 無料でオープンソース: ECharts はオープンソースのライブラリであり、予算を意識するスタートアップの性質に合致し、コードを変更する自由を提供します。
  • 柔軟性と拡張性: 高度にカスタマイズ可能で、アニメーション、カスタムの可視化、高度なチャート技術を幅広くサポートしています。

弱み:

  • 学習曲線: ECharts は強力ですが、その柔軟性と広範な API のために学習曲線が急になる場合があります。
  • 文書の複雑さ: 文書は包括的ですが、使い始めたばかりの開発者には圧倒的に感じられる場合があります。

評価:
ECharts は、ローソク足チャート、レーダーチャート、地理マップなど、必要なすべての種類を含むインタラクティブなチャートのサポートにより、このプロジェクトに非常に適しています。そのオープンソースの性質は、プロジェクトの柔軟性とコスト効率のニーズに合致しています。

2. Chart.js

概要:
Chart.js は、一般的な種類のチャートを構築するための、シンプルで使いやすいチャートライブラリです。そのシンプルさと統合の容易さで知られています。

強み:

  • 使いやすさ: Chart.js はセットアップと使用が非常に簡単で、学習曲線が最小限です。
  • オープンソース: Chart.js は無料でオープンソースであり、コスト削減に重要です。
  • 一般的なチャートの種類: ドーナツ、エリア、レーダー、折れ線チャートなどの基本的なチャートをサポートしており、主要なニーズのほとんどをカバーします。

弱み:

  • 高度なチャートの制限: Chart.js は、ローソク足チャート、地理 SVG マップ、クラスタリングプロセスチャートなどの複雑なチャートの種類をネイティブにはサポートしていません。これらの機能はプラグインやカスタマイズで追加できますが、他のライブラリほど簡単ではありません。
  • インタラクティビティ: Chart.js は基本的なインタラクティビティ(例: ツールチップやホバー効果)をサポートしていますが、ECharts や D3.js ほど高度な機能は提供していません。

評価:
Chart.js はシンプルで素早いプロジェクトには最適ですが、複雑なチャートの種類のサポートが不足しているため、ローソク足チャートや地理マップなどの高度なニーズを持つデータ重視のアプリケーションには適していません。プロトタイピングには良い選択ですが、必要なチャートの種類には、より高度なツールが推奨されます。

3. ApexCharts

概要:
ApexCharts は、さまざまな種類のチャートを提供し、使いやすい API でインタラクティブな可視化に焦点を当てた、モダンなチャートライブラリです。

強み:

  • インタラクティブな機能: ApexCharts は、ツールチップ、ズーム、パン、更新を備えたインタラクティブなチャートを提供します。
  • 金融および科学チャートのサポート: ローソク足チャート、レーダーチャート、エリアチャートを含む、幅広い種類のチャートをサポートしています。
  • 使いやすさ: 直感的な API を持ち、プロジェクトへの統合が簡単です。
  • 無料でオープンソース: ApexCharts は、多くのユースケースに適した無料のオープンソース版を提供しています。

弱み:

  • 複雑なカスタマイズ: 多くの機能を提供していますが、非常に複雑またはカスタムのチャートニーズに対するカスタマイズオプションは、ECharts や D3.js ほど柔軟ではありません。
  • 地理マップ: ApexCharts は、このプロジェクトで必要とされる地理マップやクラスタリングプロセスチャートをネイティブにはサポートしていません。

評価:
ApexCharts は、使いやすさとインタラクティビティの点で有力な候補ですが、特に地理マップとクラスタリングチャートの必要性など、特定の高度なチャートの種類では不十分です。よりシンプルなチャートには良い選択肢ですが、必要な機能の一部が欠けています。

4. AG Charts

概要:
AG Charts は、パフォーマンスと精度のために設計された、商用グレードのチャートライブラリです。金融、科学、ビジネスのダッシュボードの作成に非常に適しています。

強み:

  • 高度なチャートの種類: AG Charts は、ローソク足チャート、エリアチャート、レーダーチャートなど、多くの高度なチャートの種類をサポートしています。また、他の AG-Grid 製品との深い統合も提供します。
  • 高いパフォーマンス: 特に大規模なデータセットを扱う際に、優れたパフォーマンスを提供します。
  • インタラクティビティ: AG Charts は、ズーム、ツールチップ、動的な更新など、さまざまなインタラクティブな機能をサポートしています。

弱み:

  • 完全には無料ではない: AG Charts は無料版を提供していますが、フル機能版は有料であり、コストを最小限に抑えたいスタートアップにとって障壁になる可能性があります。
  • 複雑さ: このライブラリは機能が豊富ですが、よりシンプルなプロジェクトには過剰になる可能性があり、他の選択肢と比べてより多くのセットアップと設定が必要になる場合があります。

評価:
AG Charts は強力で機能が豊富ですが、その商用の性質とコスト構造のため、最適ではないかもしれません。その適合性は、予算が有料版を賄えるか、オープンソースの代替案が好まれるかによります。

5. Highcharts

概要:
Highcharts は、幅広いチャートの種類と強力なカスタマイズオプションで知られる人気のチャートライブラリです。

強み:

  • 包括的なチャートの種類: Highcharts は、ローソク足、レーダー、エリア、地理マップを含む幅広いチャートをサポートしています。
  • インタラクティブで動的: Highcharts は、ドリルダウン、ズーム、パンを含む豊富なインタラクティブ機能を提供します。
  • 使いやすさ: ユーザーフレンドリーな API と優れた文書があり、始めやすいです。

弱み:

  • 商用ライセンス: Highcharts は非商用利用向けに無料版を提供していますが、商用ライセンスは高価であり、スタートアップにとって大きな欠点になり得ます。
  • 学習曲線: ECharts ほど急ではありませんが、Highcharts の学習曲線は初心者にとってはまだ難しい場合があります。

評価:
Highcharts は機能が豊富なライブラリですが、その商用ライセンスにより、オープンソースでコストに敏感なプロジェクトにはあまり適していません。包括的なチャートオプションは利点ですが、ライセンスの問題がこのユースケースでの魅力を限定します。

6. Carbon Charts

概要:
Carbon Charts は、IBM が開発したチャートライブラリで、視覚的に魅力的で高度にカスタマイズ可能なチャートを作成するために設計されています。

強み:

  • カスタマイズ性: Carbon Charts は、チャートの外観と動作を広範囲にカスタマイズできます。
  • オープンソース: 無料でオープンソースであり、予算に優しいソリューションというプロジェクトの要件に合致しています。
  • 一般的なチャートのサポート: ドーナツ、レーダー、エリアチャートなどの一般的なチャートの種類をサポートしていますが、地理マップやローソク足チャートなどのより高度な種類のサポートはありません。

弱み:

  • 高度なチャートの種類の制限: プロジェクトに不可欠な、地理マップ、クラスタリングプロセスチャート、ローソク足チャートをサポートしていません。
  • より小さなエコシステム: Carbon Charts は、ECharts や Highcharts などの大規模なチャートライブラリと比べて、コミュニティとエコシステムが小さいです。

評価:
Carbon Charts はオープンソースでカスタマイズ可能ですが、このプロジェクトに必要なより複雑なチャートの種類のサポートが欠けています。よりシンプルなチャートのニーズにより適しています。

7. Layer Cake

概要:
Layer Cake は、柔軟でレイヤー化された可視化を作成するために設計された、データ可視化ライブラリです。

強み:

  • カスタマイズ可能なレイヤー: 複雑な可視化のための強力なレイヤーオプションを提供します。
  • オープンソース: 無料でオープンソースであり、予算を意識するプロジェクトにとって実行可能な選択肢です。

弱み:

  • 限られた文書: Layer Cake には広範な文書とコミュニティサポートがなく、より確立されたライブラリと比べて扱うのが難しくなります。
  • チャート向けではない: Layer Cake は非チャートの可視化により適しているため、すぐに使えるチャートオプションは限られています。

評価:
独自の可視化には興味深いですが、Layer Cake は、ローソク足チャートやレーダーチャートなどの従来のチャート要件には理想的ではありません。標準的なチャートの範囲外のカスタム可視化により適しています。

8. D3.js

概要:
D3.js は、HTML、SVG、CSS を通じてデータ駆動型の可視化を作成するための、強力な JavaScript ライブラリです。

強み:

  • 比類のない柔軟性: D3.js では、事実上あらゆる種類のカスタム可視化を作成できるため、高度でインタラクティブなチャートに非常に強力です。
  • 広範な機能: 地理マップ、クラスタリングチャートなど、必要なすべてのチャートの種類をサポートしています。
  • カスタマイズ可能: D3.js のカスタマイズのレベルは比類がなく、開発者が高度に調整された可視化を構築できます。

弱み:

  • 急な学習曲線: D3.js は学習曲線が急で、他のライブラリと比べて統合がより複雑です。
  • 時間がかかる: D3.js でチャートを構築するには、特にローソク足やドーナツチャートなどの一般的なチャートでは、時間がかかる場合があります。

評価:
D3.js は、高度でカスタマイズされたチャートには信じられないほど強力ですが、学習曲線が急で開発時間がかかるため、多くの典型的なユースケースには過剰です。他のチャートライブラリが必要なレベルのカスタマイズを提供しない状況に最適です。

結論

プロジェクトのニーズに基づいてライブラリを評価した結果、Apache ECharts が最良の選択肢として際立っています。地理マップ、ローソク足チャート、クラスタリングチャートを含む、必要なチャートの全範囲をサポートしています。オープンソースで、機能が豊富で、非常にインタラクティブであり、プロジェクトの目標に完全に合致しています。D3.js は最大の柔軟性を提供しますが、その複雑さと時間の投資により、素早く反復したいスタートアップにはあまり理想的ではありません。ApexCharts と Chart.js は、よりシンプルなプロジェクトには良い代替案ですが、高度なチャートの種類のサポートが欠けています。