人口分布マップチャートライブラリ比較

'use client';
// React + SVGのみでバブルマップを実装（外部ライブラリ不要）
const sampleData = [
  { region: '北海道', population: 522,  density: 63,   x: 143.2, y: 43.1 },
  { region: '東北',   population: 862,  density: 129,  x: 140.3, y: 39.5 },
  { region: '関東',   population: 4349, density: 1348, x: 139.7, y: 36.0 },
  { region: '中部',   population: 2128, density: 314,  x: 137.0, y: 36.2 },
  { region: '近畿',   population: 2229, density: 667,  x: 135.5, y: 34.7 },
  { region: '中国',   population: 719,  density: 227,  x: 132.5, y: 34.5 },
  { region: '四国',   population: 372,  density: 198,  x: 133.5, y: 33.8 },
  { region: '九州',   population: 1282, density: 304,  x: 131.0, y: 33.0 },
  { region: '沖縄',   population: 146,  density: 641,  x: 127.7, y: 26.3 },
];

const maxPopulation = Math.max(...sampleData.map((d) => d.population));

function mapX(lon: number) { return ((lon - 126) / (146 - 126)) * 440 + 40; }
function mapY(lat: number) { return 400 - ((lat - 25) / (45 - 25)) * 360 + 20; }
function getRadius(pop: number) { return Math.sqrt(pop / maxPopulation) * 32 + 4; }
function getColor(density: number) {
  if (density > 1000) return 'rgba(239,68,68,0.75)';
  if (density > 500)  return 'rgba(249,115,22,0.7)';
  if (density > 200)  return 'rgba(234,179,8,0.65)';
  if (density > 100)  return 'rgba(16,185,129,0.65)';
  return 'rgba(59,130,246,0.65)';
}

export function CustomSvgBubbleMap() {
  return (
    <svg viewBox="0 0 520 420" className="w-full max-w-lg">
      {sampleData.map((d) => (
        <circle key={d.region}
          cx={mapX(d.x)} cy={mapY(d.y)}
          r={getRadius(d.population)}
          fill={getColor(d.density)}
          stroke="white" strokeWidth={1}>
          <title>{d.region} 人口:{d.population}万人 密度:{d.density}人/km²</title>
        </circle>
      ))}
      {sampleData.map((d) => (
        <text key={d.region + '-label'}
          x={mapX(d.x)} y={mapY(d.y) + getRadius(d.population) + 12}
          textAnchor="middle" fontSize={9} fill="#374151">{d.region}</text>
      ))}
    </svg>
  );
}

'use client';
import { ResponsiveScatterPlot } from '@nivo/scatterplot';

const data = [
  {
    id: '東日本',
    data: [
      { x: 143.2, y: 43.1, population: 522,  region: '北海道', density: 63   },
      { x: 140.3, y: 39.5, population: 862,  region: '東北',   density: 129  },
      { x: 139.7, y: 36.0, population: 4349, region: '関東',   density: 1348 },
      { x: 137.0, y: 36.2, population: 2128, region: '中部',   density: 314  },
    ],
  },
  {
    id: '西日本',
    data: [
      { x: 135.5, y: 34.7, population: 2229, region: '近畿', density: 667 },
      { x: 132.5, y: 34.5, population: 719,  region: '中国', density: 227 },
      { x: 133.5, y: 33.8, population: 372,  region: '四国', density: 198 },
      { x: 131.0, y: 33.0, population: 1282, region: '九州', density: 304 },
      { x: 127.7, y: 26.3, population: 146,  region: '沖縄', density: 641 },
    ],
  },
];

const maxPopulation = 4349;

export function NivoPopulationMap() {
  return (
    <div style={{ height: 400 }}>
      <ResponsiveScatterPlot
        data={data}
        margin={{ top: 20, right: 120, bottom: 60, left: 70 }}
        xScale={{ type: 'linear', min: 125, max: 146 }}
        yScale={{ type: 'linear', min: 24, max: 46 }}
        nodeSize={(datum: any) => Math.sqrt(datum.data.population / maxPopulation) * 32 + 4}
        axisBottom={{ legend: '経度', legendPosition: 'middle', legendOffset: 46 }}
        axisLeft={{ legend: '緯度', legendPosition: 'middle', legendOffset: -56 }}
        colors={['#3b82f6', '#10b981']}
        useMesh={true}
        tooltip={({ node }: any) => (
          <div style={{ background: 'white', padding: '8px', border: '1px solid #ccc', borderRadius: 4 }}>
            <strong>{node.data.region}</strong><br />
            人口: {node.data.population}万人<br />
            密度: {node.data.density}人/km²
          </div>
        )}
      />
    </div>
  );
}

'use client';
import { Bubble } from 'react-chartjs-2';
import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend } from 'chart.js';

ChartJS.register(LinearScale, PointElement, Tooltip, Legend);

const maxPopulation = 4349;
function r(pop: number) { return Math.sqrt(pop / maxPopulation) * 20 + 3; }

const data = {
  datasets: [
    {
      label: '東日本',
      data: [
        { x: 143.2, y: 43.1, r: r(522),  region: '北海道', population: 522  },
        { x: 140.3, y: 39.5, r: r(862),  region: '東北',   population: 862  },
        { x: 139.7, y: 36.0, r: r(4349), region: '関東',   population: 4349 },
        { x: 137.0, y: 36.2, r: r(2128), region: '中部',   population: 2128 },
      ],
      backgroundColor: 'rgba(59,130,246,0.5)',
    },
    {
      label: '西日本',
      data: [
        { x: 135.5, y: 34.7, r: r(2229), region: '近畿', population: 2229 },
        { x: 132.5, y: 34.5, r: r(719),  region: '中国', population: 719  },
        { x: 133.5, y: 33.8, r: r(372),  region: '四国', population: 372  },
        { x: 131.0, y: 33.0, r: r(1282), region: '九州', population: 1282 },
        { x: 127.7, y: 26.3, r: r(146),  region: '沖縄', population: 146  },
      ],
      backgroundColor: 'rgba(16,185,129,0.5)',
    },
  ],
};

export function ChartJSPopulationMap() {
  return (
    <Bubble data={data} options={{
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        tooltip: {
          callbacks: {
            label: (ctx: any) => {
              const d = ctx.raw;
              return [`${d.region}`, `人口: ${d.population}万人`];
            },
          },
        },
      },
      scales: {
        x: { min: 125, max: 147, title: { display: true, text: '経度' } },
        y: { min: 24,  max: 46,  title: { display: true, text: '緯度' } },
      },
    }} height={400} />
  );
}

'use client';
import {
  ScatterChart, Scatter, XAxis, YAxis, ZAxis,
  Tooltip, Legend, ResponsiveContainer,
} from 'recharts';

const eastJapan = [
  { x: 143.2, y: 43.1, population: 522,  region: '北海道', density: 63   },
  { x: 140.3, y: 39.5, population: 862,  region: '東北',   density: 129  },
  { x: 139.7, y: 36.0, population: 4349, region: '関東',   density: 1348 },
  { x: 137.0, y: 36.2, population: 2128, region: '中部',   density: 314  },
];

const westJapan = [
  { x: 135.5, y: 34.7, population: 2229, region: '近畿', density: 667 },
  { x: 132.5, y: 34.5, population: 719,  region: '中国', density: 227 },
  { x: 133.5, y: 33.8, population: 372,  region: '四国', density: 198 },
  { x: 131.0, y: 33.0, population: 1282, region: '九州', density: 304 },
  { x: 127.7, y: 26.3, population: 146,  region: '沖縄', density: 641 },
];

export function RechartsPopulationMap() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <ScatterChart margin={{ top: 20, right: 20, bottom: 40, left: 40 }}>
        <XAxis type="number" dataKey="x" name="経度" domain={[125, 147]}
          label={{ value: '経度', position: 'insideBottom', offset: -5 }} />
        <YAxis type="number" dataKey="y" name="緯度" domain={[24, 46]}
          label={{ value: '緯度', angle: -90, position: 'insideLeft' }} />
        <ZAxis type="number" dataKey="population" range={[50, 2000]} />
        <Tooltip cursor={{ strokeDasharray: '3 3' }} />
        <Legend verticalAlign="top" />
        <Scatter name="東日本" data={eastJapan} fill="#3b82f6" fillOpacity={0.6} />
        <Scatter name="西日本" data={westJapan} fill="#10b981" fillOpacity={0.6} />
      </ScatterChart>
    </ResponsiveContainer>
  );
}