![InteractiveData_overview_xkBAYnb.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_overview_xkBAYnb.original.jpg)
レッスンの概要
![InteractiveData_overview_MJCCgFQ.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_overview_MJCCgFQ.original.jpg)
自分のストーリーを伝える可視化を構築する方法について学ぶ。
Data Studioは、さまざまなソースから取得したデータによってリアルタイムに更新される、対話型の可視化を構築するための強力なツールです。ジャーナリズムの分野では、Data Studioを使うとデータによってストーリーを伝えることができ、ストーリーの表現方法を自在に選択できます。これらの可視化により、ユーザーはさまざまな観点からストーリーと対話することができます。
- Google スプレッドシートをData Studioに接続する。
- データを編集する。
- 折れ線グラフを作成する。
- テーブルグラフを追加する。
- 可視化のデザインを変更する。
- 対話型の可視化を埋め込む。
その他のデータジャーナリズムのレッスンについては、次のURLをご覧ください。
https://newsinitiative.withgoogle.com/training/course/data-journalism
![InteractiveData_overview_MJCCgFQ.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_overview_MJCCgFQ.original.jpg)
Google スプレッドシート をData Studioに接続する。
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step1_hzh4EhH.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step2_k3EkzqD.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step3_T3yagnz.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step4_nQq4b0t.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step5_nKUew5M.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
始める前に、訓練センターでのレッスン「Google スプレッドシート :インターネットからデータを収集する」、「Google スプレッドシート:データをクリーニングする」を完了していて、同じアカウントでログインしていることを確認してください。これらのレッスンで、Wikipediaの記事から作成したデータシートをこの可視化のレッスンで使います。
datastudio.google.com に移動して、+アイコンの付いた空の四角形をクリックして新しいレポートの作成を開始します。
Data Studioでは、可視化は「レポート」と呼ばれます。 Google Sheetをこのレポートに接続するには、右下から新しいデータソースの作成を選択します。
メニューがスライドアップして、データを取得できるサービスが表示されます。Google スプレッドシートまでスクロールして選択をクリックします。
検索ボックスに、Googleドライブアカウントに関連付けられているすべてのGoogle Sheetが表示されます。(Google Data Studioを初めて使う場合は、Google Driveアカウントへのアクセス許可を付与する必要があります)データが保存されているスプレッドシートとそれに関連付けられているワークシートを選択します。
すべてのオプションボックスをチェックマークが付いていたままにして、接続をクリックします。
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step1_hzh4EhH.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step2_k3EkzqD.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step3_T3yagnz.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step4_nQq4b0t.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
![InteractiveData_Connecting_Google_Sheets_with_Data_Studio_step5_nKUew5M.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_Connecting_Google_Sheets_with_D.original.jpg)
データを編集する。
![INteractivedata_Editing_your_data_step1_M4jySkY.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step1_M4jySkY.original.jpg)
![INteractivedata_Editing_your_data_step2_kxwEXDf.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step2_kxwEXDf.original.jpg)
![INteractivedata_Editing_your_data_step3_2ljEo6p.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step3_2ljEo6p.original.jpg)
![INteractivedata_Editing_your_data_step4_IPgzw7p.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step4_IPgzw7p.original.jpg)
Editing your data
可視化の名前を変更しましょう。無題レポートと表示されている左上隅をクリックします。それに対して「世界で最も興行収益を上げている上位50の映画」という名前を付けましょう。
種類で、5行目のデータを数値から日付と時刻> 年(YYYY)に変更します。既に年(YYYY)に設定されている場合は、そのままにします。
右上の青いボタン、レポートに追加を選択します。ポップアップする同じオプションをもう一度クリックします。
可視化を幅630ピクセル、高さ800ピクセルに設定しましょう。任意の場所をクリックして、キャンバスサイズセクションにこれらの数字を入力します。
![INteractivedata_Editing_your_data_step1_M4jySkY.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step1_M4jySkY.original.jpg)
![INteractivedata_Editing_your_data_step2_kxwEXDf.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step2_kxwEXDf.original.jpg)
![INteractivedata_Editing_your_data_step3_2ljEo6p.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step3_2ljEo6p.original.jpg)
![INteractivedata_Editing_your_data_step4_IPgzw7p.jpg](https://storage.googleapis.com/media-newsinitiative/images/INteractivedata_Editing_your_data_step4_IPgzw7p.original.jpg)
折れ線グラフを作成する。
![interactivedata_Creating_a_line_chart_step1_lge78At.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step1_lge.original.jpg)
![interactivedata_Creating_a_line_chart_step2_Royn4nY.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step2_Roy.original.jpg)
![interactivedata_Creating_a_line_chart_step3_wlQtE19.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step3_wlQ.original.jpg)
![interactivedata_Creating_a_line_chart_step4_Ol5uUlm.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step4_Ol5.original.jpg)
![interactivedata_Creating_a_line_chart_step5_UJKQdi6.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step5_UJK.original.jpg)
![interactivedata_Creating_a_line_chart_step6_NLMDngK.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step6_NLM.original.jpg)
ある年の世界全体の総額を示す対話型折れ線グラフを追加します。折れ線上の任意の年をクリックすると、テーブルが表示され、最上位の映画を総収益額が最高のものから最低のものへの順に一覧で表示します。
まず、四角形ツールを選択して、キャンバス上部でマウスカーソルをドラッグします。テキストツールを使ってタイトルを追加します。右側のペインを使ってテキストの書式を設定します。
グラフの追加に移動して滑らかな折れ線グラフをクリックします。
タイトルの下にうまく収まるようにサイズを変更しますが、次のグラフ用にスペースを残しておきます。
折れ線グラフのサイズ、メトリック、並び順を変更するには、そのグラフをダブルクリックします。サイズについては、年をドラッグアンドドロップしてタイトルと置き換えます。次に、メトリックを世界全体の総額に置き換えます。
並べ替えで、世界全体の総額をクリックして、次に年をクリックします。
並べ替えオプションを昇順に変更します。下部に対話というセクションが表示されます。フィルターの適用を選択します。これにより、折れ線グラフをクリックするたびに、テーブルをフィルター処理するようになります。
![interactivedata_Creating_a_line_chart_step1_lge78At.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step1_lge.original.jpg)
![interactivedata_Creating_a_line_chart_step2_Royn4nY.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step2_Roy.original.jpg)
![interactivedata_Creating_a_line_chart_step3_wlQtE19.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step3_wlQ.original.jpg)
![interactivedata_Creating_a_line_chart_step4_Ol5uUlm.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step4_Ol5.original.jpg)
![interactivedata_Creating_a_line_chart_step5_UJKQdi6.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step5_UJK.original.jpg)
![interactivedata_Creating_a_line_chart_step6_NLMDngK.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Creating_a_line_chart_step6_NLM.original.jpg)
テーブルグラフを追加する。
![interactivedata_Adding_a_table_chart_step1_GzJx07e.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step1_GzJx.original.jpg)
![interactivedata_Adding_a_table_chart_step2_sHu4pMg.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step2_sHu4.original.jpg)
![interactivedata_Adding_a_table_chart_step3_dYnqan8.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step3_dYnq.original.jpg)
![interactivedata_Adding_a_table_chart_step4_6awKsar.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step4_6awK.original.jpg)
![interactivedata_Adding_a_table_chart_step5_lc2JHx7.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step5_lc2J.original.jpg)
Adding a table chart
グラフの追加> テーブルグラフの順に選択します。リストの最初の10行が表示されるようにサイズを変更します。
このテーブルに、3つのメトリックを次の順序で設定しましょう:年、ランク、世界全体の総額。メトリックに移動して、利用可能なフィールドからドラッグするか、メトリックの追加をクリックして、これらのフィールドを追加します。
次に、スタイル>テーブルの色の順に移動して、ヘッダーの色を濃い灰色に変更します。
テーブルフッターに移動してページネーションの表示のチェックマークを外します。
これで、データソースを引用してグラフの使用方法を説明するテキストを追加できるようになりました。テキストを選択してテーブルの下部に追加します。
![interactivedata_Adding_a_table_chart_step1_GzJx07e.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step1_GzJx.original.jpg)
![interactivedata_Adding_a_table_chart_step2_sHu4pMg.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step2_sHu4.original.jpg)
![interactivedata_Adding_a_table_chart_step3_dYnqan8.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step3_dYnq.original.jpg)
![interactivedata_Adding_a_table_chart_step4_6awKsar.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step4_6awK.original.jpg)
![interactivedata_Adding_a_table_chart_step5_lc2JHx7.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Adding_a_table_chart_step5_lc2J.original.jpg)
可視化のデザインを変更する。
![interactivedata_Making_design_changes_in_your_visualization_step1_WgJZmhL.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.jpg)
![interactivedata_Making_design_changes_in_your_visualization_step2_6mo3grr.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.jpg)
![interactivedata_Making_design_changes_in_your_visualization_step3_3Tnk19X.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.jpg)
![interactivedata_Making_design_changes_in_your_visualization_step4_F6VE4zU.png](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.png)
可視化をカスタマイズするのに使用できるデザイン要素とテキストについて、いくつかの異なる種類を見てみましょう。
「詳細を見るにはスクロールしてください!」などの方向性のあるテキストを追加するには、テキストをクリックしてメッセージを入力します。
いつでも、表示をクリックして、可視化をプレビューできます。 表示モードと編集モードを切り替えるには、もう一度クリックするだけです。
表示モードになっているときは、以下の折れ線とテーブル内の任意のポイントをクリックすると、その年の上位50の映画が自動的に表示されます。
表示 モードでは、タイトル、折れ線グラフ、テーブルグラフなど、作成した可視化の全体を確認することもできます。
![interactivedata_Making_design_changes_in_your_visualization_step1_WgJZmhL.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.jpg)
![interactivedata_Making_design_changes_in_your_visualization_step2_6mo3grr.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.jpg)
![interactivedata_Making_design_changes_in_your_visualization_step3_3Tnk19X.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.jpg)
![interactivedata_Making_design_changes_in_your_visualization_step4_F6VE4zU.png](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Making_design_changes_in_your_v.original.png)
対話型の可視化を埋め込む。
![interactivedata_Embedding_your_interactive_visualization_step1_TgIfiPS.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Embedding_your_interactive_visu.original.jpg)
![interactivedata_Embedding_your_interactive_visualization_step2_3p3LvXH.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Embedding_your_interactive_visu.original.jpg)
可視化を電子メールで、またはWebサイトに埋め込めることによって共有できます。
この可視化を他のGSuiteドキュメントと同じ方法で共有します。
この対話型の可視化をWebサイトに埋め込むには、ファイル>レポートの埋め込みの順にクリックします。埋め込みを有効にするボックスにチェックマークを入れ、ページでコードを使います。
![interactivedata_Embedding_your_interactive_visualization_step1_TgIfiPS.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Embedding_your_interactive_visu.original.jpg)
![interactivedata_Embedding_your_interactive_visualization_step2_3p3LvXH.jpg](https://storage.googleapis.com/media-newsinitiative/images/interactivedata_Embedding_your_interactive_visu.original.jpg)
おめでとうございます!
![InteractiveData_overview_IXJEf3a.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_overview_IXJEf3a.original.jpg)
「Data Studio:対話型データの可視化を行う」を終了されました。
引き続きデジタルジャーナリズムのスキルを磨き、Google News Initiative認証に向けて勉強していただくには、トレーニングセンターのWebサイトに移動して、別のレッスンを受けてください。
その他のデータジャーナリズムのレッスンについては、次のURLをご覧ください。
https://newsinitiative.withgoogle.com/training/course/data-journalism
![InteractiveData_overview_IXJEf3a.jpg](https://storage.googleapis.com/media-newsinitiative/images/InteractiveData_overview_IXJEf3a.original.jpg)