WordpressでD3.jsを使用して棒グラフや円グラフをブログで表示させる方法を解説します。

WordPressでD3.jsを使ってデータ可視化！導入から活用まで解説

D3.jsとは？その魅力と用途

D3.js（Data-Driven Documents）は、JavaScriptでインタラクティブなデータ可視化を作成するための強力なライブラリです。SVG、Canvas、HTMLを組み合わせて、動的なグラフや地図など多彩なビジュアライゼーションを実現できます。

D3.jsの基本概要

D3.jsは、データに基づいてDOMを操作するための低レベルなAPIを提供します。棒グラフ、折れ線グラフ、円グラフ、ヒートマップなど、自由度の高い可視化が可能です。

D3.jsでできること

• 動的なグラフの描画

• アニメーション付きデータ表示

• マウスオーバーで表示されるツールチップ

• フィルターやズーム機能の実装

wordpressにD3.jsを組み込む方法

過去にはWP-D3というプラグイン(wordpress用のD3.js組み込みライブラリ)があったようですが、現在は廃止されているようです(探してみたが無かった。)

今回はWordpressのプラグインを使用せずにCDNから読み込む方法で実装したいと思います。

実装環境

• Wordpress　ver 6.8.1
• Wordpressテーマ SANGO ver 3.9.11
• D3.js ver 7

実装手順

1. まず初めにWordpressのビジュアルエディタを開きます。

2. ブロックからカスタムHTMLを選択してください

1. ここに以下のサンプルコードを張り付けてください

<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="chart"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const data = [5, 10, 15, 20];

    const svg = d3.select("#chart")
        .append("svg")
        .attr("width", 200)
        .attr("height", 100);

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", (d, i) => (i * 50) + 25)
        .attr("cy", 50)
        .attr("r", d => d)
        .attr("fill", "orange");
});
</script>

1. 保存プレビューすると以下の表示がされると思います

1. お疲れさまでした。これでWordpress上でD3.jsのコードを動作させることに成功しました

以下は補足です。

棒グラフのサンプルコードです。

<!-- HTMLブロックに以下を挿入 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="chart"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const data = [5, 10, 15, 20];

    const width = 200;
    const height = 100;
    const barWidth = 30;
    const barPadding = 10;

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

    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", (d, i) => i * (barWidth + barPadding))
        .attr("y", d => height - d * 4) // 倍率で高さを調整
        .attr("width", barWidth)
        .attr("height", d => d * 4)
        .attr("fill", "steelblue");
});
</script>

const data = [5, 10, 15, 20];

上の部分のJavaScript配列をいじるとグラフのデータを操作できます。事前に準備したデータに書き換えて利用してください

日本地図のジオマップのサンプルコード

<!-- ▼ D3.jsとTopoJSONのCDN読み込み -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>

<!-- ▼ 地図描画用のDIV -->
<div id="japan-map" style="width: 100%; max-width: 600px; margin: auto;"></div>

<!-- ▼ インタラクティブ日本地図スクリプト -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const width = 600;
  const height = 800;

  const svg = d3.select("#japan-map")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  const projection = d3.geoMercator()
    .center([137, 38]) // 日本中心
    .scale(1500)
    .translate([width / 2, height / 2]);

  const path = d3.geoPath().projection(projection);

  d3.json("https://raw.githubusercontent.com/dataofjapan/land/master/japan.topojson").then(function(data) {
    const features = topojson.feature(data, data.objects.japan).features;

    svg.selectAll("path")
      .data(features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("fill", "#b0c4de")
      .attr("stroke", "#333")
      .on("mouseover", function() {
        d3.select(this).attr("fill", "#4682b4");
      })
      .on("mouseout", function() {
        d3.select(this).attr("fill", "#b0c4de");
      })
      .append("title")
      .text(d => d.properties.name);
  });
});
</script>