【コーディング屋のネタ帳】データ可視化はこれで決まり！散布図作成に役立つJavaScriptライブラリ5選

データをわかりやすく伝える方法のひとつに「グラフ」があります。本シリーズでは、さまざまなグラフの特徴や使い方を紹介し、Webサイトで簡単に使えるJavaScriptライブラリも解説しています。

これまでに、棒グラフ・円グラフ・折れ線グラフ・レーダーチャートを取り上げてきました。今回は、散布図（スキャッタープロット）に注目します。散布図は、2つの数値データをXY座標上に配置して、データの分布や関係性を視覚的に表現するグラフで、データの傾向や相関を見つけるのによく使われます。

この記事は、次のような人に向けて書いています。

Webサイトにグラフを取り入れたい新人エンジニア
今使っているライブラリを別のものに変えようと考えている中級エンジニア
デザインにこだわったグラフを探しているWebデザイナー

「どのライブラリを使えばいいの？」という疑問を解決できるよう、それぞれの特長を比較しながら説明するので、ぜひ参考にしてください！

散布図とは？

散布図（スキャッタープロット）は、2つの数値データをXY座標上に点としてプロットし、それらの関係性を視覚的に表現するグラフです。データの傾向や相関を分析する際に利用され、統計解析やマーケティング分析など幅広い分野で活用されています。

散布図の活用例

散布図は、以下のようなシーンでよく使われます。

データの関係性を調べる
・例：広告費と売上の関係を見る
・例：気温とアイスクリームの売上の関係を調べる
データの分布を知る
・例：学生のテストの点数分布
・例：製品の価格と販売数の関係
異常値（外れ値）を発見する
・例：工場の品質管理で、不良品の発生パターンを探す
・例：顧客の購買データから特異な行動をするユーザーを見つける

散布図の種類

基本の散布図：2つの数値データをXY座標上にプロットするシンプルな形式。
バブルチャート：データ点の大きさを変えて、もう1つのデータ要素を追加。
色付き散布図：点の色を変えることで、データのグループを区別。
回帰線付き散布図：データの傾向を示す直線（回帰線）を追加。

散布図のメリット・デメリット

メリット

データの関係性が一目でわかる：点の並び方で、データ同士の関連が直感的に見える。
データの分布を把握しやすい：点の密集具合で、どこにデータが多いかがわかる。
異常値をすぐに発見できる：他の点と離れているデータがすぐに目につく。

デメリット

データが多すぎると見づらくなる：点が密集すると、個々のデータを判別しにくくなる。
因果関係は判断できない：データの相関はわかるが、どちらが原因でどちらが結果かは判断できない。
カテゴリーごとの比較には向かない：棒グラフや円グラフのように、グループごとのデータ比較はしづらい。

JavaScriptライブラリを選ぶ際のチェックポイント

グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。

導入のしやすさ
初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。
カスタマイズ性
デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。
レスポンシブ対応
スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。
パフォーマンス
表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。
サポートとドキュメント
公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。
ライセンスと利用料
利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。

ライブラリ比較表

前述のライブラリ選定ポイントをまとめた表は下記のとおり

名称	導入のしやすさ	カスタマイズ性	レスポンシブ対応	パフォーマンス	サポートとドキュメント	ライセンス
Chart.js	簡単	中程度	標準対応	軽量・高速	公式ドキュメント充実サンプル多数	MITライセンス
D3.js	難しい	非常に高い	手動対応	大規模データ対応可能	公式ドキュメントが詳細学習コストが高め	BSDライセンス
ApexCharts	簡単	高い	標準対応	高速・リアルタイム対応	公式ドキュメントが分かりやすく、サンプルも豊富	MITライセンス
Plotly.js	普通	高い	標準対応	データ量が増えるとやや負荷	公式ドキュメントが詳しく、Python版との互換性もあり	MITライセンス
ECharts	普通	非常に高い	標準対応	大規模データとリアルタイム更新に最適	公式ドキュメントが詳細だが、一部中国語ベース	Apache 2.0

各ライブラリにはそれぞれ特長があり、用途によって適したものを選ぶことが重要です。例えば、手軽に実装したいなら Chart.js や ApexCharts、大規模データの可視化なら ECharts、インタラクティブな機能を活用するなら Plotly.js、自由なカスタマイズを求めるなら D3.js といった選択が可能です。

サンプルデータを使った導入例

今回紹介した各ライブラリを使って、同じ条件のサンプルデータからレーダーチャートを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。

サンプルデータ：ユーザーの年齢とサイト滞在時間の関係

ユーザーID	年齢	サイト滞在時間(分)	備考
U001	22	3.5	初回訪問
U002	35	8.0	常連ユーザー
U003	28	5.5	–
U004	45	12.0	購入あり
U005	31	7.2	–
U006	27	4.8	–
U007	40	9.1	購入あり
U008	23	3.8	初回訪問

このサンプルデータは、ウェブサイトのユーザーの年齢とサイト滞在時間の関係性を視覚的に把握するために利用できます。

今回は、このデータを下記のような、共通のJSONデータとして扱っていきます。
（そのため、各ライブラリのコード部ではデータの記述は割愛しています）


    const jsonData = {
      "title": "ユーザーの年齢とサイト滞在時間の関係",
      "data": [
        {"userId": "U001", "age": 22, "siteDuration": 3.5, "note": "初回訪問"},
        {"userId": "U002", "age": 35, "siteDuration": 8.0, "note": "常連ユーザー"},
        {"userId": "U003", "age": 28, "siteDuration": 5.5, "note": "-"},
        {"userId": "U004", "age": 45, "siteDuration": 12.0, "note": "購入あり"},
        {"userId": "U005", "age": 31, "siteDuration": 7.2, "note": "-"},
        {"userId": "U006", "age": 27, "siteDuration": 4.8, "note": "-"},
        {"userId": "U007", "age": 40, "siteDuration": 9.1, "note": "購入あり"},
        {"userId": "U008", "age": 23, "siteDuration": 3.8, "note": "初回訪問"}
      ]
    };

Chart.js

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2.HTMLとJavaScriptコード


  <h2>Chart.js での散布図</h2>
  <!-- グラフ描画用のキャンバス -->
  <canvas id="chartjs-scatter" width="600" height="400"></canvas>

  <script>
    // 全ライブラリ共通のサンプルデータ
    /* *割愛* */

     // Chart.js 用にデータを整形（x: 年齢, y: サイト滞在時間）
    const scatterData = jsonData.data.map(item => ({ x: item.age, y: item.siteDuration }));

    // キャンバス要素の取得とコンテキストの作成
    const ctx = document.getElementById('chartjs-scatter');
    
    // Chart.js を利用して散布図を描画
    const scatterChart = new Chart(ctx, {
      type: 'scatter', // グラフタイプを散布図に設定
      data: {
        datasets: [{
          label: jsonData.title,  // グラフタイトルとして表示
          data: scatterData,        // x, y座標のデータ配列
          backgroundColor: 'rgba(75, 192, 192, 0.6)', // データ点の色
          pointRadius: 5            // 各データ点の半径
        }]
      },
      options: {
        scales: {
          x: {
            type: 'linear',      // x軸は線形スケール
            position: 'bottom',  // x軸の位置（下側）
            title: {
              display: true,
              text: '年齢'       // x軸タイトル
            }
          },
          y: {
            title: {
              display: true,
              text: 'サイト滞在時間 (分)' // y軸タイトル
            }
          }
        },
        plugins: {
          tooltip: {
            callbacks: {
              // ツールチップ内に詳細情報を表示するためのカスタムフォーマッタ
              label: context => `年齢: ${context.parsed.x}, 滞在時間: ${context.parsed.y}分`
            }
          }
        }
      }
    });
  </script>

解説・ポイント

Chart.js のメリット
- シンプルな設定: 基本的なグラフを簡単なコードで作成でき、初心者からプロフェッショナルまで幅広く利用されています。
- レスポンシブデザイン: 自動的にレスポンシブ対応となるため、さまざまなデバイスでの表示が容易です。
- アニメーションとインタラクション: 内蔵のアニメーション効果やツールチップなどのインタラクション機能により、ユーザーにとって視覚的に魅力的なグラフが作成可能です。
グラフの基本設定
- グラフタイプ: Chart.js のオプションで type: 'scatter' を指定することで散布図が描画されます。
- データセット: datasets プロパティにより、表示するデータ点の配列と、グラフタイトル、背景色、点の大きさなどのスタイルを定義します。
ツールチップのカスタマイズ
- plugins.tooltip.callbacks を利用して、データ点にマウスオーバーした際に詳細な情報（例：年齢と滞在時間）をわかりやすく表示するカスタムフォーマッタを実装しています。

D3.js

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


<script src="https://d3js.org/d3.v7.min.js"></script>

2.CSSを追加


  <style>
    /* 軸のスタイル */
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
    }
    /* データ点の初期スタイル */
    .dot {
      fill: steelblue;
      opacity: 0.8;
    }
    /* ツールチップのスタイル */
    .tooltip {
      position: absolute;
      text-align: center;
      padding: 5px;
      background: lightsteelblue;
      border: 1px solid #333;
      border-radius: 3px;
      pointer-events: none;
      font-size: 12px;
    }
  </style>

3.HTMLとJavaScriptコード


  <h2>D3.js 高度な散布図</h2>
  <svg id="d3-scatter" width="600" height="400"></svg>
  <script>
    // 全ライブラリ共通のサンプルデータ
    /* *割愛* */

    // マージンと描画領域のサイズ設定
    const margin = {top: 40, right: 30, bottom: 50, left: 60},
          width = 600 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

    // SVG要素の生成とグループ要素の追加
    const svg = d3.select("#d3-scatter")
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                  .attr("transform", `translate(${margin.left},${margin.top})`);

    // x軸・y軸のスケール設定（データの最小値・最大値に余裕をもたせる）
    const xScale = d3.scaleLinear()
                     .domain([d3.min(jsonData.data, d => d.age) - 5, d3.max(jsonData.data, d => d.age) + 5])
                     .range([0, width]);
    const yScale = d3.scaleLinear()
                     .domain([d3.min(jsonData.data, d => d.siteDuration) - 1, d3.max(jsonData.data, d => d.siteDuration) + 1])
                     .range([height, 0]);

    // 軸の生成
    const xAxis = d3.axisBottom(xScale).ticks(8);
    const yAxis = d3.axisLeft(yScale).ticks(8);

    // x軸の描画とタイトルの追加
    svg.append("g")
       .attr("class", "x axis")
       .attr("transform", `translate(0, ${height})`)
       .call(xAxis)
       .append("text")
       .attr("fill", "#000")
       .attr("x", width / 2)
       .attr("y", 40)
       .attr("text-anchor", "middle")
       .text("年齢");

    // y軸の描画とタイトルの追加
    svg.append("g")
       .attr("class", "y axis")
       .call(yAxis)
       .append("text")
       .attr("fill", "#000")
       .attr("transform", "rotate(-90)")
       .attr("x", -height / 2)
       .attr("y", -50)
       .attr("dy", "0.71em")
       .attr("text-anchor", "middle")
       .text("サイト滞在時間 (分)");

    // SVG内にタイトルテキストを追加
    svg.append("text")
       .attr("x", width / 2)
       .attr("y", -10)
       .attr("text-anchor", "middle")
       .style("font-size", "16px")
       .style("font-weight", "bold")
       .text(jsonData.title);

    // ツールチップ要素の作成（body直下に追加）
    const tooltip = d3.select("body").append("div")
                      .attr("class", "tooltip")
                      .style("opacity", 0);

    // データ点の描画（初期状態では半径0から開始し、トランジションで拡大）
    const dots = svg.selectAll(".dot")
                    .data(jsonData.data)
                    .enter()
                    .append("circle")
                    .attr("class", "dot")
                    .attr("cx", d => xScale(d.age))
                    .attr("cy", d => yScale(d.siteDuration))
                    .attr("r", 0)
                    .on("mouseover", function(event, d) {
                        // マウスオーバー時にデータ点を拡大し色を変更
                        d3.select(this)
                          .transition().duration(200)
                          .attr("r", 8)
                          .attr("fill", "orange");
                        // ツールチップの表示
                        tooltip.transition().duration(200).style("opacity", 0.9);
                        tooltip.html(`ユーザー: ${d.userId}<br>年齢: ${d.age}<br>滞在時間: ${d.siteDuration}分<br>備考: ${d.note}`)
                               .style("left", (event.pageX + 10) + "px")
                               .style("top", (event.pageY - 28) + "px");
                    })
                    .on("mouseout", function() {
                        // マウスアウト時に元の状態に戻す
                        d3.select(this)
                          .transition().duration(200)
                          .attr("r", 5)
                          .attr("fill", "steelblue");
                        tooltip.transition().duration(200).style("opacity", 0);
                    });

    // 初期ロード時にデータ点がアニメーションで現れる
    dots.transition()
        .duration(1000)
        .attr("r", 5);
  </script>

解説・ポイント

アニメーションの実装
- データ点は初期状態で半径 0 の状態から、transition() を利用して 1000ms かけて半径 5 に拡大され、グラフに「登場」するようなアニメーション効果を実現しています。
インタラクションとツールチップ
- 各データ点には mouseover および mouseout イベントを設定。マウスオーバー時に対象のデータ点が拡大し、色が変化することでユーザーに注目させる効果があります。
- さらに、マウスオーバー時にはツールチップを表示し、詳細な情報（ユーザーID、年齢、サイト滞在時間、備考）をわかりやすく提示しています。

ApexCharts

導入手順

1.CDNリンクの追加


<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

2.CSSを追加


  <style>
    /* 最大幅600pxに設定 */
    #apexcharts-scatter {
      max-width: 600px;
      margin: auto;
    }
  </style>

3.HTMLとJavaScriptコード


  <h2>ApexCharts での散布図</h2>
  <div id="apexcharts-scatter"></div>
    // 全ライブラリ共通のサンプルデータ
    /* *割愛* */

  <script>
    // ApexCharts用のデータ整形
    const seriesData = jsonData.data.map(item => ({ x: item.age, y: item.siteDuration }));

    const options = {
      chart: {
        height: 400,
        type: 'scatter'
      },
      series: [{
        name: jsonData.title,
        data: seriesData
      }],
      xaxis: {
        title: { text: '年齢' },
        tickAmount: 10
      },
      yaxis: {
        title: { text: 'サイト滞在時間 (分)' }
      },
      markers: {
        size: 5
      },
      tooltip: {
        x: {
          formatter: val => `年齢: ${val}`
        },
        y: {
          formatter: val => `滞在時間: ${val}分`
        }
      }
    };

    const chart = new ApexCharts(document.querySelector("#apexcharts-scatter"), options);
    chart.render();
  </script>

解説・ポイント

美しいデザインと直感的なAPI
- ApexChartsは、デフォルトで洗練されたデザインが適用されるため、コード量を最小限に抑えながらも視覚的に魅力的な散布図を作成できます。シンプルなオプション設定で、初心者でもすぐに利用可能です。
インタラクティブな機能
- ツールチップやホバーエフェクトが標準搭載されており、ユーザーがデータポイントにマウスオーバーした際に、詳細情報（例えば、年齢やサイト滞在時間）が即座に表示されます。これにより、データの理解が深まり、ユーザーエクスペリエンスが向上します。
滑らかなアニメーション
- グラフの初期描画時やデータ更新時に、滑らかなアニメーション効果が自動的に適用されるため、リアルタイムデータの変化にも自然に対応できる設計となっています。実際の運用では、動的なデータ更新を活かしてダッシュボードなどにも応用できます。
リアルタイムデータ更新の容易さ
- ApexChartsはAPI経由でのリアルタイムデータ更新が容易に行える設計となっており、chart.updateSeries() などのメソッドを使えば、データの変更に伴い即座にグラフの更新が反映されます。今回のコードでは直接の例は含まれていませんが、実装は非常にシンプルです。

Plotly.js

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

2.HTMLとJavaScriptコード


    <h2>Plotly.js での散布図</h2>
  <div id="plotly-scatter"></div>
  <script>
    // 全ライブラリ共通のサンプルデータ
    /* *割愛* */

    // Plotly用にx, yデータを分離
    const ages = jsonData.data.map(item => item.age);
    const durations = jsonData.data.map(item => item.siteDuration);

    const trace = {
      x: ages,
      y: durations,
      mode: 'markers',
      type: 'scatter',
      marker: { size: 10 }
    };

    const layout = {
      title: jsonData.title,
      xaxis: { title: '年齢' },
      yaxis: { title: 'サイト滞在時間 (分)' }
    };

    Plotly.newPlot('plotly-scatter', [trace], layout);
  </script>

解説・ポイント

インタラクティブ性の高さ
- Plotly.js はデフォルトでデータポイントのホバー時に詳細なツールチップを表示する機能を備えており、ユーザーが各点にマウスオーバーすることで、瞬時に情報を把握できます。また、ドラッグ操作によるズームやパン機能も標準でサポートされているため、探索的データ分析に非常に適しています。
柔軟なズーム・パン機能
- グラフ上でのズームやパン操作が直感的に行えるため、大規模なデータセットや密度の高いデータポイントの視認性向上に貢献します。ユーザーは関心のある部分に焦点を絞り、詳細な検討が可能です。

ECharts

導入手順

1.CDNリンクの追加 (HTMLの`<head>`内に記述)


    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2.CSSの設定


   <style>
  <style>
    #echarts-scatter {
          width: 100%;
          height: 400px;
    }
  </style>
  </style>

2.HTMLとJavaScriptを追加


 <h2>ECharts での散布図</h2>
  <div id="echarts-scatter" ></div>
  <script>
    // 全ライブラリ共通のサンプルデータ
    /* *割愛* */

    // 散布図用にデータを整形（x軸: 年齢, y軸: サイト滞在時間）
    const seriesData = jsonData.data.map(item => [item.age, item.siteDuration]);

    // ECharts インスタンスの初期化
    const chartDom = document.getElementById('echarts-scatter');
    const myChart = echarts.init(chartDom);

    const option = {
      title: {
        text: jsonData.title,
        left: 'center'
      },
      tooltip: {
        formatter: params => `年齢: ${params.value[0]}<br>滞在時間: ${params.value[1]}分`
      },
      toolbox: {
        feature: {
          saveAsImage: {},         // 画像として保存
          dataView: {readOnly: false},  // データ表示・編集
          restore: {}              // 初期状態へのリセット
        }
      },
      xAxis: {
        name: '年齢',
        type: 'value'
      },
      yAxis: {
        name: 'サイト滞在時間 (分)',
        type: 'value'
      },
      series: [{
        symbolSize: 10,
        data: seriesData,
        type: 'scatter'
      }]
    };

    myChart.setOption(option);
  </script>

解説・ポイント

豊富なインタラクティブ機能
- 基本的なツールチップ表示に加え、データのフィルタリング、ズーム・パン機能、さらにはデータの表示・編集（dataView）や初期状態へのリセット（restore）など、ユーザーがグラフと直接対話できる多彩なインタラクティブ機能が組み込まれています。
アニメーション付きのトランジション
- ECharts はアニメーション効果を標準装備しており、データの追加や更新時に視覚的なトランジションが適用されます。これにより、動的なデータ変化を直感的に把握できるほか、プレゼンテーション用途にも適しています。

まとめ

今回は、散布図の特徴や活用シーンを紹介し、Webサイトで簡単に描画できるおすすめのJavaScriptライブラリを比較しました。

散布図は、データの傾向や相関関係を視覚的に把握するのに役立つグラフです。今回紹介したライブラリを活用し、プロジェクトのニーズに合った最適なグラフを選んでくださいね。

【コーディング屋のネタ帳】データ可視化はこれで決まり！散布図作成に役立つJavaScriptライブラリ5選

散布図とは？

散布図の活用例

散布図の種類

散布図のメリット・デメリット

JavaScriptライブラリを選ぶ際のチェックポイント

おすすめライブラリ紹介

1 Chart.js

2 D3.js

3 ApexCharts

4 Plotly.js

5 ECharts

ライブラリ比較表

サンプルデータを使った導入例

サンプルデータ：ユーザーの年齢とサイト滞在時間の関係

Chart.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.HTMLとJavaScriptコード

解説・ポイント

D3.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.CSSを追加

3.HTMLとJavaScriptコード

解説・ポイント

ApexCharts

導入手順

1.CDNリンクの追加

2.CSSを追加

3.HTMLとJavaScriptコード

解説・ポイント

Plotly.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.HTMLとJavaScriptコード

解説・ポイント

ECharts

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

2.CSSの設定

2.HTMLとJavaScriptを追加

解説・ポイント

まとめ

この記事を見た人がよく見ている記事

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

1.CDNリンクの追加 (HTMLの`<head>`内に記述)

1.CDNリンクの追加 (HTMLの`<head>`内に記述)