CONTENT
大阪エンジニアのSです。
今回は開発案件で使用した、JavaScriptでグラフを描画するために使用したD3.jsを紹介します。
■D3.jsとは
D3.jsはデータを視覚化するときに便利なJavaScriptのライブラリです。
D3とはData-Driven Documentsのことだそうです。データに基づいて主に「SVG Document Object」を操作しデータの可視化をします。SVG操作、数値計算など、自由度の高い機能があります。
■D3.jsを使用する利点
例えばJavaであれば、「JFreeChart」などを使用してグラフの描画は可能です。しかし、サーバー側でグラフを作成するのでは、毎回サーバー通信が必要になります。
その点、D3.jsを使用すれば、データの絞り込みや別の側面からの検証など、リアルタイムなデータのフォーカス、ピックアップといった操作が可能になります。
■D3.jsで可能なこと
縦棒グラフ、横棒グラフ、積み上げ棒グラフ、円グラフ、パイチャート、ヒストグラム、バブルチャート、ツリーマップといった、様々な特徴のグラフを描画することが可能です。
私が携わった開発案件でも、縦棒グラフ、積み上げ棒グラフ、折れ線グラフを組み合わせたグラフの描画を実装しています。X軸やY軸の設定、グラフの形や色などを描画できる自由度が高い印象があります。
CSVデータやJsonデータを読み込んでグラフを描画することが可能です。
私が携わった開発案件ではJava側で一覧データをJsonデータで作成し、それを渡してグラフを描画する実装をしていました。
■D3.jsを使用した所感
データを与えればグラフが表示されるというような単純なものではないので、私自身、敷居が高いと感じていました。
実際に多くの機能があり自由度が高いため、理解して実装するのには苦労しましたが、座標変換などの機能も充実しており、表現に必要なパーツを組み合わせるだけで、簡単に可視化ができるので、良くできたライブラリだという印象です。