使用dscc-gen创建Data Studio社区可视化

Google Data Studio可让您免费构建具有精美数据可视化效果的动态交互式仪表板。社区可视化是Data Studio的一项功能,允许您使用与Data Studio报表集成的JavaScript构建自定义可视化。

您将学到什么

在此代码实验室中,您将学习:

  • Google Data Studio社区可视化如何工作
  • 如何使用我们的命令行模板工具构建社区可视化
  • 如何使用JavaScript可视化库来构建社区可视化
  • 如何将社区可视化集成到Data Studio仪表板中

你需要什么

要完成此代码实验室,您需要:

  • 访问互联网,Web浏览器和终端,以及您喜欢的文本编辑器
  • 一个Google帐户
  • 访问Google Cloud Storage存储桶
  • 熟悉Javascript,Node.js和命令行

该代码实验室假定:

  • 您已经建立了社区可视化(TODO链接第一个代码实验室)
  • 熟悉Google Cloud Storage

首先,请点击以下内容制作此报告的副本14575f934e800122.png在右上角。遍历代码实验室时,请在另一个选项卡中将其保持打开状态。

您为什么选择此代码实验室?

我通常对数据可视化感兴趣。我想了解更多有关Data Studio的信息我想建立自己的社区可视化。我正在尝试将Data Studio与另一个平台集成。我对Google Cloud解决方案感兴趣。

您打算如何使用此代码实验室/教程?

阅读并完成练习仅略过

您如何评价Data Studio的体验?

从来没有听说过我知道它是什么,但我不使用它。我经常使用它。我是专家用户。

什么最能描述您的背景?

开发者业务/数据分析师数据科学家/数据工程师金融分析师市场营销/社交媒体/数字分析专家业务分析师设计师其他

移至下一页以提交调查信息。

dscc根

dscc-gen是一个命令行工具,可为社区可视化和社区连接器提供有用的模板和工作流。社区可视化模板提供了有效的可视化和工作流程,使您可以立即查看可视化代码的更改,以及用于验证,构建和部署可视化的脚本。

设置

dscc-gen在部署脚本中使用gsutil,并在npm和webpack中使用它们来构建社区可视化JavaScript代码。

  1. 在本地计算机上安装npm
  2. 浏览gsutil快速入门并设置一个Google Cloud Storage存储桶
  3. 导航到要在其中找到项目的本地目录

打开一个终端并运行以下命令:

npx @google/dscc-gen viz

dscc-gen将提示您输入项目名称,“ dev” GCS存储位置和“ prod”存储位置。使用gs协议输入位置作为URI,例如gs://my-gs-project/example-dev 。 “位置”可以是Cloud Storage存储桶或该存储桶中的文件夹。两个存储位置必须不同。该工具将验证您是否有权访问您输入的值。如果位置不存在,将为您创建位置。

dscc-gen创建新的社区可视化后,它将打印有关如何入门的说明。您的终端将如下所示(您的输入以粗体斜体显示):

$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...

Created new community viz: barchart

cd barchart and npm run start to begin working on your viz!

您将在src/编辑文件-特别是index.jsindex.jsonindex.css编写可视化文件。

dist/的文件使您可以在浏览器中本地预览可视化效果。 webpack.config.js用于在本地运行可视化。 README.md提供了模板文件和命令的概述。

按照建议的说明在终端中运行以下命令:

cd <folder name>

npm run start

将打开一个浏览器,并显示一个如下所示的网页:

2f219993dfb676d4.png

在下一步中了解更多信息。

dscc-gen可视化模板随附有效的可视化文件,以及有关如何使用该模板的说明。主要功能如下:

更新您的本地消息:示例消息已包含在模板中,但可能无法反映您要支持的用例。您应该下载反映要构建的可视化效果的样本数据。

本地开发工作流程:使用“更新本地数据”中的数据在本地编写和测试代码。

构建和部署可视化:构建代码并将其上传到Google Cloud Storage存储桶。

在Data Studio中加载可视化工具将可视化效果添加到Data Studio报表中。

配置文件是您(即Viz开发人员)与使用可视化文件的报表编辑器之间的合同。它定义了将可视化文件加载到Data Studio后可用的选项。

对于此条形图可视化,配置将具有一个维度和一个度量,以及一个样式元素,该样式元素允许报表编辑器更改条形图样式。

src/index.json的内容替换为以下内容。确保包括所有括号。如果要重新键入,请确保注意方括号和花括号以及嵌套结构之间的区别。

index.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "dimension",
          "label": "Dimensions",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "metric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }        
      ]
    }
  ],
  "style": [
    {
      "id": "barStyling",
      "label": "Bar Styles",
      "elements": [
        {
          "id": "barColor",
          "label": "Bar Color",
          "type": "FILL_COLOR",
          "defaultValue": {
            "color": "#1E555C"
          }
        }
      ]
    }
  ]  
}

要更新本地存储的数据,请运行:

npm run update_message

您的终端应如下所示:

barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object

Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev

此命令将可视化部署到Data Studio,该可视化将接收到的数据打印到本地Viz。脚本将打印出可视化的部署位置(上面已突出显示)。您将使用此位置在Data Studio中加载可视化文件。

要加载可视化,请打开您先前复制的报告。

  1. 转到“编辑报告”
  2. 单击工具栏中的“社区可视化和组件”

e927f8fbd49979a5.png

  1. 点击“探索更多”

c236b0cfcc68ce2c.png

  1. 点击“建立自己的可视化文件”
  2. 输入清单路径(终端中已打印出gs://...位置),然后单击“提交”

26588c6c8382a3b.png

  1. 点击呈现的卡片,将其添加到您的报告中

可视化效果应呈现如下所示的JSON:

a08a61345fe12837.png

右键单击并选择所有内容,以复制整个消息,然后将src/localMessage.js的内容替换为刚才复制的内容。保存文件。

在浏览器中本地运行的可视化效果将不再显示,如果您在控制台中查看,将会看到错误。

首先,运行以下命令以将d3.js添加为依赖项。

npm install d3

然后,将src/index.js替换为以下代码。上一步的更改以粗体显示。

src / index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;

const drawViz = (message) => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]));

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

如果本地服务器仍在运行,请检查浏览器。现在,本地开发网页应显示一个条形图,如下图所示。

2cb9f9d8d1bd2063.png

可视化清单包含有关可视化的元数据,以及可视化JavaScript,配置和CSS的位置。更新清单中的值-它们将用于提供有关可视化的最终用户信息。

编辑src / manifest.json以描述您的可视化。示例清单如下。

src/manifest.json

{
  "name": "Bar Chart",
  "organization": "[My name]",
  "description": "Bar chart",
  "logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
  "organizationUrl": "https://github.com/googledatastudio/",
  "supportUrl": "http://github.com/googledatastudio/community-visualizations",
  "privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
  "termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
  "packageUrl": "",
  "devMode": "DEVMODE_BOOL",
  "components": [
    {
      "id": "Bar chart",
      "name": "Bar chart",
      "description": "My first Community Visualization",
      "iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
      "resource": {
        "js": "YOUR_GCS_BUCKET/index.js",
        "config": "YOUR_GCS_BUCKET/index.json",
        "css": "YOUR_GCS_BUCKET/index.css"
      }
    }
  ]
}

src/index.js ,将const LOCAL更改为“ false”。浏览器中的可视化文件应停止工作。更改后的代码行以粗体显示。该布尔值配置代码是否应使用“本地”数据文件或从Data Studio接收的数据。

src/index.js (abridged)

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;

const drawViz = (message) => {...}

然后,在您的终端中运行:

npm run build:dev
npm run push:dev

build:dev命令将您的JavaScript依赖项捆绑到未压缩的输出中,并替换清单中的值以禁用缓存并指向您之前配置的“ dev”存储桶。

push:dev命令将您的可视化资源上载到在步骤1中配置的“ dev”存储桶,并将该存储桶位置打印到控制台。

刷新Data Studio报表。您应该会看到一个条形图。尝试在属性面板中更改数据和样式选项。更改数据将更改条形图。但是,条形样式选择器尚不可用。

要在本地编辑代码,请首先将src/index.js的const LOCAL变量更新为true 。然后,添加一个名为styleVal()的新函数,并更新drawViz()中的代码。您的src / index.js应该如下所示:

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;

// parse the style value
const styleVal = (message, styleId) => {
  if (typeof message.style[styleId].defaultValue === "object") {
    return message.style[styleId].value.color !== undefined
      ? message.style[styleId].value.color
      : message.style[styleId].defaultValue.color;
  }
  return message.style[styleId].value !== undefined
    ? message.style[styleId].value
    : message.style[styleId].defaultValue;
};

const drawViz = message => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // get the user-selected bar color
  let barColor = styleVal(message, "barColor");

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]))
    .attr("fill", barColor);

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .attr("fill", barColor)
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

保存src / index.js,然后返回到本地浏览器会话。看到它在本地运行,然后再次将const LOCAL更改为false

通过运行以下命令将更新的文件上传到Google Cloud Storage:

npm run build:dev
npm run push:dev

刷新您的Data Studio报告。您现在应该可以更改条形的颜色。

fd4e436a6e8dd58b.gif

产品部署

对可视化感到满意后,请确保src/index.js const LOCAL为false,然后运行。

npm run build:prod
npm run push:prod

这会将您的文件部署到您的“ prod” GCS存储桶位置。此外,将启用缓存,并将适当缩小捆绑的JavaScript。

像以前一样,部署的位置将打印在控制台中。使用此“清单路径”将您的“产品”可视化效果加载到Data Studio报表中。

恭喜你!您已经使用dscc-gen工具构建了第一个社区可视化。

扩展可视化

利用社区可视化做更多的事情

额外资源

您可以访问以下各种资源,以帮助您更深入地了解此代码实验室中介绍的内容。

资源类型

用户功能

开发人员功能

文献资料

帮助中心

开发人员文件

新闻与更新

Data Studio中注册>用户设置

开发者邮件列表

问问题

用户论坛

堆栈溢出[google-data-studio] Data Studio开发人员论坛

影片

YouTube上的Data Studio

即将推出!

例子

报告库

开源资料库