ピックアップ

SVG、PNG書き出しできるフリーのビジュアライゼーション・ツール

簡単な手順でビジュアライゼーションの生成、画像データ書き出しや埋め込みができるWebアプリ「RAW」を紹介します。

ツールを使って、生成できるビジュアルは6種類。

raw ビジュアライゼーション 1

利用手順を見てみましょう。

1.データの準備

ビジュアライゼーションしたいデータをカンマ区切りで準備します。
今回は、JR東日本サイトで公開している利用者(1日平均)の多い駅トップ50データ(2012年)を編集して使います。

2.データのペースト

カンマ区切りのデータを専用フォームに貼り付けます。
一行目には項目名。

raw ビジュアライゼーション 2

3.デザイン・レイアウトの選択

6種類のレイアウトから1つを選びます。
ここでは、「Treemap(ツリーマップ)」表現を選びました。

raw ビジュアライゼーション 3

4.データ項目と表現要素の結びつけ

「Treemap」の場合は、3つの表現要素が用意されています。
利用者(1日平均)を「SIZE(サイズ)」に、駅名を「COLOR(色)」にドラッグ&ドロップでセッティングします。

最後の一つ、「HIERARCHY(階層)」では、各駅をどうくくるかをセッティングします。
データには東京都にある駅、神奈川県にある駅などが混在しているので、駅所在地で階層構造を作るようにします。

raw ビジュアライゼーション 4

どのデザイン・レイアウトを選ぶかによって、ここで設定する表現要素が異なります。

5.レイアウトの調整

色や余白、サイズの調整を行います。

raw ビジュアライゼーション 5

6.書き出し・埋め込み

生成したビジュアライゼーションは、SVG、PNG形式で画像書き出しができます。
また、HTML埋め込みコードも用意されています。

データのJSON書き出し機能もあります。

完成イメージ

raw ビジュアライゼーション 6

SVGで書き出して、Illustratorで一手間くわえると良くなりそう。

東京の駅、神奈川の駅、千葉の駅、埼玉の駅で大きく色分けしたり、1日平均利用者数のランキング順位ナンバーを記載するなど。

ビデオ・チュートリアル

ツールの技術背景

Javascriptライブラリ「d3.js」を使用。

プロフィール

櫻田潤

櫻田 潤

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキング運営開始。2014年12月よりNewsPicks編集部でインフォグラフィックス・エディターとして記事執筆。研修・インベント講師や書籍執筆も行なっている。著書に『たのしいインフォグラフィック入門』ほか。

14 Nov, 2013