Reactで始める情報可視化

今回は、React, D3.jsの環境の導入を行います。

公式ページの始め方です。英語で書いてあるので難しいかもしれないです。
https://d3js.org/getting-started

ViteでReactの環境を導入する。

公式ドキュメント
https://ja.vitejs.dev/

以下のコマンドで、Reactのテンプレートを作ることができます。
Viteは高速なビルドツールです。（早くReactを動かすことができる）

npm create vite@latest my-d3-app -- --template react

my-d3-appディレクトリに移動してください。

cd my-d3-app

最初に必要なパッケージをインストールしてください。

npm install

このコマンドを実行すると特に意味のないページが表示されます。
これが動けば正常に動いている常態です。

 npm run dev

d3.jsを使えるようにする。

npm install d3

src内を以下のように変更してください。
LinePlot.jsxはファイルがないと思うので作成してください。

src/App.jsx

import * as d3 from "d3";
import { useState } from "react";
import LinePlot from "./LinePlot";

export default function App() {
  const [data, setData] = useState(() => d3.ticks(-2, 2, 200).map(Math.sin));

  function onMouseMove(event) {
    const [x, y] = d3.pointer(event);
    setData(data.slice(-200).concat(Math.atan2(x, y)));
  }

  return (
    <div onMouseMove={onMouseMove}>
      <LinePlot data={data} />
    </div>
  );
}

src/LinePlot.jsx

import * as d3 from "d3";

export default function LinePlot({
  data,
  width = 640,
  height = 400,
  marginTop = 20,
  marginRight = 20,
  marginBottom = 20,
  marginLeft = 20,
}) {
  const x = d3.scaleLinear(
    [0, data.length - 1],
    [marginLeft, width - marginRight],
  );
  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);
  return (
    <svg width={width} height={height}>
      <path
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        d={line(data)}
      />
      <g fill="white" stroke="currentColor" strokeWidth="1.5">
        {data.map((d, i) => (
          <circle key={i} cx={x(i)} cy={y(d)} r="2.5" />
        ))}
      </g>
    </svg>
  );
}

これでとりあえず動く状態なはず！

動作確認をしてみましょう。

npm run dev

ポートは変わっていたらそこは直してください。 http://localhost:5173/ にアクセスするとこのような画面が表示されます。

これで一旦完成です自分で改造したりとか、 https://d3js.org/ を見て全く新しいものを作成しましょう。