EXAMPLE · FICTIONAL DATA
月次売上の増減を、比較図で伝える
「6月は5月より下がった」を数字だけで終わらせず、各月の売上額と、4月からどれだけ増減して6月の額になったかを分けて見せます。ここで使う金額は説明用の架空データです。
目的：月の金額と、前月からの変化を分ける
月ごとの売上額そのものを比べたいなら、各月を同じ0から始める棒グラフが読み取りやすい形です。増減の積み上がりから最終額を説明したいときは、ウォーターフォール図を使います。月の売上は期間中に発生した金額なので、時系列の棒グラフは期間ごとの量を見比べる選択肢です。
架空入力例と計算
| 月 | 売上 | 前月との差 |
|---|---|---|
| 4月 | 1,000,000 | — |
| 5月 | 1,150,000 | +150,000（+15.0%） |
| 6月 | 1,080,000 | −70,000（−約6.1%） |
計算は「当月の売上 − 前月の売上」です。5月は1,150,000 − 1,000,000 = +150,000円、6月は1,080,000 − 1,150,000 = −70,000円です。比率は前月の売上を分母にし、差を割って求めています（6月は −70,000 ÷ 1,150,000 ≒ −6.1%）。
棒グラフ用の2列データは、月の総額をそのまま並べます。図のタイトルに「単位：円」と書いておくと、軸の数値の意味が明確になります。
月 売上（円）
4月 1000000
5月 1150000
6月 1080000ウォーターフォール用に開始値と増減へ並べ替える
このツールのウォーターフォールは、各行の数値を0から順に累積します。そこで1行目に4月の売上を開始値として置き、後続行には月ごとの差だけを入力します。
項目 値
4月売上（開始） 1000000
5月の増減 150000
6月の増減 -70000| 行 | 入力値 | 累積 |
|---|---|---|
| 4月売上（開始） | +1,000,000 | 1,000,000 |
| 5月の増減 | +150,000 | 1,150,000 |
| 6月の増減 | −70,000 | 1,080,000 |
ツールで作る手順と期待結果
- ことばとグラフを開く。表データ欄に上のウォーターフォール用TSVを貼り付けます。
- 「ウォーターフォール」を選び、タイトルを「4〜6月の売上推移（単位：円）」などにします。
- 図で累積が1,000,000 → 1,150,000 → 1,080,000円となることを確認し、必要ならSVGまたはPNGで保存します。
読み方：5月の増加で累積額が115万円まで上がり、6月の減少を反映した最終額は108万円です。この図だけでは、増減の原因（商品別・顧客別など）は分かりません。
制約と使い分け
- この例の金額・期間・変化はすべて架空です。実売上の証拠や経営判断を示すものではありません。
- ツールはタブまたはカンマで区切った「ラベル1列＋有限数1列」を1〜50行受け付けます。数値の桁区切りカンマは入力せず、例のように半角数字で入力してください。
- 棒グラフは各月の金額比較、ウォーターフォールは開始額からの増減の積み上がりを伝えます。複数月の流れをなめらかに追う折れ線も選べます。図の種類は一度に1つです。
- サンキー図は「元→先→量」のような流れを複数段階で追いたい場合の形式です。入力は2列のラベルと数値ではなく、少なくとも「From（元）・To（先）・Weight（量）」の対応が必要です。本ツールではサンキー図を作成できません。
- SVG・PNGの論理サイズは1200×700pxです。狭い画面ではプレビューの横スクロールが必要な場合があります。
確認に使った資料
- 英国国家統計局（ONS）「Column chart」：時系列の期間別データやフローデータでの棒の使い方。
- 英国国家統計局（ONS）「Choosing a chart type」：データの関係と見せたい傾向から図を選ぶ考え方。
- Google Charts公式「Sankey Diagram」：ノード間の接続とFrom・To・Weight形式。
- 本サイトの実装：
src/lib/layout.jsの累積計算、src/lib/parse.jsの入力検証、src/lib/chart.jsのSVG生成。