CSV や JSON のレコードをグラフにする方法

レコードを貼り付けるか .csv / .json ファイルを選び、ラベル列と 1 つ以上の数値系列を指定して「グラフを生成」を押します。折れ線・棒・面・円・散布図はこのブラウザー内で描画され、SVG または PNG ファイルとして保存されます。

グラフが描くのは表の先頭 80 行(円グラフは 12 件)で、行が省略されるときは指標行に「グラフ内」として実際の行数が並びます。読み込む行数は最大 1,000 行なので、割合や軸ラベルは常に実際に描かれたデータを説明します。

  1. レコードを入力欄に貼り付けるか、CSV / JSON ファイルを選びます。区切り文字は先頭行から自動判定します(カンマ・セミコロン・タブ)。自分で選ぶこともできます。JSON はオブジェクトの配列か、「data」配列を持つオブジェクトに限ります。上限はファイルも貼り付けも 10 MB です。
  2. 「プレビュー」を押します(ファイルを選んだ場合は読み込み時点で解析されます)。ステータス行に行列数が表示され、名前のない見出しには連番、重複した見出しには「(2)」が付くので、列が失われることはありません。
  3. グラフの種類、ラベル / X 列、数値系列を選びます。値の 75 % 以上が数値の列が一覧に並び、欠損の少ない 2 列が最初から選ばれます。X 列が数値なら散布図の X 軸として使われます。
  4. 「グラフを生成」を押すと、行数・系列数・(上限がある場合は)描画された行数が指標に並びます。種類・ラベル・系列を変えるとグラフはすぐに描き直されます。
  5. SVG(ベクター形式で編集可能)または PNG(1520 x 800、ローカルの canvas で描画)で書き出すか、Clear でデータ・グラフ・指標・区切り文字を空にします。

読み取りの条件、軸に表示される内容、書き出しファイルの中身

ファイルから読み取る内容

CSV は引用符付きフィールドとして解析するため、「引用符」の中の区切り文字や改行も値の一部として残り、\r\n と \r の両方の改行を受け付けます。自動判定は先頭行の候補文字を数えるだけなので、1 列しかないファイルや先頭行に区切り文字がない場合は、カンマ・セミコロン・タブを明示的に選んでください。

JSON はオブジェクトの配列、または「data」プロパティがその配列であるオブジェクトとして読み取ります。それ以外は壊れた CSV と同じメッセージで拒否します。読み込みは 1,000 行で止まり、その場合は「N 行中先頭 1,000 行」と表示してファイルが短いかのようには見せません。10 MB を超える貼り付けは、同じ大きさのファイルと同様に拒否します。

グラフに表示される内容

記入済みセルの 4 分の 3 以上が数値である列を系列として提示します。空のセルと文字列は 0 ではなく欠落として扱い、折れ線はそこで切れ、棒は描かれません。初期選択では 75 % 以上の行が埋まっている列を優先するため、疎な列が意図せずグラフに入ることはありません。

データが正の値だけなら軸の下端は 0 に置きます。負の値があれば軸は 0 より下に伸び、棒グラフは 0 の線から下向きに描画されます(1 ピクセルに潰れません)。目盛りは 1 / 2 / 5 刻みで、必要な精度に合わせます(ミリ単位なら 0.0002 … 0.0006、大きな値なら 500M / 1B / 1.5B)。軸ラベルが余白で切れることはありません。

行数・円グラフの分割・書き出し

円グラフが使う系列は 1 つ(最初に選んだもの)で、複数選ぶとステータス行がその旨を伝えます。12 番目より後の行は「その他の行」として合算するため、割合は表示部分だけでなく表全体を表します。散布図は X 列が数値なら値の位置に、ラベルなら並び順の位置に点を置きます。

入力欄と一致しなくなったグラフは破棄します。データの編集、別ファイルの読み込み、解析の失敗のいずれでもグラフは空になり、書き出しボタンは再度生成するまで無効になります。SVG は 760 x 400 の単体ファイル、PNG はこのタブの canvas でその 2 倍の大きさに描画するため、どちらの書き出しにもサーバーは不要です。

最近使ったツール: