折れ線グラフ作成ツール
ステップ 1 / 4
推移データを追加
順序のあるラベルを2件から20件、系列を1本から4本比較できます。データはこのブラウザ内にとどまります。
| ラベル | ||
|---|---|---|
値の並びを、複数系列を比較できる明快な折れ線グラフに変換します。2件から20件の名前付きカテゴリと1本から4本の名前付き系列を含む CSV またはタブ区切りデータを読み込み、配色、グリッド線、マーカー、平滑化を選びます。完成したグラフで、同じ順序のカテゴリに沿った値の変化を示せます。グラフと SVG、PNG、CSV の書き出しはブラウザ内でローカルに生成されます。
折れ線グラフの作り方
-
1
共有するカテゴリ列を1つ用意する
カテゴリのラベルを最初の列に置き、以降の各列には分かりやすい系列名を付けます。各線が同じカテゴリの順序をたどれるよう、2行から20行、1本から4本の系列を使用します。
-
2
データを読み込み、グラフを整える
CSV または TSV データを読み込み、基になる傾向を隠さずに値を追いやすくする配色、グリッド、マーカー、平滑化を選びます。
-
3
伝わる内容を確認して書き出す
カテゴリの順序と系列ラベルが正しいことを確認してから、現在のグラフを SVG または PNG でダウンロードします。読者が正確な値を必要とする場合は CSV も書き出します。
線で説明できる順序から始める
折れ線グラフは、カテゴリの順序に意味がある場合に最も役立ちます。たとえば月、プロジェクトの段階、測定時点の気温、製品の連続したバージョンです。共有された順序に沿って各系列がどう変化するかを示せます。ただし、変化が起きた理由を証明したり、次の値を予測したり、関係のないカテゴリを意味のある傾向に変えたりはできません。
最初の列はカテゴリラベル用にし、系列ごとに1列を使います。列名が、読者が線を識別するための名前になります。
| 確認したいこと | 折れ線グラフが役立つ場面 | 注意点 |
|---|---|---|
| 指標は時間とともに上がったか下がったか | カテゴリが日や月など順序のある期間である | 線は隣接する期間のつながりを示すのであり、因果関係ではない |
| 2つの指標は異なる動きをしたか | 両方の系列が同じカテゴリと単位を使う | 色だけに頼らず、各系列に具体的な名前を付ける |
| 変化はどこで起きたか | カテゴリが連続する節目やバージョンである | 個々の観測値を特定する必要があるならマーカーを使う |
| 正確な値が必要か | 付属の CSV またはデータ表を提供する | グラフ画像だけでは値を推定する必要がある |
実例: 月ごとの登録数
この CSV を読み込むと、4か月にわたる2本の線を描けます。最初の行でカテゴリ列と2つの系列に名前を付け、以降の各行で1つのカテゴリとその値を指定します。
Month,Website registrations,Newsletter registrations
January,120,84
February,146,91
March,132,118
April,171,126
Webサイト登録の線は1月から2月に上がり、3月に下がり、4月に表示された中で最も高い値に達します。ニュースレター登録は表示されたすべての月で増えています。データ元がカンマではなくタブを使う場合は、同じ構成の TSV データを読み込んでください。
マーカー、グリッド、平滑化
マーカーがあると、入力した各観測値を見つけやすくなります。複数の線が接近している場合は特に、グリッドが概算の読み取りに役立ちます。平滑化は観測値の間の見た目の経路を変えるため、慎重に使ってください。曲線は、元データが裏付けない中間値まで確かなように見せることがあります。離散的なカテゴリ、不規則な観測、正確な値が重要な報告では、マーカーをオンのままにして画像とともに CSV を共有してください。
色だけに頼らず理解できるグラフにする
色を系列を見分ける唯一の方法にしないでください。各系列に明示的で見える名前を付け、正確な値や傾向が重要な場合は表または CSV でデータを提供します。どの系列が上昇、下降、方向転換したかなど、要点を短い文章で説明することもできます。
SVG または PNG は視覚的な書き出しであり、それだけで完全なアクセシビリティの代替になるものではありません。グラフを公開するときは、基になるデータと重要な関係をまとめた簡潔な文章を含めてください。これは、グラフをテキスト代替が必要な複雑な画像とし、情報を色だけに頼らせないという W3C の考え方に沿うものです。
このツールはグラフデータを処理し、SVG、PNG、CSV のダウンロードをブラウザ内でローカルに生成します。ページの読み込みは通常のサイトへのリクエストです。タブを閉じた後もグラフを残したい場合は、書き出しを保存してください。
よくある質問
2件から20件の名前付きカテゴリと、1本から4本の名前付き系列を使用できます。読者が各位置で線を比較できるよう、すべての系列で同じ順序のカテゴリリストを使う必要があります。
ヘッダー行を使用します。カテゴリラベルを最初の列に置き、以降の各列に名前付きの系列を1つずつ置きます。その後の各行にはカテゴリ1つと、それらの系列の値を入れます。
個々の観測値を見つけやすくする必要があるときはマーカーを使います。平滑化は全体の傾向を確認しやすくできますが、測定していない中間値を示唆することもあります。正確さが重要な場合は平滑化していない線を保ち、元データを共有してください。
いいえ。折れ線グラフは順序のあるカテゴリで値が変化する様子を示し、調べる価値のある傾向を明らかにできますが、原因を確定したり、将来の値を予測したり、データの品質を判断したりはできません。
明確な系列名を使い、色だけに頼らず、基になる CSV または同等のデータ表を主な傾向の短い文章とともに公開してください。そうすれば読者は画像から推定せずに正確な値を確認できます。
現在のグラフを SVG または PNG として、データを CSV としてエクスポートできます。グラフの処理と書き出しはブラウザ内でローカルに行われます。通常のページ読み込みは通常のサイトへのリクエストのままです。
関連ツール
GIFメーカー
連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。
PNGからSVGへのベクター変換
PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
画像アップスケーラー
AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。
バーコードジェネレーター
Code 128、Code 39、EAN-13、UPC-A、ITF-14、Codabarで読み取り可能な1Dバーコードを作成します。印刷用にPNG、SVG、PDFで書き出せます。
写真エディター
切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。