散布図メーカー
CSVから散布図を作成 — 最初の列がX、それ以降の各列がYの系列になります。PNG出力対応、ブラウザ内で即実行。
使い方
- 1 2列以上のCSVデータを貼り付けます — 最初の列がX軸(数値)になります。
- 2 追加の列はそれぞれ独立した(X, Y)の点の系列になります。
- 3 作成した散布図をPNG画像としてダウンロードします。
このツールを使う理由
- 連続値のX軸に対応 — 相関関係、回帰的な傾向、サンプルの分布を示すグラフに最適です。
- 複数系列に対応 — 最初の列以降の各数値列が、それぞれ独立した系列になります。
- Chart.jsを遅延読み込み — 初期読み込みを軽量に保ちます。
- 処理はすべてクライアント側で完結 — データがブラウザの外に送信されることはありません。
よくある質問
一部の点が表示されないのはなぜですか?
XまたはYが数値でない行は自動的にスキップされます — これによりプレビューが常に整った状態に保たれます。
トレンドライン(近似曲線)は表示できますか?
現時点では未対応です — 線をつなげて表示したい場合は<a class="underline" href="/line-chart-maker">折れ線グラフメーカー</a>をご利用ください。
カテゴリデータにはどのグラフが適していますか?
月名やラベルなどカテゴリ形式のX軸には、<a class="underline" href="/bar-chart-maker">棒グラフ</a>または<a class="underline" href="/line-chart-maker">折れ線グラフ</a>をご利用ください。
散布図メーカー とは?
散布図メーカー(Scatter Plot Maker)は、CSVデータからブラウザ上で直接散布図を作成できるツールです。最初の列をX値として扱い、それ以降の各列を独立したYの系列として扱うことで、対応する点を2軸のグラフ上にプロットします。作成したグラフはPNG画像としてエクスポートでき、処理はすべてクライアント側で完結するため、データがサーバーにアップロードされることはありません。
機能
CSV列から生成するマルチシリーズXYポイント
最初のCSV列は各行の数値X値として解析され、追加の各列は(X, Y)点からなる独自のデータセットとなり、10色パレットから自動的に色分けされます。
数値でない行は自動的にスキップ
X または Y のセルが Number.isFinite の解析(parseFloat)に失敗した行は、そのシリーズから除外され、エラーを出す代わりにグラフをきれいに保ちます。
ワンクリックPNGエクスポート
ダウンロード機能は、canvas.toDataURL('image/png') を使ってライブキャンバスをPNGデータURLにレンダリングし、ブラウザのダウンロードをトリガーします — サーバーとの通信は発生しません。
クライアント側のみ、アップロードなし
CSVの解析(RFC 4180準拠、コンマや改行を含む引用フィールドにも対応)とChart.jsのレンダリングは、どちらもブラウザ内で実行されます。CSVテキストがページの外に出ることはありません。
例
Input
Hours,Score
1,55
2,62
3,70
4,74
5,80
6,86
7,88
8,93
Output
scatter-plot-maker.png — canvas-sized PNG (matches the on-screen preview element, no fixed pixel dimensions), 1 series (Score) of 8 points on linear X/Y axes, point color #10b981 at 70% fill opacity with a solid border, legend shown
主な用途
-
1
2つの数値変数間の相関チェック
ペアの値(例:Hours,Score)を貼り付けて、他所で正式な回帰分析を行う前に、XとYが連動して変化する傾向があるかを視覚的に確認できます。
-
2
共通のX軸上に複数のYシリーズをプロット
数値列を追加することで、同じX値に対して複数の測定シリーズ(センサー値やテストスコアなど)を1つのグラフ上に重ねて表示できます。
-
3
生のサンプルデータの簡易ビジュアルQA
小規模なデータセットを直接貼り付け、どの行が数値でないためスキップされるかを確認することで、元のCSVをクリーニングする前に外れ値や欠損を素早く見つけられます。
Scatter Plot Makerは、貼り付けたCSVテキストを、HTMLキャンバス上でChart.js 4によってレンダリングされるXY散布図に変換します。最初の列を数値のX値として扱い、それ以降の各列を(X, Y)点からなる個別のYシリーズとして線形軸上にプロットします。結果はcanvas.toDataURL()を使ってPNGとしてエクスポートできます。CSVの解析とチャートのレンダリングはすべてブラウザ内のクライアント側で行われ、ファイルがサーバーにアップロードされることはありません。
- カテゴリ
- クリエイター
- 料金
- 無料
- プライバシー
- ブラウザベース
- 登録
- 不要
参考文献
- Chart.js — 散布図(Scatter Chart) — Chart.js
- Chart.js — 線形軸(Linear Axis) — Chart.js
- HTMLCanvasElement.toDataURL() — MDN Web Docs
- RFC 4180 — CSVファイルの共通フォーマットとMIMEタイプ — IETF
プライバシー
明記されない限り、データがブラウザの外に送信されることはありません。散布図メーカー は完全にクライアント側で動作します — サーバーへのアップロードなし、ログなし、入力内容のトラッキングなし。
Zerethon Social で作成・共有・成長しよう
無料登録。ポイントを獲得し、実績を集め、世界中のクリエイターとつながりましょう。