動的健康ダッシュボード：ReactとD3.jsでアクセス可能な可視化を構築する

基本チャートを超えた可視化。睡眠ステージダイアグラムや栄養ヒートマップなどの、複雑でインタラクティブかつWCAG準拠の健康データ可視化を、ReactフックとD3.jsの力で構築する方法を解説。

2025年12月12日読了時間 9分

このページの内容

課題： ヘルスデータは密度が高く多次元ものであることが多いため、生の睡眠時間表や栄養値は圧倒的なものになることがあります。視覚化により、このデータを実行可能なインサイトに変換できます。ただし、視覚的に魅力的であるだけでなく、障害を持つユーザーにも動的でアクセスしやすいグラフを作成することは、重大な技術的課題です。多くのグラフライブラリは、カスタマイズとアクセシビリティの間でトレードオフを強いられます。

解決策： SVG要素に対する比類のない制御能力を持つD3.jsと、Reactの効率的な状態管理およびコンポーネントアーキテクチャを組み合わせることで、アクセシビリティを犠牲にしないカスタム視覚化を 구축できます。D3に複雑な計算と描画を任せ、ReactにDOM構造とユーザーインタラクションの管理を任せます。

前提条件：

React（フックを含む）の確かな理解
D3.jsの概念（ selections、scales、shapes）の基本熟悉
Node.jsとnpm（またはyarn）のインストール済み
SVGとHTMLの実用的な知識

問題の理解：D3とReactの競合する設計思想

ReactでD3を使用することの根本的な課題は、根本的な対立から生じます：

D3.js は命令型です。DOMを直接操作します。要素を選択して、その変更コマンドを発行します。
React は宣言型です。UIの目的の状態を記述し、Reactが最も効率的な方法でDOMを更新する方法を判断します。

両方のライブラリが同じDOM要素を制御しようとすると、混乱が発生します。解決策は明確な境界を作成することです。私たちのアプローチでは、ReactはメインSVGコンテナをレンダリングし、D3はそのコンテナ内部の要素の制御を与えられます。ReactのuseRefを使用してこのコンテナへの安定した参照を作成し、useEffectを使用してデータまたはコンポーネントpropsが変更されるたびにD3コードを実行します。

前提条件：Reactプロジェクトの設定

まず、新しいReactアプリケーションをブートストラップし、D3.jsをインストールします。

bash

npx create-react-app health-viz-d3-react
cd health-viz-d3-react
npm install d3

このチュートリアルでは、srcディレクトリ内で主に作業します。

ステップ1：アクセシブルな睡眠ステージ図の構築

最初の視覚化は、睡眠段階図（ハイドログラムとも呼ばれます）です。夜間の睡眠段階（覚醒、REM、ライト、-deep）の進行を示します。これは、各バーが複数の有色セグメントで構成されているため単純な棒グラフよりも複雑です。

何をするか

睡眠データの配列を受け取るSleepChartコンポーネントを作成します。D3を使用して各睡眠段階セグメントの位置と色を計算し、Reactを使用してSVG <rect>要素としてレンダリングします。D3が計算しReactがレンダリングするこのアプローチは、アクセシビリティと状態更新の管理が容易であることが多いです。

実装

まずサンプルデータを定義します。src/data/sleepData.jsファイルを作成します：

javascript

// src/data/sleepData.js
export const sleepData = [
  { time: '22:00', stage: 'Awake', duration: 15 },
  { time: '22:15', stage: 'Light', duration: 30 },
  { time: '22:45', stage: 'Deep', duration: 60 },
  { time: '23:45', stage: 'Light', duration: 45 },
  { time: '00:30', stage: 'REM', duration: 30 },
  { time: '01:00', stage: 'Light', duration: 60 },
  { time: '02:00', stage: 'Deep', duration: 75 },
  { time: '03:15', stage: 'Light', duration: 45 },
  { time: '04:00', stage: 'REM', duration: 45 },
  { time: '04:45', stage: 'Light', duration: 30 },
  { time: '05:15', stage: 'Awake', duration: 10 },
];

export const sleepStageColors = {
  'Awake': '#f0a500',
  'REM': '#f44336',
  'Light': '#3f51b5',
  'Deep': '#1a237e',
};

次に、src/components/SleepChart.jsにSleepChartコンポーネントを作成します：

javascript

// src/components/SleepChart.js
import React, { useMemo } from 'react';
import * as d3 from 'd3';
import { sleepStageColors } from '../data/sleepData';

const SleepChart = ({ data, width = 600, height = 150 }) => {
  const margin = { top: 20, right: 20, bottom: 30, left: 40 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const { segments, xScale } = useMemo(() => {
    if (!data || data.length === 0) return { segments: [], xScale: null };

    let cumulativeDuration = 0;
    const processedSegments = data.map(d => {
      const start = cumulativeDuration;
      cumulativeDuration += d.duration;
      return { ...d, start, end: cumulativeDuration };
    });

    const totalDuration = cumulativeDuration;

    const xScale = d3.scaleLinear()
      .domain([0, totalDuration])
      .range([0, innerWidth]);

    return { segments: processedSegments, xScale };
  }, [data, innerWidth]);

  return (
    <svg
      width={width}
      height={height}
      role="figure"
      aria-labelledby="sleep-chart-title"
      aria-describedby="sleep-chart-desc"
    >
      <title id="sleep-chart-title">Sleep Stage Diagram</title>
      <desc id="sleep-chart-desc">
        A visualization of sleep stages throughout the night, showing periods of Awake, REM, Light, and Deep sleep.
      </desc>
      <g transform={`translate(${margin.left}, ${margin.top})`}>
        {segments.map((segment, i) => (
          <g key={i} role="listitem">
            <rect
              x={xScale(segment.start)}
              y={0}
              width={xScale(segment.end) - xScale(segment.start)}
              height={innerHeight}
              fill={sleepStageColors[segment.stage]}
              role="presentation"
            />
            <title>
              {`Stage: ${segment.stage}, Duration: ${segment.duration} minutes, Time: ${segment.time}`}
            </title>
          </g>
        ))}
        {/* You can add axes here if needed */}
      </g>
    </svg>
  );
};

export default SleepChart;

最後に、App.jsでこのコンポーネントを使用します：

javascript

// src/App.js
import React from 'react';
import SleepChart from './components/SleepChart';
import { sleepData } from './data/sleepData';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Health Data Visualizations</h1>
      </header>
      <main>
        <h2>Sleep Analysis</h2>
        <SleepChart data={sleepData} />
      </main>
    </div>
  );
}

export default App;

動作の仕組み

データ処理： useMemoを使用して生の睡眠データを処理します。このフックは各睡眠セグメントの開始位置と終了位置（累積分数で）を計算し、D3線形スケール（xScale）を作成してこれらの分数を画面上のピクセル値にマッピングします。useMemoは、データまたは幅が変更されたときにのみこの計算が実行されることを保証します。
Reactレンダリング： D3の.data().enter().append()パターンではなく、Reactのおなじみの.map()メソッドを使用して、処理されたsegmentsを反復処理します。各セグメントについて、SVG <rect>要素をレンダリングします。
アクセシビリティ優先：
- <svg>要素にはrole="figure"があり、aria-labelledbyとaria-describedbyで<title>と<desc>にリンクされています。これにより、画面リーダーにグラフの高レベルの概要が提供されます。
- 各セグメントはrole="listitem"を持つ<g>でラップされ、コレクションの一部であることを示します。
- 決定的に、各セグメントの内側に<title>要素があります。これはホバー時のネイティブツールチップかつ画面リーダーのラベルとして機能します。

ステップ2：インタラクティブでアクセシブルな栄養ヒートマップ

次に、1週間の1日あたりのマクロ栄養素摂取量などの栄養データを視覚化するヒートマップを構築します。これはインタラクティブ性とより複雑なアクセシビリティの考慮事項を導入します。

何をするか

栄養データ 그리드として表示するNutritionHeatmapコンポーネントを作成します。各セルの色は値を示します。ホバー時のツールチップを追加し、各セルをフォーカス可能かつキーボード操作可能にして、選択したセルの詳細を表示するようにUIを更新します。

実装

まず、src/data/nutritionData.jsのデータを取得します：

javascript

// src/data/nutritionData.js
export const nutritionData = [
  { day: 'Mon', nutrient: 'Protein (g)', value: 120 },
  { day: 'Mon', nutrient: 'Carbs (g)', value: 150 },
  { day: 'Mon', nutrient: 'Fat (g)', value: 60 },
  { day: 'Tue', nutrient: 'Protein (g)', value: 110 },
  { day: 'Tue', nutrient: 'Carbs (g)', value: 200 },
  { day: 'Tue', nutrient: 'Fat (g)', value: 55 },
  // ... add data for other days
  { day: 'Sun', nutrient: 'Protein (g)', value: 130 },
  { day: 'Sun', nutrient: 'Carbs (g)', value: 220 },
  { day: 'Sun', nutrient: 'Fat (g)', value: 70 },
];

次に、src/components/NutritionHeatmap.jsのNutritionHeatmapコンポーネントを作成します：

javascript

// src/components/NutritionHeatmap.js
import React, { useMemo, useState } from 'react';
import * as d3 from 'd3';

const NutritionHeatmap = ({ data, width = 700, height = 250 }) => {
  const margin = { top: 50, right: 50, bottom: 50, left: 100 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const [activeCell, setActiveCell] = useState(null);

  const { xScale, yScale, colorScale, allX, allY } = useMemo(() => {
    const allX = [...new Set(data.map(d => d.day))];
    const allY = [...new Set(data.map(d => d.nutrient))];

    const xScale = d3.scaleBand()
      .domain(allX)
      .range([0, innerWidth])
      .padding(0.05);

    const yScale = d3.scaleBand()
      .domain(allY)
      .range([0, innerHeight])
      .padding(0.05);

    const colorScale = d3.scaleSequential()
      .interpolator(d3.interpolateYlGnBu)
      .domain([0, d3.max(data, d => d.value)]);

    return { xScale, yScale, colorScale, allX, allY };
  }, [data, innerWidth, innerHeight]);

  const handleKeyDown = (e, cell) => {
    if (e.key === 'Enter' || e.key === ' ') {
      setActiveCell(cell);
    }
  };

  return (
    <div>
      <svg width={width} height={height} role="application">
        <g transform={`translate(${margin.left}, ${margin.top})`}>
          {data.map((d, i) => (
            <rect
              key={i}
              x={xScale(d.day)}
              y={yScale(d.nutrient)}
              width={xScale.bandwidth()}
              height={yScale.bandwidth()}
              fill={colorScale(d.value)}
              onMouseEnter={() => setActiveCell(d)}
              onMouseLeave={() => setActiveCell(null)}
              onFocus={() => setActiveCell(d)}
              onBlur={() => setActiveCell(null)}
              onKeyDown={(e) => handleKeyDown(e, d)}
              tabIndex={0}
              aria-label={`${d.day}, ${d.nutrient}: ${d.value}`}
            />
          ))}
          {/* Add Axes */}
          {/* X Axis */}
          <g>
            {allX.map(day => (
              <text key={day} x={xScale(day) + xScale.bandwidth() / 2} y={-5} textAnchor="middle">
                {day}
              </text>
            ))}
          </g>
          {/* Y Axis */}
          <g>
            {allY.map(nutrient => (
              <text key={nutrient} x={-5} y={yScale(nutrient) + yScale.bandwidth() / 2} textAnchor="end" dominantBaseline="middle">
                {nutrient}
              </text>
            ))}
          </g>
        </g>
      </svg>
      <div role="status" aria-live="polite" className="tooltip-aria">
        {activeCell ? `${activeCell.day}, ${activeCell.nutrient}: ${activeCell.value}` : 'Hover or focus on a cell for details.'}
      </div>
    </div>
  );
};

export default NutritionHeatmap;

新しいコンポーネントを含めるようにApp.jsを更新します：

javascript

// src/App.js
import React from 'react';
import SleepChart from './components/SleepChart';
import NutritionHeatmap from './components/NutritionHeatmap';
import { sleepData } from './data/sleepData';
import { nutritionData } from './data/nutritionData';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Health Data Visualizations</h1>
      </header>
      <main>
        <h2>Sleep Analysis</h2>
        <SleepChart data={sleepData} />
        <hr />
        <h2>Weekly Nutrition</h2>
        <NutritionHeatmap data={nutritionData} />
      </main>
    </div>
  );
}

export default App;

src/App.cssにシンプルなスタイルを追加します：

css

/* src/App.css */
.tooltip-aria {
  margin-top: 10px;
  font-weight: bold;
}
rect:hover, rect:focus {
  stroke: black;
  stroke-width: 2px;
  outline: none;
}

動作の仕組み

インタラクティブ性のためのReact状態： activeCellを追跡するためにuseStateを使用します。この状態はonMouseEnterとonFocusイベントで更新されます。
グリッドのスケール： D3のscaleBandはグリッドのX軸とY軸を作成し、日と栄養素を均等に配置するのに最適です。scaleSequentialは値用の滑らかなカラーグラデーションを作成します。
キーボードアクセシビリティ：
- 各<rect>にはtabIndex={0}があり、キーボードでフォーカス可能になります。
- onKeyDownハンドラーは「Enter」または「Space」をリッスンしてセルを選択し、クリックアクションを模倣します。
- aria-labelはフォーカス時に画面リーダーがアナウンスする各セルの説明ラベルを提供します。
画面リーダー用のライブ領域： role="status"とaria-live="polite"を持つdivは重要です。これは「ライブ領域」として機能します。その内容が変更されるたびに（つまりactiveCellが更新されたとき）、画面リーダーはユーザーがグラフからフォーカスを移す必要なしに新しいテキストをアナウンスします。これにより、すべてのユーザーに詳細情報が確実に伝わります。

結論

ReactとD3の役割を慎重に分担することで、，高度インタラクティブで完全にアクセシブルなカスタムデータ視覚化を 구축できます。Reactは状態の管理とコンポーネント構造のレンダリングに優れていますが、D3は複雑なグラフ所需的数学的および幾何学的ツールを提供します。关键是D3に計算を行わせ、Reactにレンダリングを処理させ、WCAG基準を満たすために必要なARIA属性で最終出力を強化することです。

読者向け次のステップ：

軸の追加： D3駆動の軸を追加してグラフを強化します。
ブラッシングとズームの実装： D3のbrushおよびzoom機能を探索して、ユーザーがデータの部分を選択または拡大できるようにします。
リアルタイムデータの取得： ダイナミックなヘルスデータを視覚化するために、コンポーネントをライブAPIに接続します。

リソース

クイックリファレンス

側面	主要情報
トピック	開発
関連性	患者教育と意識向上
アクション	医療提供者にご相談ください
頻度	ケアチームのおすすめに従ってください
エビデンス	現在の臨床ガイドラインに基づく

よくある質問

Q: これが自分に該当怎么看才知道？ A: 個人的な病歴と家族歴について医療提供者と相談し、個人のリスク因子を評価し、適切な次のステップを決定してください。

Q: 医師に何と聞けばよいですか？ A: 良い質問には次のようなものがあります：「結果はどういう意味ですか？」「オプションは何がありますか？」「どんな生活習慣の変更が役に立ちますか？」「いつフォローアップする必要がありますか？」

Q: 症状改善に生活习惯改变はありますか？ A: ほとんどの健康状態は、基本的な対策として効果的です：バランスの取れた栄養、規則的な運動（週150分以上）、質のよい睡眠（7〜9時間）、ストレス管理、烟草の回避。

医療免責事項

本文書は教育目的のみを目的としており、医学的アドバイスを提供ものではありません。健康、治療、またはケアに関する決定する前に、常に資格のある医療提供者に相談してください。個人の状況は異なり、ある人適切なことが別の人に適切でない場合があります。

救急医療の状況が発生した場合は、すぐに911（またはお住まいの地域の緊急電話番号）に電話してください。

すべての記事に戻る