使い方・実験データグラフ作成ツール

実験レポートの図を、ブラウザだけで作るためのツールです。インストールも登録もいりません。

1. はじめに

図の作成:状態遷移図・ブロック図・論理回路などを、マウスで描きます。
散布図:Excel / CSV を読み込んで、点を重ねて描き、回帰直線(傾き・切片・R²・p 値)を求めます。
どちらも PNG・SVG・PDF で保存(書き出し)できます。
作ったものは自動で保存されます。保存先は、使っているブラウザの中です。インターネットの向こうには送られません(くわしく)。
マウスで操作するので、パソコンでの利用をおすすめします。

2. 図の作成

図形を置く

左の道具から「楕円」「四角」「注釈」「文字」や論理ゲートを選びます。
画面をクリックすると置けます。ドラッグすると、大きさを決めて置けます。
置くとすぐに文字を入力できます。Enter で決定、Shift+Enter で改行です。

線・矢印を引く

直線・曲線:図形から図形へドラッグします。同じ図形の上で離すと、自分に戻る矢印(ループ)になります。
曲線の形:曲線を選ぶと出る真ん中の ● で全体のふくらみ、◇ でその側の曲がり方を変えられます。両端は動きません。
直角線:始点をクリック → 曲がる所をクリック → 終点の図形をクリックします。何もない所で終えるときはダブルクリックします。
線の端は、図形の輪郭やグリッドに吸い付きます。両端の ○ をドラッグすると、図形から離すこともできます。

形を整える

図形や線を選ぶと、右の欄で文字の大きさ・線の太さ・点線・塗り・矢印の向き・線の形を変えられます。
2 つ以上選ぶと「整列」、3 つ以上で「等間隔」が使えます。
図形を動かすと、ほかの図形の辺や中心にそろう所で赤いガイド線が出ます。

便利な操作

操作	すること
ダブルクリック	文字を編集
⌘+Z / ⇧+⌘+Z	元に戻す / やり直す
⌘+C → ⌘+V、⌘+D	コピーして貼り付け(少しずらして貼る)、複製
Delete	選んだものを削除
矢印キー(option を押しながらだと 1 ずつ)	少し動かす
スペース+ドラッグ	画面を動かす
⌘+スクロール、ピンチ、+ / −	拡大・縮小
Shift+クリック、何もない所をドラッグ	いくつも選ぶ

Windows では ⌘ の代わりに Ctrl を使います。

下絵をなぞる

上の「下絵」から、手書きの図や教科書の図の写真を読み込むと、薄く表示されます。その上をなぞって図を作れます。下絵は書き出す図には入りません。

一時保存と「戻す」

「📌 一時保存」を押すと、今の状態を残しておけます。いろいろ試したあと、「↩ 戻す」から一時保存した状態に戻れます。戻す前の状態も自動で一時保存されるので、やり直せます。

3. 散布図と回帰直線

ファイルの用意

1 行目に列の名前(例:時間 [s]、温度 [℃])、2 行目から数値を入れます。1 列に 1 種類のデータです。
Excel(.xlsx / .xls)と CSV が使えます。CSV の文字コード(UTF-8 / Shift_JIS)は自動で見分けます。
「1,200」のようなカンマつきの数字や、全角の数字も、数値として読みます。
表の上にタイトルやメモの行があっても、列の名前の行を自動で探します。

読み込んで描く

ファイルを画面にドラッグするか、「ファイルを選ぶ」から選びます。いくつでも読み込めます。
右の「データ」で、ファイルごとに横軸 (x) と縦軸 (y) を選びます。縦軸は複数選べて、全部が 1 枚に重なります。
色と点の形は、色の見え方の違いに配慮した決まった順番で付きます。

元のファイルから範囲を選ぶ

グラフの下の「📋 データを見る・直す」で「元のファイル」に切り替えると、ファイルの中身が Excel のように表示されます。

ドラッグで範囲を選び、「この範囲をグラフに使う」を押すと、その範囲だけをグラフに使います(範囲のいちばん上の行が列の名前になります)。
1 つのシートに表がいくつも並んでいるときは、「この範囲を別のデータとして追加」で、それぞれを別のデータとして重ねて描けます。
列の記号(A、B…)をクリックすると列ごと選べます。Shift+クリックで範囲を広げられます。

値を直す

「グラフに使う表」で数字をクリックすると直せます。元のファイルは変わりません。

回帰直線

「回帰直線」で、最小二乗法の直線を引きます。系列ごとに計算します(点が 3 個以上のとき)。
「全部のデータで計算する」を外すと、計算に使う x の範囲を決められます。範囲の外の点は白抜きになり、計算に使いません。
グラフの下の表に、傾き・切片(± は標準誤差)、R²(決定係数)、r(相関係数)、p 値が出ます。「表をコピー」で Excel や Word に貼り付けられます。
p 値は「傾きが 0(x と y に関係がない)」かどうかの検定です。小さいほど、関係がないとは言いにくくなります。

軸・目盛り

グリッドの表示、範囲の指定(「データに合わせる」で全部が入る範囲に戻せます)、対数目盛り、目盛りの数字の桁数(小数点以下の桁数 / 有効数字の桁数)、指数表記(× 10ⁿ)を決められます。

4. 数式の書き方(上付き・下付き・ギリシャ文字)

図の文字・軸のラベル・凡例・タイトルでは、LaTeX と同じ書き方で数式を書けます。$ と $ で囲んだ部分が数式になります。

書くもの	表示
`面積 [m$^2$]`、 $10^{-3}$	上付き(指数)。2 文字以上は `{ }` で囲む
$x_1$ 、 $T_{\mathrm{max}}$	下付き
`$\alpha$ $\beta$ $\gamma$ $\Delta$ $\mu$ $\sigma$ $\Omega$`	ギリシャ文字(大文字は頭を大文字に)
$\log_{10} I$ 、 $\ln x$ 、 $e^{-t/\tau}$	log・指数関数
$\sqrt{x}$ 、 $\frac{a}{b}$	ルート・分数
$\times$ $\pm$ $^\circ$ $\leq$ $\geq$	× ± ° ≦ ≧
$\overline{A}$ 、 $\bar{Q}$	上線(論理回路の否定など)
$\mathrm{m\,s^{-1}}$	立体の文字(単位は立体で書くのが普通)

例:

電流 $I$ [$\mu$A]
温度 $T$ [$^\circ$C]
$\Delta T$ [K]
吸光度 $\log_{10}(I_0/I)$
$\sigma^2$ [$\Omega^{-1}\,\mathrm{m}^{-1}$]

日本語は $ の外に書きます。
$ そのものを書きたいときは \$ と書きます。
書き間違いがあると、画面に知らせが出て、そのままの文字で表示されます。

5. 保存とバックアップ

作った図・グラフと、読み込んだ Excel / CSV は、このブラウザの中に自動で保存されます。インターネットの向こう(サーバー)には送られません。
次に開いたときは、前回の続きから始まります。前に作ったものは、上の「開く図」「開くグラフ」から選べます。
別のパソコンや別のブラウザ(Safari と Chrome など)では見えません。
ブラウザの「履歴とサイトデータの消去」をすると、消えることがあります。

大事なものは、ときどき「その他 → バックアップを書き出す」でファイルに残してください。作図と散布図がまとめて 1 つのファイルに入ります。別のパソコンでは「バックアップを読み込む」で戻せます。

6. 書き出した図を LaTeX・Word で使う

形式	向いている使い方
PDF	LaTeX に入れるならこれ。拡大しても荒れません
SVG	拡大しても荒れない形式。Web や、あとで手直しするとき
PNG	Word や PowerPoint に貼るとき(300 dpi)

ファイル名は、上の「名前」になります。空白は - に変わります(LaTeX で読み込みやすいように)。
文字は、書き出すときに文字の形の線に変えるので、どのパソコンで開いても同じ見た目になります。
作図は、描いたものが入る範囲だけを書き出します(グリッド・下絵・選択の印は入りません)。

LaTeX での例:

\begin{figure}[htbp]
  \centering
  \includegraphics[width=0.8\linewidth]{scatter-20261014-1104.pdf}
  \caption{温度と抵抗の関係}
  \label{fig:resistance}
\end{figure}

7. こまったとき

「数値の列が見つかりません」と出る

表の上にタイトルやメモの行があると、列の名前の行がずれることがあります。右の「データ」でファイルの ⚙ を開き、「上から飛ばす行数」を直すか、「元のファイルを見て、範囲を選ぶ」で使う範囲を選んでください。

数式が赤い文字で、そのまま表示される

数式の書き方に間違いがあります。画面の下(散布図はグラフの下)に、どこが読めなかったかが出ます。$ の数が合っているか、命令のつづり(\alpha など)を確かめてください。日本語は $ の外に書きます。

前に作った図が見つからない

別のブラウザや、プライベートブラウズで開いていないか確かめてください。保存は、使っているブラウザごとに分かれています。

はじめて開いたとき、少し待たされる

はじめての 1 回だけ、日本語のフォント(約 4.5MB)や数式の部品を読み込みます。2 回目からはブラウザが覚えているので速くなります。