D3.js を使用して PHP で美しいデータ視覚化を作成する

インターネット時代の到来により、データは私たちの生活や仕事に不可欠な部分になりました。データの視覚化は、データの処理と分析のプロセスにおいて非常に一般的な手法となっています。データの視覚化により、データをより深く理解し、データのパターンと傾向を発見し、データ分析結果を他の人に適切に表示できるようになります。この記事では、D3.js を使用して PHP で美しいデータ ビジュアライゼーションを作成する方法を紹介します。

1. D3.js とは

D3.js (データ駆動ドキュメント) は、Web 標準に基づいたデータ視覚化ライブラリであり、柔軟なデータ バインディングとエレガントな変換を通じてデータとドキュメントを結合します。インタラクティブなデータ視覚化を作成します。 D3.js を使用すると、線形グラフ、棒グラフ、散布図、円グラフなど、さまざまなタイプのデータ視覚化を作成できます。

2. 単純なヒストグラムを作成する

まず、D3.js ライブラリ ファイルを導入する必要があります。最新バージョンは、D3.js の公式 Web サイトからダウンロードできます。 HTML ファイルで、次のステートメントを使用して D3.js ライブラリをインポートします。

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

この例では、2010 年から 2019 年の特定の都市の人口を示す単純なヒストグラムを作成します。

まず、チャートを保持する div を作成する必要があります。 HTML ファイルに次のコードを追加します。

<div id="chart"></div>

次に、JavaScript ファイルで次のようにデータを定義します。

var data = [
  { year: 2010, population: 10500000 },
  { year: 2011, population: 10800000 },
  { year: 2012, population: 11200000 },
  { year: 2013, population: 11500000 },
  { year: 2014, population: 12000000 },
  { year: 2015, population: 12400000 },
  { year: 2016, population: 12800000 },
  { year: 2017, population: 13200000 },
  { year: 2018, population: 13600000 },
  { year: 2019, population: 14000000 }
];

次に、D3.js を使用して SVG を作成します。要素です。この要素はグラフを描画する場所です。次のコードを JavaScript ファイルに追加します。

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400);

次に、データ値を実際のピクセル値にマッピングするスケールを作成できます。次のコードを JavaScript ファイルに追加します。

var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.population; })])
  .range([400, 0]);

このコードでは、d3.scaleLinear() 関数を使用して線形スケールを作成します。 Domain() 関数はデータの範囲を定義するために使用され、range() 関数はマップされる実際の値の範囲を定義するために使用されます。

次に、軸を作成して SVG 要素に追加します。次のコードを JavaScript ファイルに追加します。

var yAxis = d3.axisLeft(y);
svg.append("g")
  .attr("transform", "translate(50,0)")
  .call(yAxis);

このコードでは、d3.axisLeft() 関数を使用して左座標軸を作成します。次に、append() 関数を使用して、この軸を SVG 要素に追加します。最後に、call() 関数を使用して、作成したばかりの軸を適用します。

これで、ヒストグラムを描画する準備が整いました。次のコードを JavaScript ファイルに追加します。

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return 50 + (d.year - 2010) * 45; })
  .attr("y", function(d){ return y(d.population); })
  .attr("width", 40)
  .attr("height", function(d){ return 400 - y(d.population); })
  .attr("fill", "steelblue");

このコードでは、selectAll() 関数を使用して SVG 要素内のすべての四角形を選択し、次に data() 関数を使用してデータを四角形にバインドします。 。 enter() 関数は、新しいデータがある場合に何を行うかを D3.js に指示します。この例では、10 本のバーをプロットしているため、10 個のデータ オブジェクトを使用します。次に、append() 関数を使用して長方形要素を追加します。次に、attr() 関数を使用して、四角形の位置、幅、高さ、色を設定します。最後に、2010 年から 2019 年までの特定の都市の人口を示す素敵な棒グラフがあります。

3. インタラクティブなデータ視覚化の作成

これで、単純なヒストグラムが作成されました。ただし、データの視覚化をより興味深いものにしたい場合は、いくつかのインタラクティブな機能を追加する必要があります。次に、ユーザーが棒グラフ上にマウスを移動すると変化する対話型のデータ視覚化を作成する方法を示します。

まず、前に作成した SVG 要素を変更する必要があります。次のコードを JavaScript ファイルに追加します。

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400)
  .on("mousemove", onMouseMove);

このコードでは、SVG 要素にイベントを追加します。マウスが SVG 要素上に移動すると、onMouseMove() 関数がトリガーされます。

次に、onMouseMove() 関数を記述する必要があります。次のコードを JavaScript ファイルに追加します。

function onMouseMove() {
  var mouseX = d3.mouse(this)[0];
  var year = Math.round((mouseX - 50) / 45) + 2010;
  var index = year - 2010;

  var rect = svg.selectAll("rect")._groups[0][index];
  var oldColor = d3.select(rect).attr("fill");
  d3.select(rect).attr("fill", "blue");

  setTimeout(function(){ 
      d3.select(rect).attr("fill", oldColor);
  }, 500);
}

このコードでは、d3.mouse() 関数を使用して、SVG 要素内のマウスの座標を取得します。次に、マウスの位置に基づいて年を計算し、操作対象のデータ オブジェクトを見つけます。このデータに対応する長方形要素を選択すると、長方形要素の色を青色に変更できます。 setTimeout() 関数を使用して、500 ミリ秒後に長方形要素の色を元の色に戻します。

これで、対話型のデータ視覚化が完了しました。ユーザーがヒストグラム上にマウスを移動すると、ヒストグラムは青に変わり、その後元の色に戻ります。この例を通して、D3.js のパワーと柔軟性がわかります。

4. 概要

この記事では、PHP で D3.js を使用して美しいデータ視覚化を作成する方法を紹介しました。シンプルな棒グラフを作成し、インタラクティブな機能を追加してデータ視覚化をより興味深いものにする方法を示しました。 D3.js は、さまざまなタイプのデータ視覚化を簡単に作成できる豊富な API と機能を提供します。 D3.js の使用法とテクニックについて詳しく知りたい場合は、D3.js の公式ドキュメントまたはいくつかの優れた D3.js チュートリアルを参照してください。

以上がD3.js を使用して PHP で美しいデータ視覚化を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。