ExpoとReact nativeの構成でD3.jsをインストールしてスマホアプリ上でデータビジュアライゼーションを行う

D3.jsとは

D3.jsは、JavaScript製のデータ駆動型ドキュメント作成ライブラリです。データをもとにして動的な、インタラクティブなビジュアライゼーションをウェブブラウザ上で作成できます。

D3.jsの主な特徴は以下の通りです：
データバインディング: HTMLやSVGの要素をデータにバインドすることが可能で、そのデータの変更に基づいて自動的にビジュアルを更新します。

多様なビジュアライゼーション: バーグラフ、散布図、地理空間データマップ、階層構造図（ツリーマップやパーティション図）など、あらゆる種類のビジュアライゼーションを作成できます。

カスタムアニメーション: データの変更時にエレメントがどのように振る舞うかを細かく制御できます。これによってスムーズなトランジションやアニメーションを実現できます。

大量のデータ: D3.jsは大量のデータを処理する能力を持っており、そのデータを効果的に可視化するためのツールを提供します。

インタラクティブ: ユーザーがデータに交互作用を持つ、ズーム、ブラッシング＆リンクセレクションなどのインタラクティブな機能をサポートしています。

それぞれの要素に対して、D3.jsは低レベルな操作を提供しますが、再利用可能なモジュールのコミュニティも活発で、特定の目的のためのライブラリやプラグインも多数提供されています。

各種ライブラリインストール

react-native-svgをインストール　

まずはExpo用のreact-native-svgをインストール　
スマホアプリ上でSVGを扱えるようにするライブラリ

npx expo install react-native-svg

d3.jsをインストール　

　
データビジュアライゼーション用のライブラリ

npm install d3

サンプルコード

import React from 'react';
import { Svg, Path, G } from 'react-native-svg';
import * as d3 from 'd3';

const PieChart = () => {
    const data = [10, 20, 20, 50];
    const colors = d3.scaleOrdinal(d3.schemeCategory10);
    const pie = d3.pie();
    const arc = d3.arc().outerRadius(100).innerRadius(0);
    const w = 200;
    const h = 200;

    return (
        <Svg width={w} height={h}>
            <G x={w / 2} y={h / 2}>
                {pie(data).map((slice, index) => {
                    const sliceColor = colors(index);
                    return (
                        <Path
                            key={`pie-slice-${index}`}
                            d={arc(slice)}
                            fill={sliceColor}
                        />
                    );
                })}
            </G>
        </Svg>
    );
};

export default PieChart;

参考リンク

公式ドキュメント

React + D3.jsを使用するときに助けになりそうな記事

youtubeのチュートリアル

youtubeのチュートリアルのGithubリポジトリ