Chart.js、D3.js、Sigma.js：JavaScriptで使えるグラフ可視化ライブラリ3選

JavaScriptでグラフ可視化ライブラリを使う

ここでは、JavaScriptでグラフ可視化ライブラリを使うための基礎知識と、代表的なライブラリ3つを紹介します。

データ構造

グラフ可視化ライブラリを使う前に、グラフのデータ構造を理解する必要があります。グラフは、ノードと呼ばれる点と、ノード間の接続を表すエッジで構成されます。

データ構造には、以下のような種類があります。

• 隣接リスト: 各ノードに接続されているノードのリストを保持します。
• 隣接行列: ノード間の接続状況を二次元配列で表します。

どのデータ構造を使うかは、グラフの種類やライブラリによって異なります。

jQueryは、JavaScriptの操作を簡略化するライブラリです。グラフ可視化ライブラリの多くはjQueryをサポートしているので、jQueryを併用することでコードをより簡単に書くことができます。

代表的なライブラリ

以下、JavaScriptでよく使われるグラフ可視化ライブラリ3つを紹介します。

1 Chart.js

• 特徴: シンプルで使いやすい
• 種類: 折れ線グラフ、棒グラフ、円グラフなど
• URL: [Chart.js]
• 例:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

2 D3.js

• 特徴: 柔軟性が高く、複雑なグラフも描画できる
• 種類: 様々な種類のグラフ

var svg = d3.select('svg');

// データの準備
var data = [
  {x: 10, y: 20},
  {x: 30, y: 40},
  {x: 50, y: 60}
];

// 円グラフを描画
svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d) { return d.x; })
  .attr('cy', function(d) { return d.y; })
  .attr('r', 10);

3 Sigma.js

• 特徴: ネットワークグラフに特化

// データの準備
var nodes = [
  {id: '1', label: 'Node 1'},
  {id: '2', label: 'Node 2'},
  {id: '3', label: 'Node 3'}
];
var edges = [
  {id: '1-2', source: '1', target: '2'},
  {id: '2-3', source: '2', target: '3'}
];

// グラフを描画
var sigma = new Sigma(sigmaInstance);
sigma.graph.addNode(nodes);
sigma.graph.addEdge(edges);
sigma.refresh();

まとめ

JavaScriptには、様々なグラフ可視化ライブラリがあります。それぞれの特徴を理解して、目的に合ったライブラリを選びましょう。

Chart.js

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

• type オプションでグラフの種類を指定します。ここでは line を指定しているので、折れ線グラフになります。
• data オプションでグラフのデータを渡します。ここでは、ラベルとデータの配列を渡しています。
• options オプションでグラフのオプションを指定します。ここでは、Y軸の目盛りを0から始めるように設定しています。

D3.js

var svg = d3.select('svg');

// データの準備
var data = [
  {x: 10, y: 20},
  {x: 30, y: 40},
  {x: 50, y: 60}
];

// 円グラフを描画
svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d) { return d.x; })
  .attr('cy', function(d) { return d.y; })
  .attr('r', 10);

このコードは、円グラフを描画します。

• d3.select('svg') でSVG要素を取得します。
• data 変数に円グラフのデータを設定します。
• selectAll('circle') でSVG要素内のすべての circle 要素を選択します。
• data(data) でデータと circle 要素を結びつけます。
• enter() でデータと結びついていない circle 要素を追加します。
• append('circle') で circle 要素を追加します。
• attr('cx', function(d) { return d.x; }) で circle 要素の中心x座標を設定します。
• attr('r', 10) で circle 要素の半径を設定します。

Sigma.js

// データの準備
var nodes = [
  {id: '1', label: 'Node 1'},
  {id: '2', label: 'Node 2'},
  {id: '3', label: 'Node 3'}
];
var edges = [
  {id: '1-2', source: '1', target: '2'},
  {id: '2-3', source: '2', target: '3'}
];

// グラフを描画
var sigma = new Sigma(sigmaInstance);
sigma.graph.addNode(nodes);
sigma.graph.addEdge(edges);
sigma.refresh();

• nodes 変数と edges 変数にネットワークグラフのデータを設定します。
• new Sigma(sigmaInstance) でSigmaインスタンスを作成します。
• sigma.graph.addNode(nodes) でノードを追加します。
• sigma.refresh() でグラフを更新します。

これらのサンプルコードを参考に、グラフ可視化ライブラリを使って様々なグラフを描画してみてください。

グラフ可視化ライブラリ以外の方法

Canvas API

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 円グラフを描画
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();

// 折れ線グラフを描画
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.lineTo(90, 90);
ctx.strokeStyle = 'blue';
ctx.stroke();

SVGは、XMLベースのベクター画像フォーマットです。グラフ可視化ライブラリを使わずに、高精細なグラフを描画したい場合に有効です。

<svg width="400" height="400">
  <circle cx="100" cy="100" r="50" fill="red" />
  <path d="M 10 10 L 50 50 L 90 90" stroke="blue" />
</svg>

その他のライブラリ

上記以外にも、以下のようなグラフ可視化ライブラリがあります。

これらのライブラリは、それぞれ異なる機能や特徴を持っているので、目的に合ったライブラリを選ぶことが重要です。

グラフ可視化ライブラリ以外にも、Canvas APIやSVGを使ってグラフを描画することができます。それぞれの方法の特徴を理解して、目的に合った方法を選びましょう。