月と東京タワー

Piktochartの使い方 半円ドーナツグラフで目標と進捗状況を表示する

   

初心者のインフォグラフィック習得過程を晒しながら使い方を解説しています。
前回はデータをビジュアライズするMAPをを作りました。
Piktochartの使い方 情報を地図でビジュアライズ

今度は、進捗状況を示すグラフを作ってみます。
単純な横棒グラフでもいいのですが、Piktohartに面白い雛形があったので、それを使ってちょっと変わったもの作りたいと思います。

「競合する数人に共通する明確な目標地点があり、現在はそれぞれどこまで進んでいるか」をグラフ化します。
具体的には、アメリカ大統領選の予備選指名レースの数値を使います。

党の指名代表に選出されるのに必要な代議員数(過半数)と、各候補の現在までの獲得大議員数(民主党編)。コレで行きます。

テンプレートを選ぶ

今回も何もデザインされていないプレーンなテンプレートから作ります。

Piktochartにログインしたら、「Create your own infographic」というテンプレートにマウスオーバーして、「CREATE」をクリック。

TOOLSでCHARTを選択する

左側の「TOOLS」ボタンをクリックすると「CHARTS」「MAPS」「VIDEOS」と3つのアイコンが表示されます。

CHARTS選択

TOOLS」をクリックして

右の編集フィールドから編集するBLOCKをクリックでアクティブにした状態で、左「CHARTS」を押します。

グラフの種類:Swatch選択

サンプルデータの入ったチャート作成画面が出てくるので、左下の「Swatch」というアイコンを選んでください。

データを入力

右のエクセル上のセルに値を入力します。
数値を入れていくと都度左のグラフが変化していくので自然に分かりますが、グラフは上の行ほど外側に表示されます。ここは好みで。

目標となる過半数の代議員数と各候補の進捗のグラフにしたいので、一番内側に過半数である2,383を、外側をヒラリーとサンダースのここまでの獲得代議員数で囲むようにします。

ここでは、外部データをインポートしてグラフを作ることも出来ます。

エクセルデータ取り込み、Googleスプレッドシート連携それぞれの方法は、こちらに
データをインポート

このグラフを目指す形に整えます。

グラフを整形する

データを入力したら、右上「Settings」を押してください。
グラフの設定画面に移動します。

各項目を好みの設定に変更します。

グラフの形ですが、左側に出ている通り、360度のドーナツが重なった形にすることも出来ます。

今は半円にします。

右側にある「Advanced」で「Maximun」の数値を変更します。
半円で過半数にしたいので、Maximumを過半数の倍にします。強制的に半分しか表示できなくするわけです。

過半数の2,383×2=「4,766」と入力します。

グラフの下にスペースが空きすぎるので凡例を上に(「Legend Position」を「Top」に変える)移動させて、これでグラフは完成です。

右上「INSERT CHART」もしくは「UPDATE CHART」を押して、テンプレートにグラフを貼り付けます。

インフォグラフィックの調整

サイズ調整

貼り付けたテンプレート上でグラフを囲むように出現する枠をドラッグしてサイズを調整します。

不要なBLOCKの削除

下につながっている不要なBLOCKを削除します。方法はこちらに
不要なBLOCKを削除する

インフォグラフィックに名前をつけて後は公開・共有するだけです。

インフォグラフィックを公開

公開、共有の手順はこちらに
Piktochartの使い方 インフォグラフィックのダウンロード・公開・共有

共和党のものも合わせてこんな風になりました。Web公開したインフォグラフィックはこう表示されます。マウスオーバーしてみてください。

スマホで見ると凡例が小さすぎて見えないので、Legendを消して手で凡例作りました。(フォントサイズの変更は無理だそうです)ちょっとかっこわるーになってますが、見えないよりはマシでしょう。

Piktochartのサーバーに自動で保存されています。編集したいときはPiktochartにログインして「My Saved Piktocharts」から作ったインフォグラフィックを探してください。

スポンサーリンク


 - Infographics