ピックアップ

使いやすい!英ガーディアン採用のグラフ埋め込みツール「Datawrapper」

英ガーディアンのDATA BLOGでは、「Datawrapper」を使ってグラフを埋め込んでいます。

使用イメージ

ガーディアンのこちらの記事で実際につぎのようにグラフを埋め込んでいます。

ガーディアン データジャーナリズム Datablog グラフ

埋め込みイメージ

グラフは埋め込みコードが用意されていて、簡単に他サイトで埋め込めます。

Datawrapper

ガーディアンのグラフ埋め込みは、「Datawrapper」を使っています。
ドメインは「.de」で、ドイツ発のサービス。
ウェブ上でグラフ生成・管理ができ、埋め込み機能を提供しています。

Datawrapper グラフ 埋め込み 1

Datawrapperで表現できるグラフ

Datawrapperでは、主につぎの4種類のグラフ、表の生成ができます。
・棒グラフ
・折れ線グラフ
・円グラフ
・ドーナツグラフ

使い方はつぎの通り。

Datawrapperの使い方

アカウント未取得の場合は、最初にアカウントを作成します。
埋め込み機能は、アカウント作成時に受け取るメールからアクティベートしておかないと利用できません。

グラフを生成し、埋め込むまでは大きく4つのステップです。

1.データアップロード(Upload Data)

テキストエリアにデータをペーストするか、CSVファイルをアップロードします(日本語は文字化け)。

世界銀行が公開しているGDPデータをもとにCSVを作成し、アップロードしてみました。

datawrapper グラフ 埋め込み 2

2.データ調整(Check & Describe)

読み込んだデータを調整したり、ソースのクレジットを追加します。
タイトル行や縦列の設定、数値データに3桁ごとにカンマを入れるか、など。

datawrapper グラフ 埋め込み 3

3.視覚表現の決定とオプション指定(Visualize)

どのグラフで表現するのかをまず決めます。

datawrapper グラフ 埋め込み 4

つづいて、グラフサイズ、タイトル、凡例を表示する位置、グラフの色などを指定します。

データごとにグラフの色を変えるには、「or difine custom colors」ボタンから行います。

datawrapper グラフ 埋め込み 5

4.グラフ完成と埋め込みコード取得(Publish & Embed)

これで完成。埋め込みサイズを指定して、コード取得します。

datawrapper グラフ 埋め込み 6

完成したグラフ

生成したグラフをこの記事に埋め込んでみます。

グラフの管理

グラフの修正や複製などは、My Chartsメニューから。

datawrapper グラフ 埋め込み 7

生成から管理まで、操作はとても簡単。
インタラクティブなグラフがプログラミングなしで実装できてしまいます。
Datawrapper

プロフィール

櫻田潤

櫻田 潤

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

19 Jun, 2013