RAWGraphsとは？使い方と対応チャート32種・日本語データの注意点【2.1対応】

RAWGraphs（ロウグラフス）は、表形式のデータを貼り付けるだけで、サンキー図やアルビアル図、ビースウォームのようなExcelでは作りにくいグラフをSVGで書き出せる、無料のオープンソースWebツールです。インストールもアカウント登録も要らず、app.rawgraphs.ioをブラウザで開けばすぐに使えます。

2026年10月8日に公式アプリが2.1へ更新されました。この記事では、2.1.0のソースコードとローカルでの実行結果をもとに、使い方の手順、読み込めるデータ形式、対応チャート32種類、書き出し形式を整理します。日本語データで引っかかりやすい点、ローカル起動とコードからの描画、似た無料ツールとの使い分けも扱います。

まとめ：RAWGraphsの用途と制約

• 用途：表データから、デザイン編集向けの静的なグラフ（SVG・PNG・JPG）を作るツールです。ダッシュボードや、読者が操作するグラフは作れません。
• 最新版：2026年10月8日公開の2.1です（公式ブログの告知は2.1.1、アプリの表示は2.1.0）。内部の作り（ビルドツールとReact）が刷新され、軸の目盛りを調整できるチャートが増えました。操作の流れとチャートの数は2.0系と同じです。
• チャート数：公式アプリに登録されているのは32種類です。サンキー図・アルビアル図・ツリーマップ・サンバースト・バイオリンプロットなどを含みます。
• 入力：貼り付け、ファイルアップロード（CSV・TSV・DSV・JSON）、URL、SPARQL、サンプルデータ、保存済みプロジェクトの6経路です。Excelの.xlsxファイルは直接読めないので、セル範囲をコピーして貼り付けます。年度が列に並ぶ横持ちの表は、Stack機能で縦持ちに変換できます。
• 出力：SVG・PNG・JPGと、作業を再開するための.rawgraphsプロジェクトの4形式です。加工後のデータをCSVで書き出す機能はありません。
• データの扱い：データはブラウザ内だけで処理され、サーバーには送信・保存されません。
• 日本語：操作画面は英語のみです。日本語の列名や値はそのまま使えますが、書き出したSVGのフォント指定はArialなので、資料に載せる前にフォントを差し替えます。
• ライセンス：Apache License 2.0です。GitHubからクローンして、ローカルや社内サーバーで動かせます。

RAWGraphsの概要と開発元

RAWGraphsは、ミラノ工科大学のDensityDesign Research Labが主導し、Calibro、INMAGIK（2019年に参加）と共同で開発・保守しているツールです。公式サイトのAboutによると一般公開は2013年です。描画にはJavaScriptの可視化ライブラリD3.jsを使っています。

公式READMEは、RAWGraphsの役割を「スプレッドシート（Excel、LibreOffice Calc、Googleスプレッドシートなど）とベクターグラフィック編集ソフト（Adobe Illustrator、Inkscapeなど）をつなぐもの」と説明しています。分析そのものより、分析済みのデータを印刷物や記事用の図版に仕上げる工程で使うツールです。

RAWGraphs 2.1の変更点

公式ブログは2026年10月8日に「RAWGraphs 2.1.1 is out」として更新を告知しました。一方、rawgraphs-appのGitHubタグとapp.rawgraphs.ioの画面表示は「2.1.0」です（2026年10月18日時点）。どちらも同じ日に公開された同じ更新を指しています。前回のリリース（v2.0.1）は2024年1月26日なので、約2年9か月ぶりの更新です。

利用者から見える変化は、軸の扱いです。公式ブログによると、目盛りの自動配置（Auto-place ticks）・最大本数（Max. ticks）・両端の最小値と最大値の表示（Show min/max）の3つの設定が、折れ線グラフ、ストリームグラフ、バンプチャート、ホライズングラフ、等高線プロット、ヘキサゴナルビニング、ボロノイ図、凸包、バブルチャート、ビースウォーム、ガントチャート、バイオリンプロットの12種類で使えるようになりました。目盛りが重複して描かれる不具合も直っています。ガントチャートにはx軸を上下どちらに置くか（X axis position）、ビースウォームには点をy方向にだけ動かす設定（Apply forces only on y axis）が加わりました。

RAWGraphs 2.0と1.xの違い

2.0は2021年2月23日にベータ版（v2.0.0-beta.6）として一般公開され、UIがReactベースになりました。データ型の指定、区切り文字・日付ロケールの設定、集計方法の選択、プロジェクト保存は2.0で加わった機能です。描画部分はrawgraphs-core（共通部分）とrawgraphs-charts（各チャート）というnpmパッケージに分かれ、アプリの外からも同じチャートを描けます。1.x系（最終リリースv1.3.0は2018年6月）はAngularJS 1.6ベースの旧アプリで、.xlsxの直接読み込みはこちらの機能です。

RAWGraphsの使い方：データ読み込みから書き出しまでの5ステップ

公式アプリは1ページの縦長画面で、上から順に操作すると1枚のグラフができあがります。

ステップ1：表データの読み込みと列型の確認

「Paste your data」「Upload your data」などのタブから入力経路を選びます。Excelやスプレッドシートの場合は、見出し行を含むセル範囲をコピーして貼り付けるのが最短です。読み込むと表のプレビューが出て、各列の型（数値・日付・文字列）が自動判定されます。判定が違う列は、列見出しのアイコンから型を変更できます。

ステップ2：表現したい関係に応じたチャート選択

32種類のチャートがサムネイル付きで並びます。チャートごとに必要な列の組み合わせが決まっているので、先に見せたい関係でチャートを選び、足りない列はデータ側で足します。

ステップ3：列と視覚要素のマッピング

左に列の一覧、右にチャートが要求する項目（「Source node」「Size」など）が並ぶので、列をドラッグして割り当てます。数値の項目には集計方法を指定でき、選べるのはCount、Average、Median、Max、Min、Count unique、Sum、CSV、CSV (unique)の9種類です。必須項目がすべて埋まると、下にプレビューが表示されます。

ステップ4：グラフの寸法・配色・軸・ラベル調整

プレビュー左側のオプションで、幅・高さ・余白・背景色・カラースケール・ラベルの表示を変更します。2.1では前述の目盛りの設定もここに並び、日付の軸で目盛りが詰まるときはMax. ticksで本数を減らします。ラベルの個別配置まで詰めたい場合は、SVGで書き出してIllustratorやInkscapeで仕上げます。

ステップ5：画像とプロジェクトの書き出し

ファイル名を入れ、形式（svg・png・jpg・rawgraphs）を選んでダウンロードします。

RAWGraphsで読み込めるデータ形式と入力方法

公式アプリのデータ読み込み画面には、次の6つの入力経路があります。

Excelファイルを直接読み込めない理由と対処

アップロード処理はファイルをテキストとして読み込む実装（2.1.0でも同じ）なので、バイナリ形式の.xlsxをドロップしても正しい表になりません。Excelのデータは、セル範囲をコピーして「Paste your data」に貼り付けるか、ExcelでCSV（UTF-8）として保存してからアップロードします。CSV（UTF-8）以外のCSV形式で保存すると、日本語が文字化けすることがあります。

区切り文字・小数点・日付形式の設定

表形式のデータを読み込むと、左側に「DATA PARSING OPTIONS」が表示されます。区切り文字（Column separator）はカンマ（既定）・セミコロン・タブ・パイプから選べ、桁区切り（Thousands separator）と小数点（Decimals separator）の記号も変更できます。日付列の書式を解釈するときのロケール（Date Locale）は、D3.jsのd3-time-formatが提供する30ロケールから選べ、日本語（ja-JP）も含まれます。ロケールが効くのは月名・曜日名などの表記部分です。

横持ちの表を縦持ちに変換するStack機能

日本の業務データでよくある「年度が列に並ぶ表」は、そのままでは多くのチャートに割り当てられません。折れ線グラフやストリームグラフは、年度を1つの列、値を別の1列に持つ縦持ちの形を要求するからです。RAWGraphsには、読み込み後に左側の「DATA TRANSFORMATION」にある「Stack on」で、基準にする列を選ぶと縦持ちに変換する機能があります。公式のStack機能の解説は、これを「the Unpivoter」と呼んでいます。

アプリの変換処理（src/hooks/useDataLoaderUtils/stack.js）を取り出し、次の横持ちの表を「地域」でStackしたところ、4行の縦持ちデータになりました。基準列以外の見出しはcolumn列に、セルの値はvalue列に入ります。

地域,2024,2025
東日本,120,150
西日本,90,110

地域,column,value
東日本,2024,120
東日本,2025,150
西日本,2024,90
西日本,2025,110

この例では、変換後のcolumn列は数値として自動判定されます。時系列のチャートに使うときは、列の型を日付（書式YYYY）に変えます。列名はcolumnとvalueに固定されるため、日本語の列名を付けたい場合や、複数の列を基準にしたい場合は、Excel側でPower Queryの「列のピボット解除」を使って縦持ちにしてから貼り付けます。手順はパワークエリ（Power Query）とは？できること・使い方・結合6種と遅い原因を公式仕様で整理で扱っています。

RAWGraphsの対応チャート32種類の一覧

公式アプリのソースコード（src/charts.js）に登録されているチャートは次の32種類で、2.1.0でも数は変わっていません。分類はこの記事で付けたもので、アプリ上の表記とは異なります。公式サイトのトップページは「Almost 30 visual models（30近いビジュアルモデル）」と概数で書いています。

散布図に近い表現はバブルチャートで作れます。バブルチャートの読み方やD3.jsでの実装はバブルチャートとは？読み方とD3.jsでの作り方（Pack Layout／散布図型）で解説しています。公式のLearningには、チャートごとの作り方が29本あります。

サンキー図とアルビアル図に必要なデータの形

RAWGraphsで作られることが多いのが、流れの量を帯の太さで表すサンキー図です。サンキー図は「Source node（流入元）」「Target node（流入先）」が必須で、「Size（量）」は任意です。Sizeを割り当てない場合は行数が量になります。

たとえば、次の4行を貼り付けて流入元をSource node、ページをTarget node、訪問数をSize（集計はSum）に割り当てると、「料金」ノードは120＋60＝180の太さで描かれます。

流入元,ページ,訪問数
検索,料金,120
検索,事例,80
広告,料金,60
SNS,事例,40

アルビアル図は「Steps」に複数の列を順番に割り当てる形式です。「流入元→ページ→成約有無」のように3列以上を並べると、3段階以上の流れを1枚に描けます。サンキー図が1行につき「流入元と流入先」の1組しか持てないのに対し、アルビアル図は1行の中の複数の列をつないで描きます。詳しい操作は公式のサンキー図の作り方とアルビアル図の作り方にあります。

RAWGraphsの書き出し形式とプロジェクト保存

作業内容はサーバーに保存されないため、後日の再編集には.rawgraphs形式での保存が必要です。.rawgraphsファイルには元データが含まれるので、機密データを扱った場合は共有先に注意します。

集計後のデータを表として書き出す機能はないので、集計済みの数値も資料に載せたいときはExcel側で同じ集計をしておきます。

RAWGraphsを日本語データで使うときの注意点

操作画面は英語のみで、日本語への言語切替はありません（2.1.0のソースコードでも、多言語化は未実装のTODOとして残っています）。一方、データ中の日本語はそのまま扱えます。列名・カテゴリ名が日本語でもマッピングや集計に支障はなく、前述のサンキー図とStackの例も日本語の列名で動きます。

注意したいのはフォントです。書き出したSVGのラベルにはfont-family: Arial, sans-serifが指定されています。Arialには日本語の字形がないため、表示は閲覧環境の代替フォントに任され、パソコンによって見た目が変わります。Illustratorなどで開くと、フォントの置換を求められることもあります。資料や記事に載せる前に、ラベルのフォントを游ゴシックやNoto Sans JPなどに差し替えてください。

日付列が文字列として判定される場合は、元データを「2026-10-18」のようなISO形式に揃えてから読み込むのが確実です。

RAWGraphsのデータの扱いとプライバシー

公式READMEと公式Learningのデータ読み込み解説には「RAWGraphsに入力されたデータはWebブラウザだけで処理され、サーバー側での処理や保存は一切行われない」と明記されています。ただし、追加したカスタムチャートは第三者のJavaScriptを実行するため、機密データを扱う場合はそのコードも確認してください。

なお、公開ソースにはGoogleアナリティクスのタグがあり、描画したチャートの種類（chart-render）と書き出しの種類・形式（chart-export）を送る処理が含まれます。データの中身は送られません。2.1.0でも計測IDは旧形式の「UA-」で始まるもので、現在実際に収集されているかはコードからは判断できません。外部への通信自体が社内規程で禁じられている場合は、ローカル起動してこのタグを除去するだけでは足りません。URL・SPARQLからのデータ取得と、外部URLやnpmからのカスタムチャート読み込みも外へ通信するので、これらを使わない運用にしたうえで、ブラウザの開発者ツールなどで通信先を確認します。

RAWGraphsのローカル起動とコードからの描画

公式アプリをローカルで起動する手順（2.1.0）

2.1.0から、ローカル起動の手順が変わりました。公式READMEの要件はGitとNode.js（LTS版を推奨）だけで、Yarnは不要になりました。2.0.1で必要だったNODE_OPTIONS=--openssl-legacy-providerの指定も要りません。

git clone --branch v2.1.0 --depth 1 https://github.com/rawgraphs/rawgraphs-app.git
cd rawgraphs-app
npm install
npm start

Node.js 26.5.0とnpm 11.17.0で実行すると、npm installは約45秒で終わり、npm startでVite 7.3.6の開発サーバーがhttp://localhost:3000で起動しました（ポートはvite.config.jsで指定）。3000番を別の開発サーバーが使っている場合はnpx vite --port 5179のように番号を変えます。npm 11.17ではesbuildなどのインストールスクリプトが未承認だという警告が出ますが、起動とビルドには影響しませんでした。

社内サーバーに置く場合はnpm run buildで静的ファイルを生成し（手元では約1分12秒）、出力されたbuild/フォルダをWebサーバーで配信します。公式のCIはNode.js 22系でビルドしています。

rawgraphs-coreとNode.jsによるSVG生成

同じチャートを大量に作る場合や定期レポートに組み込む場合は、npmパッケージを使ってコードから描画できます。2026年10月8日、rawgraphs-coreは2022年3月の1.0.0-beta.17以来、約4年7か月ぶりに更新され、正式版の1.0.0になりました。

ただし、rawgraphs-coreのインストール解説は「完全なSVG仕様に対応したNode.js用のDOM実装が見つからないため、公式に完全サポートするのはブラウザ環境のみ」としています。次の結果はサンキー図だけで確かめたものです。Node.js 26.5.0、rawgraphs-core 1.0.0、rawgraphs-charts 1.1.0、jsdom 30.1.3で実行しました。

npm install @rawgraphs/[email protected] @rawgraphs/[email protected] [email protected]

// render-sankey.js
const fs = require('fs')
const { JSDOM } = require('jsdom')
const { chart, parseDataset } = require('@rawgraphs/rawgraphs-core')
const { sankeydiagram } = require('@rawgraphs/rawgraphs-charts')

const rows = [
  { 流入元: '検索', ページ: '料金', 訪問数: 120 },
  { 流入元: '検索', ページ: '事例', 訪問数: 80 },
  { 流入元: '広告', ページ: '料金', 訪問数: 60 },
  { 流入元: 'SNS', ページ: '事例', 訪問数: 40 },
]
const { dataset, dataTypes } = parseDataset(rows)

const viz = chart(sankeydiagram, {
  data: dataset,
  dataTypes,
  mapping: {
    source: { value: ['流入元'] },
    target: { value: ['ページ'] },
    size: { value: ['訪問数'], config: { aggregation: ['sum'] } },
  },
  visualOptions: { width: 600, height: 300 },
})

const { document } = new JSDOM('').window
const svg = viz.renderToString(document)
fs.writeFileSync('sankey.svg', svg)
console.log(dataTypes)
console.log(svg.match(/<title>[^<]+<\/title>/g).join('\n'))

node render-sankey.jsを実行すると、sankey.svgが作られ、次の内容が出力されます。各ノードとリンクの値が集計どおりになっていることを確認できます。1.0.0-beta.17とrawgraphs-charts 1.0.1の組み合わせで実行したときと、出力は同じでした。

{ '流入元': 'string', 'ページ': 'string', '訪問数': 'number' }
<title>検索: 200</title>
<title>料金: 180</title>
<title>事例: 120</title>
<title>広告: 60</title>
<title>SNS: 40</title>
<title>検索 → 料金: 120</title>
<title>検索 → 事例: 80</title>
<title>広告 → 料金: 60</title>
<title>SNS → 事例: 40</title>

カスタムチャートの読み込み

公式アプリには、32種類以外のチャートを追加する機能があります。2026年4月には、公式サイトのカスタムチャート一覧にリッジラインプロット、ダンベルプロット、放射状の折れ線グラフの3種類が加わりました。自作する場合は公式のcustom-rawcharts-templateを使い、チャートの定義（dimensions・mapping・visualOptions・render）を書いてnpm run buildを実行すると、読み込み用のlib/index.umd.jsが生成されます。ファイル・URL・npmパッケージから読み込めます。ファイルとnpmパッケージ、localhost以外のURLから読み込むときは「第三者のJavaScriptを実行しようとしている」という確認画面が出ます（localhostのURLだけは確認が省略されます）。出所の分からないチャートは読み込まないでください。

RAWGraphsを選ぶべき場面と別ツールを選ぶべき場面

RAWGraphsが向いているのは、一度きりの図版を、Excelにないチャートで、デザインソフトで仕上げる前提で作る場面です。報告書のサンキー図、記事用の階層図、学会発表のバイオリンプロットなどが該当します。

Flourish・Datawrapperとの違い

ブラウザだけでグラフを作れる無料ツールとしては、FlourishとDatawrapperもよく比べられます。違いが出るのは、サンキー図を作れるか、無料で何を書き出せるか、データをどこに置くかです。

Flourishはサンキー図とアルビアル図のテンプレートを無料プランで使え、作成した可視化をWebに埋め込んで公開する用途に向きます。ただし公式FAQによると、無料プランのプロジェクトは公開するまで非公開ですが、公開すると他のFlourish利用者が見つけて複製できる状態になります。PNG・SVGの画像書き出しは、2025年11月17日以降に作成したプロジェクトから有料のPresenterプランの機能になりました（それより前に作ったプロジェクトは従来の機能のまま編集できます）。Datawrapperの無料プランはPNGで書き出せ、SVGとPDFはPro以上です。対応する可視化の種類の一覧にサンキー図はありません。Googleスプレッドシートも、公式ヘルプのグラフの種類一覧にサンキー図を含みません。

判断はシンプルです。印刷物や資料用にSVGで仕上げたい、または社外のサーバーにデータを置けないならRAWGraphsを選びます。Web記事に埋め込んで読者に操作させたいならFlourish、棒・折れ線・地図をWeb記事に載せ、読者がホバーで数値を確かめられる形で公開したいならDatawrapperが向きます。

RAWGraphsを使わない方がよい条件

棒グラフや折れ線グラフだけで足りるなら、ExcelやGoogleスプレッドシートで十分です。ほかに次の条件では、RAWGraphs以外を選びます。

• 毎週・毎月更新するグラフ：.rawgraphsプロジェクトでデータを差し替えられますが、更新のたびに手作業が要ります。Looker StudioやTableauのように、データソースと接続したままのBIツールを使います。社内のデータ基盤とつないだダッシュボードを整える場合は、BIツール導入支援で設計から相談できます。
• ホバーや絞り込みなど、読者が操作するグラフ：RAWGraphsの出力は静的な画像です。PythonならPlotly（Plotlyとは？Pythonでインタラクティブなグラフを作る基本と使い方）、WebならD3.jsで実装します。
• 大きなデータ：処理はすべてブラウザ上で行われるため、行数が多いとプレビューの更新が遅くなります。先に集計して行数を減らしてから読み込みます。

よくある質問

RAWGraphsは無料で使えますか？

はい、無料です。公式アプリはアカウント登録なしで使え、ソースコードはApache License 2.0で公開されています。

RAWGraphsの最新バージョンはいくつですか？

2026年10月8日に公開された2.1です。公式ブログは2.1.1、アプリの画面とGitHubのタグは2.1.0と表記しています。操作の流れとチャート数は2.0系と同じで、内部のビルドツールの刷新と、12種類のチャートへの軸の目盛り設定の追加が主な変更です。

RAWGraphsは日本語に対応していますか？

操作画面は英語のみです。データ中の日本語はそのまま使えますが、書き出したSVGのフォント指定はArialなので、日本語ラベルのフォントは書き出し後に差し替えてください。

RAWGraphsでExcelファイルを読み込めますか？

.xlsxファイルを直接アップロードすることはできません。Excelのセル範囲をコピーして貼り付けるか、CSV（UTF-8）で保存してからアップロードします。

RAWGraphsでサンキー図を作るにはどうすればよいですか？

流入元・流入先・量の3列を持つ表を読み込み、チャート一覧から「Sankey diagram」を選んで、流入元をSource node、流入先をTarget node、量をSizeに割り当てます。Sizeの集計方法は既定でSumなので、同じ流入元と流入先の組が複数行あれば量が合計されます。

関連記事

• バブルチャートとは？読み方とD3.jsでの作り方（Pack Layout／散布図型）
• Tableauの使い方｜初心者が最短でグラフとダッシュボードを作る基本操作
• Looker Studio（データポータル）とは？無料でできる範囲・Pro料金と制限値、Lookerとの違い
• Plotlyとは？Pythonでインタラクティブなグラフを作る基本と使い方
• パワークエリ（Power Query）とは？できること・使い方・結合6種と遅い原因を公式仕様で整理