データ可視化 on データの道具箱

3Dサーフェイス・チャート

Mon, 01 Jan 0001 00:00:00 +0000

「行 × 列 × 値」の3次元データを、色付きの曲面として地形図のように立体表示

3d-surface-chart.dataviz.jp

どんなツールか？

CSVデータを読み込むだけで、インタラクティブな3Dサーフェス・チャートを生成するビジュアライゼーションツールです。金利のイールドカーブ、都道府県別の統計データなど「行 × 列 × 値」の構造を持つデータを立体的に俯瞰できます。マウス操作で自由に回転・ズームでき、データの全体傾向や局所的な変化を直感的に把握できます。

機能

3Dサーフェス描画 — CSV データからカラーマップ付きの3D曲面を自動生成
カメラプリセット — 全体・正面・上面・側面の4視点をワンクリックで切替
カラースキーム — 21種類の配色（連続・分岐）から選択。分岐型では0基準モードも対応
軸ラベル表示 — 横書き・縦書きを切替可能。日本語の都道府県名など多数のカテゴリにも対応
CSV読込 — ファイル選択またはドラッグ＆ドロップで任意のCSVを読み込み
サンプルデータ — 財務省の金利データ（1974年〜）、米国債、都道府県別出生数をプリセット
PNGエクスポート — 軸ラベル付きの高解像度画像をダウンロード
シェア — 現在の表示状態（データ・配色・カメラ位置）をURLで共有。SNS向けOGP画像も自動生成
プロジェクト保存/読込 — 作業状態をクラウドに保存し、いつでも復元

使い方

ページを開くと、財務省の金利データ（直近5年）が表示されます
ドロップダウンからサンプルデータを切り替えるか、自分のCSVを読み込みます
マウスドラッグで回転、スクロールでズーム、右ドラッグで平行移動できます
カラースキームやカメラ位置を調整して、最適なビューを作ります
「エクスポート」でPNG画像をダウンロード、「シェア」でURLを発行できます
シェアされたURLは誰でも閲覧することができます

データ形式

ピボットテーブル形式（クロス集計表）のCSVファイルを使用します。行と列の交差点に数値が入る、Excel のピボットテーブルと同じ構造です。

        col1   col2   col3   ...
row1    5.53   5.47   5.36   ...
row2    5.42   5.38   5.25   ...

CSVでは以下のように記述します：

label,col1,col2,col3,...
row1,5.53,5.47,5.36,...
row2,5.42,5.38,5.25,...

1列目: 行ラベル（日付 YYYY-MM-DD、年度、カテゴリ名など）→ 奥行き軸に対応
2列目以降: 数値データの列 → 横軸に対応。列名が 1Y, 10M など期間形式の場合は自動で軸間隔を計算、それ以外は均等配置
セルの値: 数値 → 高さ（縦軸）とカラーマップに対応

例: 都道府県別出生数データ

年度,北海道,青森県,岩手県,...,沖縄県
2011,39292,9532,9310,...,16918
2012,38686,9168,9277,...,17074

縦持ち（ロングフォーマット）のデータは、Excel やPythonの pivot() でピボットテーブル形式に変換してからご利用ください。

参照

3Dサーフェイス・チャートを時系列イールド・カーブに用いるアイデアは The New York Times によるものです。

A 3-D View of a Chart That Predicts The Economic Future: The Yield Curve - The New York Times https://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html

RAWGraphs2

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

RAWGraphs2

rawgraphs.dataviz.jp

どんなツールか？

多種多様なチャートをわかりやすい操作感で作成することができるツールです。ツール単体でチャートを細かく作り込むことには向いていませんが、SVG形式で出力して、グラフィックツール（FigmaやAdobe Illustrator）やパワーポイントで仕上げるためのチャートの下書きとしての使い勝手がいいツールです。

ExcelとAdobe Illustratorなどのグラフィック・アプリの間をつなぐミッシング・リンクとなるツール。

機能

8カテゴリー32種類の多種多様なチャート・テンプレート
PNG、JPEG、SVG画像での出力
スタイル調整
インタラクティブコンテンツの作成機能はない
作成プロジェクトの保存と読込

使い方

1. データを読み込む
1. チャートを選ぶ
1. マッピングする
1. カスタマイズする

データ形式

表データ(CSV、TSV、DSV)
JSON

注意

Microsoft Edgeを利用時に、ドラッグ操作がうまくいかないことがあります。その場合はChromeなどほかのブラウザを利用してください。

Sankeymatic

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Sankeymatic

sankeymatic.dataviz.jp

どんなツールか？

サンキー・ダイアグラムの作成に特化したツールです。データ形式が簡易なものなので、スプレッドシート・ツールで作成したデータを用いて、誰でも手軽にサンキー・ダイアグラムの作成が出来ます。

機能

美しいサンキー・ダイアグラムの作成
PNG、SVG画像での出力

使い方

「インプット」からデータの読み込み
スタイル調整する
出力する

データ形式

本ツール専用の記法
source [value] target

描いて答える折れ線グラフ

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

描いて答える折れ線グラフ

drawing-line-chart.dataviz.jp

どんなツールか？

「描いて答える折れ線グラフ」は、時系列データをもとに"予想して描く"インタラクティブなクイズを作成できるツールです。出題者がデータをアップロードし、回答者は途中から先のトレンドを指でなぞって予想します。答え合わせでは実際のデータと比較され、予想の精度がスコアで表示されます。

機能

CSVアップロード: 手持ちの時系列データからクイズを作成
サンプルデータ: 米国失業率、日本の人口、訪日外国人数、円ドル為替レートをすぐに試せる
対象期間の選択: データの一部を切り出して出題範囲を設定
期間アノテーション: 政権交代や経済イベントなどの背景情報をチャートに重ねて表示
手書き風スタイル: 標準スタイルに加え、手書き風の描画スタイルを選択可能
公開・共有: 作成したクイズをURLで共有、SNSでシェア
プロジェクト保存・読込: 作成途中のクイズを保存して後から編集

使い方

データをアップロード — CSVファイルをドラッグ＆ドロップ、またはサンプルデータを選択
対象期間を設定 — データの開始・終了の範囲を指定
クイズを設定 — タイトル（質問文）、出題開始ポイント、単位、スタイルを入力
アノテーションを追加（任意） — 期間ごとのラベルを設定して背景に表示
プレビューで確認 — 右パネルでリアルタイムにチャートを確認
公開 — URLを発行して回答者に共有

データ形式

1行目をヘッダーとするCSVファイルに対応しています。

列	内容	例
X軸（時系列）	年または年月	`2000`, `2020/04`
Y軸（数値）	任意の数値	`4.9`, `12615`, `105.21`

date,value
2000,4.0
2001,4.7
2002,5.8

X軸は YYYY（年）または YYYY/MM（年月）形式に対応
複数列のCSVの場合、アップロード後にX軸・Y軸の列を選択できます
JSON形式（[{“x”: 2000, “y”: 4.0}, …]）にも対応

棒グラフ・クロスフィルター

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

棒グラフ・クロスフィルター

bar-chart-filter.dataviz.jp

どんなツールか？

Bar Chart Filter は、CSVやTSVデータをアップロードするだけで、インタラクティブなクロスフィルター付き棒グラフダッシュボードを作成できるツールです。複数の棒グラフが連動し、一方のグラフをクリックすると他のグラフやデータテーブルが即座に絞り込まれます。データの傾向や構成比を直感的に探索でき、結果はURLで共有したり、画像としてエクスポートできます。

dataviz.jp

令和6年度墨田区住民意識調査

ショーケース

bar-chart-filter.dataviz.jp

機能

クロスフィルター: 棒グラフのクリックで他のグラフとテーブルが連動フィルタリング
カラム選択: データの中からテキスト型の変数を自動検出し、最大6つまで棒グラフとして表示
データテーブル: フィルタ結果を一覧表示。ページング対応
行リンク: URLカラムを指定すると、テーブル行クリックで外部ページに遷移
スタイル調整: バーの色、行の高さ、テーブル表示件数をカスタマイズ
注釈: タイトルとデータソースを設定可能
エクスポート: SVG / PNG / CSV / JSON 形式でダウンロード
共有: URLを発行して誰でも閲覧可能。iframe による埋め込みにも対応
プロジェクト保存・読込: 作業状態を保存し、後から再開可能

使い方

CSV / TSV / JSON ファイルをドラッグ＆ドロップ、またはクリックしてアップロード
テキスト型の変数が自動検出され、棒グラフ候補としてスタイルタブに表示されます
表示したい変数のチップをクリックして選択（最大6つ）
棒グラフの各バーをクリックすると、他のグラフとデータテーブルが絞り込まれます
注釈タブでタイトルやデータソースを入力
共有タブからSVG/PNG/CSV/JSONのエクスポート、またはShare ボタンで共有URLを発行

データ形式

CSV / TSV / JSON（配列形式）に対応しています。

CSV: カンマ区切り。1行目がヘッダー
TSV: タブ区切り。1行目がヘッダー
JSON: オブジェクトの配列 [{"col1":"val1", ...}, ...] または {"data": [...]} 形式

特定のカラム名は不要です。どのようなカラム構成のデータでも読み込めます。テキスト値を含むカラムが棒グラフの候補として自動的にリストされます。

Cytoscape

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Cytoscape

cytoscape.dataviz.jp

どんなツールか？

デスクトップアプリとして人気のあるCytoscapeのブラウザ実装版です。

ネットワーク（グラフ）データをブラウザ上でインタラクティブに可視化するツールです。ノード（点）とエッジ（線）で構成される関係性データを読み込み、レイアウトの変更、属性によるスタイリングなどを直感的に操作できます。

Cytoscapeはネットワーク（グラフ）データを可視化・解析するオープンソースのプラットフォームです。もともとは生物学（分子間相互作用ネットワーク）の可視化・解析用に開発されましたが、ソーシャルネットワーク分析や複雑ネットワークの可視化全般にも利用されます。

機能

データの読み込み — GEXF、GraphML、CSV形式のファイルをアップロードして可視化
サンプルデータセット — Les Misérables、Game of Thrones、Marvel Universeなど9種類のサンプルデータをワンクリックで読み込み
レイアウト切替 — Grid、Circle、Concentric、Breadthfirst、Cose（物理シミュレーション）、Randomの6種類
ノードのスタイリング — 属性に応じた色（定性的カラースキーム）、サイズ、ラベルの動的変更
エッジのスタイリング — 属性に応じた色（定量的カラースキーム）、太さ、ラベルの動的変更
SVGエクスポート — 現在のグラフをSVG形式でダウンロード
プロジェクトの保存・読込 — サーバーにプロジェクトを保存し、後から復元可能

使い方

「データファイルの読込」ボタンからファイルを選択、または「サンプルデータの読込」から選択
コントロールパネルでレイアウトやイージングを変更してグラフの配置を調整
「ノード」行のドロップダウンでノードの色・サイズ・ラベルに使う属性を選択
「エッジ」行のドロップダウンでエッジの色・太さ・ラベルに使う属性を選択
必要に応じて「エクスポート」でSVG画像として保存

データ形式

GEXF / GraphML

グラフ専用のXML形式です。ノードとエッジの属性（カテゴリ、重み、座標など）を豊富に記述できます。GephiやNetworkXなど多くのツールからエクスポート可能です。

CSV（エッジリスト形式）

スプレッドシートやExcelから手軽に作成できる形式です。

ヘッダー行が必須です
source と target 列（または from と to）でエッジの両端を指定します（大文字小文字は区別しません）
それ以外の列はエッジの属性として読み込まれます
ノードはエッジの情報から自動的に生成されます

source,target,weight,type
Alice,Bob,1.0,friends
Bob,Carol,2.5,colleagues
Alice,Dave,0.8,family

Data Illustrator

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Data Illustrator

data-illustrator.dataviz.jp

どんなツールか？

Data Illustrator は，プログラミング不要で視覚的にデータ可視化を作成できるウェブアプリです。 Figma や Adobe Illustrator のように，ベクターデザイン操作感でグラフィックを描く感覚でチャートを生成できることを目指しています。

機能

直感的な描画・選択・操作ができるベクターデザインライクなインターフェース。
データとグラフィックの結合（データ結合）をサポート。
自動的な視覚エンコーディング：データ列を色・形・位置などの視覚属性に割り当てて即座に反映。
Canvas（キャンバス），Data Panel（データパネル），Layers Panel（レイヤーパネル），Property Inspector（プロパティ検査）などの UI コンポーネントで，編集と構造化が可能。

使い方

1. データをインポートしてデータテーブルを表示。
1. 図形を描画・選択・編集。
1. データ列を図形の位置・色・サイズなどの属性にバインド。即時に更新される。
1. 作成したビジュアライゼーションをエクスポート/保存。

データ形式

表データ(CSV)

Gephi Lite

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Gephi Lite

gephi-lite.dataviz.jp

どんなツールか？

Gephi Lite は、ネットワークグラフ（関係性の可視化）をブラウザ上で手軽に行えるWebアプリケーションです。ノード（点）とエッジ（線）で構成されるデータを読み込み、レイアウト計算・色分け・フィルタリングなどを直感的に操作できます。

機能

グラフの可視化: ノードとエッジの関係をインタラクティブに表示。ズーム・パン・ノード選択が可能
レイアウト計算: ForceAtlas2、Force Directed、Circular、CirclePack など複数のレイアウトアルゴリズムを搭載
外観設定: ノードやエッジの色・サイズ・ラベルを、属性値に基づいて自動的に割り当て
フィルタリング: 属性値や範囲指定でノード・エッジを絞り込み表示
メトリクス計算: 次数、PageRank、媒介中心性、Louvain コミュニティ検出などのネットワーク分析指標を算出
データテーブル: ノード・エッジの属性を一覧表示・編集
エクスポート: グラフ画像（PNG）やグラフデータ（GEXF）として書き出し
日本語／英語自動切替: ブラウザの言語設定に応じてUIを自動で出し分け

使い方

ページにアクセスすると、サンプルグラフまたは空のワークスペースが表示されます
画面上部の「データファイルを開く」ボタン、またはファイルのドラッグ＆ドロップでデータを読み込みます
左サイドメニューから「レイアウト」を選び、アルゴリズムを実行してノードを自動配置します
「外観」メニューで、属性に応じた色やサイズを設定し、グラフを見やすく調整します
「フィルター」や「メトリクス」で分析を深めます
完成したグラフは画像（PNG）やデータファイル（GEXF）としてエクスポートできます

データ形式

以下のファイル形式に対応しています。

形式	拡張子	説明
CSV	`.csv`	エッジリスト形式。1行目にヘッダー（Source, Target 等）、2行目以降に各エッジのデータを記述。最もシンプルな形式
GEXF	`.gexf`	Gephi 標準のXML形式。ノード・エッジの属性や視覚情報を豊富に保持
GraphML	`.graphml`	XMLベースの標準的なグラフ記述形式
Graphology JSON	`.json`	Graphology ライブラリのJSON形式

CSVファイルの書式例：

Source,Target,Weight
Alice,Bob,1.0
Bob,Charlie,2.0
Alice,Charlie,1.5

1行目はヘッダー（必須）
Source（または From, Src）列と Target（または To, Dst）列を自動検出します
その他の列（Weight など）はエッジの属性として取り込まれます
ノードは Source / Target の値から自動生成されます
文字コードは UTF-8 および Shift_JIS に対応しています

Parallel Coordinates

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Parallel Coordinates

parallel-coordinates.dataviz.jp

どんなツールか？

多次元データの比較・探索に特化したインタラクティブなチャートです。CSVファイルをアップロードするだけで、数値項目が平行な軸として並び、各行がそれらを横断する折れ線として描画されます。軸ごとのブラッシングで条件に合うデータだけを絞り込み、パターンや外れ値を直感的に発見できます。

機能

ブラッシング: 各軸を縦方向にドラッグして範囲を指定し、条件に合うデータだけをフィルタリング
軸の並べ替え: 列名を横にドラッグして軸の順序を自由に変更。関連する指標を隣り合わせに配置して比較
スケール切り替え: Original（元の値）、Min-Max（0-1正規化）、Z-Score（標準化）の3モードで表示を切り替え
テーブル連動: 下部のデータテーブルはブラッシング結果に連動。行にホバーするとチャート上の対応ラインがハイライト
エクスポート: フィルタリング結果をCSV、チャート画像をSVG/PNGで書き出し
シェア — 現在の表示状態をURLで共有。SNS向けOGP画像も自動生成
プロジェクト保存: データと設定（スケール、軸順序、ブラシ範囲）をクラウドにサムネイル付きで保存・復元

使い方

「CSV Upload」でデータを読み込む（または「Sample」でヨーグルト栄養データを試す）
軸を縦にドラッグして気になる範囲を絞り込む
必要に応じてScaleをMin-MaxやZ-Scoreに切り替え、異なる単位の指標を比較
軸名を横にドラッグして、比較したい項目を隣に並べる
テーブルの行にマウスを合わせると、チャート上で該当ラインがハイライトされる
結果をCSV/SVG/PNGでエクスポート、またはプロジェクトとしてクラウドに保存

データ形式

ファイル形式: CSV（カンマ区切り、UTF-8）
構造: 1行目がヘッダー（列名）、2行目以降がデータ
数値列: 自動判定され、チャートの軸として表示される
文字列列: テーブルには表示されるが、チャートの軸には含まれない
欠損値: 空セルは欠損として扱われる

Vega Editor

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Vega Editor

JSON 形式で可視化仕様を書くことで、インタラクティブなグラフやチャートをリアルタイムにレンダリング

vega-editor.dataviz.jp

どんなツールか？

Vega Editor は、Vega および Vega-Lite ビジュアライゼーション仕様を記述・編集・プレビューできる Web ベースの IDE（エディタ）です。JSON 形式で可視化仕様を書くことで、インタラクティブなグラフやチャートをリアルタイムにレンダリングできます。Vega と Vega-Lite は宣言的な可視化文法であり、データと表示ルールを JSON で定義してグラフを生成します。

機能

テキストエディタ／コードビュー…Vega/Vega-Lite の JSON を入力・編集するエディタを提供。
リアルタイムプレビュー…編集した仕様を即座に可視化としてブラウザ上で表示。
サンプル・テンプレ…例示スペックを読み込み、学習・試行錯誤が可能（公式版の特徴としてあり）。
Vega / Vega-Lite モード切替…両方の仕様を選んで編集・プレビューできる（公式ツールの標準機能）。
共有／エクスポート…仕様を GitHub Gist などに保存・共有できるバックエンド連携が存在（Vega 公式版機能）。

使い方

1. JSON 形式で仕様を書く…Vega または Vega-Lite の仕様をエディタに入力。
1. プレビューを見る…書いた仕様がリアルタイムでレンダリングされ、結果を確認可能。
1. 必要に応じて保存・共有…仕様を Gist 等に保存して他者と共有（バックエンド連携時）。

データ形式

JSON（Vega / Vega-Lite 仕様）…可視化の定義（データ参照、変換、エンコーディング、マーク等）を JSON で記述します。
データソースとしての表形式…Vega/Vega-Lite では JSON 内に直接埋め込むか、CSV/TSV ファイルへの URL 参照などで外部データを読み込み可能です（仕様一般）。

Voyager2

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Voyager2

データ探索（Exploratory Data Analysis, EDA）を支援するビジュアライゼーションツール

voyager2.dataviz.jp

どんなツールか？

Voyager 2 は、データ探索（Exploratory Data Analysis, EDA）を支援するビジュアライゼーションツールです。ブラウザ上でデータを読み込み、視覚化をインタラクティブに探索・生成できます。元のプロジェクトは Vega エコシステム上で開発された Voyager のフォーク／派生であり、手動チャート指定と自動推薦を組み合わせた探索支援を特徴とします。

機能

データ探索インターフェース…データを読み込んでフィールド一覧、チャートエンコーディング、フィルタリングなどのパネルで操作可能。
視覚化の推薦機能…現在の可視化（focus view）に関連するチャート（related views）や、複数のチャート候補を wildcards で自動生成して一覧表示。
部分指定による複数チャート生成…Wildcard（ワイルドカード）を使い、複数の視覚化仕様を同時に生成・比較できる。
インタラクティブ操作…ドラッグ＆ドロップ等で encoding チャネルにフィールドを割り当て、リアルタイムで可視化を更新。

使い方

1. データを読み込む…CSV 等の表形式データをロードし、フィールド一覧を確認。
1. 可視化を指定する…エンコーディングチャネル（例：x 軸、y 軸、色など）にフィールドをドラッグして視覚化を作成。
1. 探索支援を使う…Wildcards を使って複数ビューを同時生成したり、関連ビューを推薦してデータを広く探索。
1. 結果を調整／比較…推薦された視覚化や生成されたチャートを比較しながら、分析を深める。

データ形式

表データ(CSV、TSV)
JSON

Word Cloud

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Word Cloud

日本語に特化したWord Cloud

word-cloud.dataviz.jp

どんなツールか？

Word Cloud は、テキストデータ内の単語の出現頻度を視覚化し、頻度の高い語を大きく表示する「ワードクラウド」をブラウザ上で作成できる Web ツールです。

ワードクラウドは、文章やテキストデータの主要なキーワードを視覚的に直感的に把握するための可視化手法として使われます。単語の大きさや色で出現頻度の傾向を表現します。

機能

テキスト入力／アップロード…テキストファイルやテキストデータを入力してワードクラウドを生成します。
頻度解析…単語の出現頻度をカウントし、頻度に応じて単語サイズを調整します。
ワードクラウド表示…単語の頻度に応じた大きさ・配置でワードクラウドを描画します。
カスタマイズ…フォントサイズの最大/最小設定や、色・レイアウトの調整などが可能（一般的な実装として）。
出力／保存…生成結果を画像や SVG として保存できるインターフェースを提供します。

使い方

1. テキストデータを入力／アップロード…テキストエリアやファイルアップロードを使って文章データを読み込みます。
1. ワードクラウドを生成…「生成」ボタン等をクリックすると、テキスト内の単語頻度に基づいてワードクラウドが表示されます。
1. カスタマイズ…フォントサイズ・色・レイアウト設定等をパラメータを調整します。
1. 結果の保存…生成されたワードクラウドを PNG／SVG や CSV でダウンロードして利用できます。

データ形式

入力形式
- テキスト（TXT）やコピー＆ペースト可能な文字列：ツール上で直接入力する形式。
- CSV / TXT ファイル：単語リストやテキストデータを含むファイルをアップロード可能（一般的なワードクラウドツールとして想定）。
出力形式
- 画像（PNG / SVG）：視覚化されたワードクラウドを画像として保存できます。
- CSV：形態素解析したトークン（単語）と頻度のデータを保存できます。

QuickChart UI

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

QuickChart UI

URLだけでチャート画像生成

quickchart.dataviz.jp

どんなツールか？

QuickChart は、URLのみで、指定したデータとチャート定義（Chart.js 形式）から静的なチャート画像（PNG 等）を即座に生成できるツールです。

サーバー-サイドやメール、レポート、ドキュメントなど JavaScript 実行環境が無くても画像として埋め込み可能なグラフを作れるのが特徴です。

本ツールはそのためのURL指定をGUIで手軽に行えるツールです。

機能

チャート画像生成…URL のパラメータやクエリ文字列で指定した設定から、棒グラフ、折れ線、円グラフなどの静的なチャート画像を生成。
URL だけで完結…複雑なライブラリの導入なしに、URL のクエリだけでグラフを作成可能。
画像として利用可能…生成したチャートは PNG 等の画像として出力されるため、ウェブページ、レポート、メールに埋め込みやすい。

使い方

1. URL のクエリパラメータにチャート設定を JSON 形式で指定。
1. 生成された画像 URL をそのまま使う／ダウンロードする。

データ形式

表データ(CSV)