散布図ライブラリ比較
3つの人気ライブラリで散布図を表示し、データの相関関係の表現方法を比較
📊 使用しているサンプルデータ
2つの製品の広告費と売上の関係を示すデータ（各10件）を使用しています。
{
"productA": [
{
"adCost": 120,
"sales": 340
},
{
"adCost": 200,
"sales": 480
},
{
"adCost": 150,
"sales": 390
},
{
"adCost": 280,
"sales": 620
}
],
"productB": [
{
"adCost": 100,
"sales": 210
},
{
"adCost": 180,
"sales": 350
},
{
"adCost": 140,
"sales": 280
},
{
"adCost": 260,
"sales": 440
}
],
"...": "（各10件ずつ）"
}1. Recharts
ScatterChartコンポーネントで直感的に散布図を描画。ZAxisによるバブルチャート拡張も可能
✓ ZAxis対応✓ 複数系列✓ レスポンシブ
特徴: ZAxisを追加すればデータポイントのサイズを第3変数で制御でき、 バブルチャートへの拡張も容易。ツールチップに単位付きの値を表示可能。
tsx
'use client';
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
const data = [
{ x: 10, y: 30 }, { x: 40, y: 100 }, { x: 60, y: 50 },
{ x: 80, y: 120 }, { x: 100, y: 80 }, { x: 120, y: 150 },
];
export function RechartsScatterChart() {
return (
<ResponsiveContainer width="100%" height={300}>
<ScatterChart>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="x" name="X" />
<YAxis dataKey="y" name="Y" />
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
<Scatter data={data} fill="#3b82f6" />
</ScatterChart>
</ResponsiveContainer>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Rechartsを使った散布図を実装してください。 - 使用ライブラリ: recharts（ScatterChart、Scatter、XAxis、YAxis、ZAxis、CartesianGrid、Tooltip、Legend、ResponsiveContainer） - サンプルデータ: 2製品の広告費と売上の関係（各10件）を用意すること - インタラクティブ: ホバー時にツールチップでX・Y軸の正確な値（単位付き）を表示すること - グループ区別: Scatterコンポーネントを複数配置し、fillカラーで製品ごとに色分けして表示すること - レスポンシブ: ResponsiveContainerで親要素の幅に応じてチャートサイズが変わるよう対応すること - 拡張: ZAxisを使えばデータポイントのサイズを第3変数で制御してバブルチャートに拡張できることをコメントで示すこと
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
2. Nivo
ResponsiveScatterPlotで美しいデザインのインタラクティブな散布図を描画
✓ 美しいデフォルト✓ ノードサイズ可変✓ D3.jsパワー
特徴: D3.jsの豊富な機能を活かし、ノードサイズのカスタマイズや メッシュベースのインタラクションなど高度な機能を備えています。
tsx
'use client';
import { ResponsiveScatterPlot } from '@nivo/scatterplot';
const data = [
{
id: 'グループA',
data: [
{ x: 10, y: 30 }, { x: 40, y: 100 }, { x: 60, y: 50 },
{ x: 80, y: 120 }, { x: 100, y: 80 },
],
},
];
export function NivoScatterChart() {
return (
<div style={{ height: 300 }}>
<ResponsiveScatterPlot
data={data}
margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
xScale={{ type: 'linear', min: 0, max: 120 }}
yScale={{ type: 'linear', min: 0, max: 160 }}
colors={['#3b82f6']}
nodeSize={10}
useMesh={true}
/>
</div>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Nivoを使った散布図を実装してください。
- 使用ライブラリ: @nivo/scatterplot（ResponsiveScatterPlot）
- サンプルデータ: 2製品の広告費と売上の関係（各10件）をNivo形式（{id, data: [{x, y}]}）で用意すること
- インタラクティブ: ホバー時にツールチップでX・Y軸の正確な値を表示すること（useMesh: true）
- グループ区別: colorsプロパティで製品ごとに色分けし、凡例を表示すること
- レスポンシブ: ResponsiveScatterPlotで親要素の幅に応じてチャートサイズが変わるよう対応すること
- 軸ラベル: axisBottomとaxisLeftのlegendプロパティで軸のラベル（広告費・売上）を表示すること⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
3. Chart.js (react-chartjs-2)
Canvas描画による高パフォーマンスな散布図。大量のデータポイントもスムーズに表示
✓ Canvas高速描画✓ 軸ラベル対応✓ 大量データ対応
特徴: Canvas APIを使用しているため数千のデータポイントでもスムーズに動作。 軸にタイトルを簡単に追加でき、ポイントのスタイルも柔軟に設定可能。
tsx
'use client';
import { Scatter } from 'react-chartjs-2';
import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(LinearScale, PointElement, Tooltip, Legend);
const data = {
datasets: [
{
label: 'グループA',
data: [
{ x: 10, y: 30 }, { x: 40, y: 100 }, { x: 60, y: 50 },
{ x: 80, y: 120 }, { x: 100, y: 80 }, { x: 120, y: 150 },
],
backgroundColor: 'rgba(59, 130, 246, 0.7)',
},
],
};
export function ChartJSScatterChart() {
return <Scatter data={data} options={{ responsive: true, maintainAspectRatio: false }} height={300} />;
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Chart.js（react-chartjs-2）を使った散布図を実装してください。
- 使用ライブラリ: react-chartjs-2（Scatter）、chart.js（LinearScale、PointElement、Title、Tooltip、Legend）
- サンプルデータ: 2製品の広告費と売上の関係（各10件）を{x, y}形式で用意すること
- インタラクティブ: ホバー時にツールチップでX・Y軸の正確な値を表示すること
- グループ区別: datasetsを製品ごとに分けてbackgroundColorとborderColorで色分けして表示すること
- レスポンシブ: responsive: true、maintainAspectRatio: falseで親要素に合わせてサイズを調整すること
- 軸ラベル: scalesのx・yそれぞれにtitle.display: trueと軸名（広告費・売上）を設定すること⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| ライブラリ | バブル拡張 | インタラクション | 大量データ | おすすめ用途 |
|---|---|---|---|---|
| Recharts | ◎（ZAxis） | ◯ | △ | ダッシュボード |
| Nivo | ◯（nodeSize） | ◎ | △ | 分析レポート |
| Chart.js | ◯（pointRadius） | ◯ | ◎ | 大量データの可視化 |
散布図の選択ポイント
- •Recharts: ZAxisを活用したバブルチャートへの拡張が容易。 Reactプロジェクトでのダッシュボード構築に最適。
- •Nivo: 美しいデフォルトデザインとメッシュベースのインタラクションが魅力。 分析レポートやプレゼンテーション向け。
- •Chart.js: Canvas描画で数千ポイントでも高パフォーマンス。 大量のデータポイントを扱う科学データやログ分析に最適。
散布図の典型的な使用例
📊 相関分析
広告費と売上、学習時間とテスト結果など2つの変数の関係を視覚化
🔬 科学データ
実験データのプロットや測定値の分布パターンの確認
👥 クラスタリング
顧客セグメントやデータのグループ分けを視覚的に表現
📈 外れ値検出
データの異常値やパターンから外れたポイントを発見
⚠️ 散布図使用時の注意点
- •データポイントが重なる場合は透明度を調整して視認性を確保する
- •相関関係があっても因果関係があるとは限らないことに注意
- •軸のスケールによって印象が大きく変わるため適切な範囲を設定する
- •系列が多すぎると識別が困難になるため色の使い分けを工夫する