このページは 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

その他

次のページに進み、アンケート情報を送信します。

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

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

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

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

*マニフェストは、名前が必須の唯一のファイルです。他のファイルは、マニフェストファイルで名前と場所が指定されていれば、別の名前を付けることができます。

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

ビジュアリゼーションのソースを記述する

ステップ 1: データポータルコミュニティコンポーネント（dscc）のライブラリから 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 ストレージクラスの費用が発生する可能性は低いでしょう。

ステップ 3: バケット/の後のセクションから始まるバケット名/ パスをメモします。データポータルでは、これは「コンポーネント 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 アップロードコマンド

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 つのスタイル要素が指定され、「バーの色」というラベルの付いたフォントカラーセレクタがレンダリングされました。次のステップでは、このセレクタを使用して可視化に影響を与えます。

このセクションでは、カラーセレクタスタイル要素を使用して、可視化を更新します。

ステップ 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 で取り上げた題材を掘り下げるのに役立ちます。

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

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

学習内容

必要なもの

この Codelab を選んだ理由をお聞かせください。

この Codelab/チュートリアルをどのように使用する予定ですか？

データポータルの使用経験についてお聞かせください。

ご自身のバックグラウンドに最も当てはまるものをお選びください。

興味のある JavaScript 可視化ライブラリは何ですか？

ビジュアリゼーションのソースを記述する

myVizSource.js

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

Linux/Mac OS の連結スクリプト

Windows スクリプト

myViz.css

myViz.json

manifest.json

gsutil アップロード コマンド

myVizSource.js

myVizSource.js

myVizSource.js

可視化を拡張する

コミュニティ ビジュアリゼーションをさらに活用する

参考情報

データポータルでカスタム JavaScript 可視化を作成する

gsutil アップロードコマンド

コミュニティビジュアリゼーションをさらに活用する