このページは Cloud Translation API によって翻訳されました。

データポータルで JavaScript のカスタムビジュアリゼーションを作成する

Google データポータルでは、データを視覚化する美しいインタラクティブなダッシュボードを無料で無料で作成できます。ユーザーは、さまざまなソースからデータを取得し、データポータルで完全な編集機能や共有機能を備えたレポートを作成できます。データポータルダッシュボードの例を次に示します。

（こちらをクリックして、データポータルでこちらのレポートのサンプルを表示します）。

データポータルには、折れ線グラフ、棒グラフ、円グラフ、散布図など、組み込みのグラフの種類が用意されています。コミュニティビジュアリゼーションを使用すると、データポータルでカスタムの JavaScript ビジュアリゼーションを構築して使用できます。コミュニティビジュアリゼーションは、データポータルのデベロッパーコミュニティで作成されます。デベロッパーであれば誰でも作成できます。コミュニティビジュアリゼーションを他のユーザーと共有して、各自のデータで使用できるようにすることもできます。

学習内容

この Codelab では、以下のことを学びます。

Google データポータルのコミュニティ可視化の仕組み
ds-component ヘルパーライブラリを使用してコミュニティビジュアリゼーションを作成する方法
コミュニティビジュアリゼーションをデータポータルのダッシュボードに統合する方法

必要なもの

この Codelab を完了するには、次の準備が必要です。

インターネットアクセスとウェブブラウザ
Google アカウント
Google Cloud Platform ストレージバケットへのアクセス
JavaScript に精通している

この Codelab を選んだ理由は何ですか。

一般的なデータの可視化に興味がある。

データポータルについて詳しく知りたい

コミュニティビジュアリゼーションを独自に構築したい

データポータルを別のプラットフォームと統合しようとしています。

Google Cloud ソリューションに興味があります。

この Codelab/チュートリアルの利用方法をお選びください。

スキムのみ

読んで演習を行う

データポータルの使用経験についてお答えください。

聞いたことがない

知らないが、使わない

ときどき使用します。

定期的に使用している。

私はエキスパートユーザーです。

背景情報として最も近いものを選択してください。

デベロッパー

デザイナー / UX スペシャリスト

ビジネス / データ / 財務アナリスト

データサイエンティスト / データエンジニア

マーケティング / ソーシャルメディア / デジタルアナリティクスエキスパート

その他

どのような JavaScript 可視化ライブラリに興味がありますか？

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

Other

次のページに移動して、アンケート情報を送信してください。

データポータルのコミュニティビジュアリゼーションを使用すると、カスタム JavaScript ビジュアリゼーションを作成して、ダッシュボードに組み込むことができます。

この Codelab では、1 つのディメンション、1 つの指標、棒グラフのスタイルをサポートする棒グラフのコミュニティビジュアリゼーションを作成します。

コミュニティビジュアリゼーションを作成するには、後のステップで作成する Google Cloud Platform ストレージバケットに次のファイルが必要です。

ファイル名	ファイル形式	目的
manifest.json*	JSON	ビジュアル表示と他のリソースの場所に関するメタデータを提供します。
myViz.json	JSON	[プロパティ] パネルのデータとスタイル設定オプションを指定します。
myViz.js	JavaScript	ビジュアリゼーションの表示に必要な JavaScript コードを提供します。
myViz.css（省略可）	CSS	ビジュアル表示のスタイルを指定します。

*マニフェストには必須の名前のみが含まれています。他のファイルの名前は、マニフェストファイルで名前/場所を指定している限り、別の方法で指定できます。

このセクションでは、データ、スタイルの変更、可視化のレンダリングを処理するために必要なコードを JavaScript ファイルに追加します。

可視化ソースを作成する

手順 1: データポータルコミュニティコンポーネント（ライブラリ）から dscc.min.js ファイルをダウンロードし、作業ディレクトリにコピーします。

ステップ 2: 次のコードをテキストエディタにコピーし、ローカルの作業ディレクトリに myVizSource.js として保存します。

myVizSource.js

function drawViz(data) {

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute('width', `${width/2}px`);
  rect.setAttribute('height', `${height/2}px`);
  rect.style.fill =  'blue';

  svg.append(rect);

  document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

最終的な JavaScript ファイルを準備する

ステップ 3: 可視化ヘルパーライブラリ（dscc.min.js）と myVizSource.js ファイルを myViz.js という名前の新しいファイルにコピーして、必要な JavaScript をすべて 1 つのファイルにまとめます。次のコマンドを実行して、ファイルを連結します。可視化コードを更新するたびに、この手順を繰り返します。

Linux/Mac OS 連結スクリプト

cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.js

Windows スクリプト

del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.js

CSS ファイルでは、ビジュアリゼーションのスタイルが定義されます。次のコードをコピーして myViz.css. として保存します。

myViz.css

#myVizTitle {
  color: black;
  font-size: 24px;
  text-align: center;
  margin: 0 auto;
}

ビジュアリゼーション設定 JSON ファイルは、ビジュアリゼーションによってサポートされ、必要とされるデータおよびスタイルの属性を定義します。この Codelab で作成するこのビジュアリゼーションは、1 つのディメンションと 1 つの指標をサポートし、色を選択するには 1 つのスタイル要素が必要です。詳しくは、ディメンションと指標についてをご確認ください。

次のコードをコピーして myViz.json. として保存します。設定可能なプロパティについて詳しくは、設定リファレンスのドキュメントをご覧ください。

myViz.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "barDimension",
          "label": "Dimension",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "barMetric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }
      ]
    }
  ],
  "style": [
    {
      "id": "color",
      "label": "Colors",
      "elements": [
        {
          "type": "FONT_COLOR",
          "id": "barColor",
          "label": "Bar Color",
          "defaultValue": "black"
        }
      ]
    }
  ]
}

ステップ 1: Google Cloud Platform（GCP）プロジェクトを作成する

ステップ 2: GCP バケットを作成する。推奨されるストレージクラスは、Regional です。無料枠の詳細については、Cloud Storage の料金をご覧ください。可視化ストレージに Regional Storage クラスの費用が発生する可能性はほとんどありません。

ステップ 3: [Buckets/] の後、バケット名/ パスを書き留めます。データポータルでは「コンポーネント ID」と呼ばれ、識別とデプロイに使用されます。

マニフェストファイルは、可視化の場所とリソースに関する情報を提供します。ファイル名は「manifest.json」である必要があります。また、前の手順で作成したバケット（コンポーネント ID と同じバケット）に配置する必要があります。

次のコードをテキストエディタにコピーし、manifest.json. として保存します。

マニフェストについて詳しくは、マニフェストリファレンスのドキュメントをご覧ください。

manifest.json

{
  "name": "Community Visualization",
  "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
  "organization": "Data Studio Codelab",
  "supportUrl": "https://url",
  "packageUrl": "https://url",
  "privacyPolicyUrl": "https://url",
  "description": "Community Visualization Codelab",
  "devMode": true,
  "components": [{
    "id": "barChart",
    "name": "Bar Chart",
    "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
    "description": "Bar chart written in d3.js",
    "resource": {
      "js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
      "config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
      "css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
    }
  }]
}

ウェブインターフェースまたは gsutil コマンドラインツールを使用して、manifest.json、myViz.js、myViz.json、myViz.css ファイルを Google Cloud Storage バケットにアップロードします。ビジュアリゼーションを更新するたびに、これを繰り返します。

gsutil upload コマンド

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

ステップ 1: コミュニティビジュアリゼーションのサンプルデータセットの URL をコピーします。

手順 2: データポータルにアクセスし、[新しいレポートを開始] の下にある [空白] をクリックします。

ステップ 3: 右下の [新しいデータソースを作成する] をクリックします。

ステップ 4: Google スプレッドシート コネクタを選択します。

ステップ 5: [URL] 欄に、上記の手順 1 でコピーした Google スプレッドシートの URL を入力します。

ステップ 6: ページの右上にある [接続] をクリックします。

ステップ 7: データソースのヘッダーで [コミュニティビジュアリゼーションのアクセス] をクリックし、[オン] を選択して [保存] をクリックします。

ステップ 7: 表示されたボックスで [レポートに追加] をクリックし、データソースをレポートに追加します。

ステップ 6: ツールバーで、コミュニティビジュアリゼーションボタンをクリックします。プルダウンが開きます。

ステップ 7: 接頭辞 gs:// ( を付けたバケット名（例: gs://community-viz-docs/myViz)）を「マニフェストパス」のテキスト入力欄に貼り付け、「コンポーネント ID」の下に barChart を追加して、[追加] をクリックします。

ビジュアル表示はキャンバスに自動的に描画されます。右側のプロパティパネルには、myViz.json ファイルの要素が反映されています。

この可視化では、1 つのディメンションと 1 つの指標を使用できます。

スタイル要素を 1 つ指定しました。「Bar Color.」というラベルの付いたフォントカラーセレクターをレンダリングします。次のステップでは、このセレクタを使用して可視化に影響を与えます。

このセクションでは、カラーセレクタのスタイル要素を使用してビジュアリゼーションを更新します。

ステップ 1: myVizSource.js ファイル内のコードを以下のコードに置き換えます。

myVizSource.js

function drawViz(data) {

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute('width', `${width/2}px`);
  rect.setAttribute('height', `${height/2}px`);
  rect.style.fill =  fillColor;
  svg.append(rect);

  document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

ステップ 2: 結合された JavaScript ファイルを作成し、可視化ファイルを Google Cloud Storage に再アップロードする。

ステップ 3: コミュニティビジュアリゼーションをテストしたデータポータルのレポートを更新します。

スタイルメニューのセレクタを使用して、長方形の色を変更できるはずです。

このセクションでは、ビジュアリゼーションを更新し、コミュニティビジュアリゼーションのサンプルデータセットのデータを使用して棒グラフを描画します。注: データポータルは、最大 2,500 行のデータを可視化して返します。

ステップ 1: myVizSource.js ファイル内のコードを以下のコードに置き換えます。

myVizSource.js

function drawViz(data) {
  let rowData = data.tables.DEFAULT;

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const padding = { top: 15, bottom: 15 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  const maxBarHeight = height - padding.top - padding.bottom;
  const barWidth = width / (rowData.length * 2);

  // obtain the maximum bar metric value for scaling purposes
  let largestMetric = 0;

  rowData.forEach(function(row) {
    largestMetric = Math.max(largestMetric, row["barMetric"][0]);
  });

  rowData.forEach(function(row, i) {
    // 'barDimension' and 'barMetric' come from the id defined in myViz.json
    // 'dimId' is Data Studio's unique field ID, used for the filter interaction
    const barData = {
      dim: row["barDimension"][0],
      met: row["barMetric"][0],
      dimId: data.fields["barDimension"][0].id
    };

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);

    // normalizes the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    let barX = (width / rowData.length) * i + barWidth / 2;

    // create the "bar"
    let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", barX);
    rect.setAttribute("y", maxBarHeight - barHeight);
    rect.setAttribute("width", barWidth);
    rect.setAttribute("height", barHeight);
    rect.setAttribute("data", JSON.stringify(barData));
    rect.style.fill = fillColor;
    svg.appendChild(rect);

    // add text labels
    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    let textX = barX + barWidth / 2;
    text.setAttribute("x", textX);
    text.setAttribute("text-anchor", "middle");
    let textY = maxBarHeight + padding.top;
    text.setAttribute("y", textY);
    text.setAttribute("fill", fillColor)
    text.innerHTML = barData["dim"];

    svg.appendChild(text);
  });

  document.body.appendChild(svg);
}

// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

ステップ 2: 結合された JavaScript ファイルを作成し、可視化ファイルを Google Cloud Storage に再アップロードする。

ステップ 3: コミュニティビジュアリゼーションをテストしたデータポータルのレポートを更新します。Google スプレッドシートのデータから生成されたラベルのある棒グラフが表示されます。棒の色を変更するには、[スタイル] セレクタバーで選択した色を変更します。

このセクションでは、ビジュアリゼーションを更新し、コミュニティビジュアリゼーションのサンプルデータセットのデータを使用して棒グラフを描画します。

ステップ 1: myVizSource.js ファイル内のコードを以下のコードに置き換えます。

myVizSource.js

// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);

function drawViz(data) {
  let rowData = data.tables.DEFAULT;

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const padding = { top: 15, bottom: 15 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const maxBarHeight = height - padding.top - padding.bottom;
  const barWidth = width / (rowData.length * 2);

  // obtain the maximum bar metric value for scaling purposes
  let largestMetric = 0;

  rowData.forEach(function (row) {
    largestMetric = Math.max(largestMetric, row["barMetric"][0]);
  });

  rowData.forEach(function (row, i) {
    // 'barDimension' and 'barMetric' come from the id defined in myViz.json
    // 'dimId' is Data Studio's unique field ID, used for the filter interaction
    const barData = {
      dim: row["barDimension"][0],
      met: row["barMetric"][0],
      dimId: data.fields["barDimension"][0].id
    };

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);

    // normalizes the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    let barX = (width / rowData.length) * i + barWidth / 2;

    // create the "bar"
    let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", barX);
    rect.setAttribute("y", maxBarHeight - barHeight);
    rect.setAttribute("width", barWidth);
    rect.setAttribute("height", barHeight);
    rect.setAttribute("data", JSON.stringify(barData));
    // use style selector from Data Studio
    rect.style.fill = fillColor;
    svg.appendChild(rect);

    // add text labels
    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    let textX = barX + barWidth / 2;
    text.setAttribute("x", textX);
    text.setAttribute("text-anchor", "middle");
    let textY = maxBarHeight + padding.top;
    text.setAttribute("y", textY);
    text.setAttribute("fill", fillColor)
    text.innerHTML = barData["dim"];

    svg.appendChild(text);
  });

  document.body.appendChild(svg);

  // Get the human-readable name of the metric and dimension

  var metricName = data.fields['barMetric'][0].name;
  var dimensionName = data.fields['barDimension'][0].name;

  titleElement.innerText = metricName + ' by ' + dimensionName;

}

dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

ステップ 2: 結合された JavaScript ファイルを作成し、可視化ファイルを Google Cloud Storage に再アップロードする。

ステップ 3: コミュニティビジュアリゼーションをテストしたデータポータルのレポートを更新します。データから生成され、myViz.css ファイルを使用してスタイルを設定したタイトル付きの棒グラフが必要です。

おめでとうございます。データポータルでコミュニティビジュアリゼーションが作成されました。これで、この Codelab は終了です。次のステップに進みます。

可視化を拡張

ビジュアル表示にインタラクションを追加する
可視化をローカルで行う方法を確認する
使用可能なスタイル要素の詳細を確認し、ビジュアル表示にスタイルを追加する。

コミュニティビジュアリゼーションを最大限に活用

dscc ヘルパーライブラリ、マニフェスト、構成ファイルのリファレンスを確認する。
コミュニティビジュアリゼーションのショーケースにビジュアリゼーションを送信してください。
データポータル用のコミュニティコネクタを作成します。

参考情報

この Codelab では、さらに詳しく学習する際に役立つさまざまなリソースを参照できます。

[リソースの種類]	ユーザー機能	デベロッパー向けの機能
ドキュメント	ヘルプセンター	デベロッパー向けドキュメント
ニュースと最新情報	データポータルでユーザー設定を行う	デベロッパーメーリングリスト
質問する	ユーザーフォーラム	Stack Overflow [google-data-studio] データポータルのデベロッパーフォーラム
動画	YouTube のデータポータル	近日提供予定
例	レポートギャラリー	オープンソースリポジトリ

データポータルで JavaScript のカスタム ビジュアリゼーションを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

学習内容

必要なもの

この Codelab を選んだ理由は何ですか。

この Codelab/チュートリアルの利用方法をお選びください。

データポータルの使用経験についてお答えください。

背景情報として最も近いものを選択してください。

どのような JavaScript 可視化ライブラリに興味がありますか？

可視化ソースを作成する

myVizSource.js

最終的な JavaScript ファイルを準備する

Linux/Mac OS 連結スクリプト

Windows スクリプト

myViz.css

myViz.json

manifest.json

gsutil upload コマンド

myVizSource.js

myVizSource.js

myVizSource.js

可視化を拡張

コミュニティ ビジュアリゼーションを最大限に活用

参考情報

データポータルで JavaScript のカスタムビジュアリゼーションを作成する

コミュニティビジュアリゼーションを最大限に活用