1. 簡介
Google 數據分析可讓您免費建立動態互動式資訊主頁，並提供精美的資料視覺化效果。社群視覺化是數據分析的一項功能，可讓您使用 JavaScript 建立自訂視覺化效果，並整合至數據分析報表。
課程內容
在本程式碼研究室中，您將瞭解：
- Google 數據分析社群視覺化功能運作方式
- 如何使用指令列範本工具建構社群視覺化
- 如何使用 JavaScript 視覺化程式庫建構社群視覺化
- 如何將社群視覺化圖表整合到數據分析資訊主頁
軟硬體需求
如要完成這個程式碼研究室，您必須符合以下條件：
- 連上網際網路、使用網路瀏覽器和終端機，以及你慣用的文字編輯器
- Google 帳戶
- Google Cloud Storage 值區的存取權
- 熟悉 JavaScript、Node.js 和指令列
本程式碼研究室假設您：
- 您已建構社群資料圖表 (TODO 連結第一個程式碼研究室)
- 熟悉 Google Cloud Storage
如要開始使用，請按一下右上角的 
，複製這份報表 。請在新分頁中開啟，並在完成程式碼研究室時保持開啟。
2. 簡短問卷調查
你為什麼選擇這個程式碼研究室？
您打算如何使用這個程式碼研究室/教學課程？
您對數據分析的體驗滿意嗎？
以下哪一項敘述最符合您的背景？
前往下一頁提交問卷調查資訊。
3. 使用 dscc-gen 開發社群視覺呈現
dscc-gen
dscc-gen 是一項指令列工具，可為社群圖表和社群連結器提供預設範本和工作流程。社群視覺化範本提供可運作的視覺化效果和工作流程，讓您立即查看視覺化程式碼變更，以及驗證、建構及部署視覺化效果的指令碼。
設定
dscc-gen 會在部署指令碼中使用 gsutil，並使用 npm 和 webpack 建構社群視覺化 JavaScript 程式碼。
- 在本機電腦上安裝 npm
- 完成 gsutil 快速入門導覽課程，並設定 Google Cloud Storage 值區
- 前往要放置專案的本機目錄
4. 建立新的 dscc-gen 社群視覺化專案
開啟終端機並執行下列指令：
npx @google/dscc-gen viz
dscc-gen 會提示您輸入專案名稱、「dev」GCS 儲存空間位置和「prod」儲存空間位置。以 URI 形式輸入位置，並使用 gs 通訊協定，例如 gs://my-gs-project/example-dev。「位置」可以是 Cloud Storage bucket，也可以是該 bucket 中的資料夾。這兩個儲存位置必須不同。這項工具會驗證您是否能存取輸入的值。如果地點不存在，系統會為您建立。
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.js、index.json 和 index.css)，撰寫視覺化內容。
dist/ 中的檔案可讓您在瀏覽器中預覽本機的視覺化效果。webpack.config.js 用於在本機執行視覺化。README.md 簡介範本檔案和指令。
5. 在本機預覽視覺化效果
按照建議操作，並在終端機中執行下列指令：
cd <folder name>
npm run start
瀏覽器會開啟網頁，如下所示：
詳情請參閱下一個步驟。
6. [Info] How the dscc-gen workflow is intended to work
dscc-gen 視覺化範本隨附可運作的視覺化效果，以及範本使用說明。主要功能如下：
更新當地訊息：範本中包含範例訊息，但可能無法反映您想支援的用途。請下載與要建構的視覺化效果相符的範例資料。
本機開發工作流程：使用「更新本機資料」中的資料，在本機編寫及測試程式碼。
建構及部署視覺化效果：建構程式碼並上傳至 Google Cloud Storage bucket。
在數據分析中載入視覺化效果：將視覺化效果新增至數據分析報表。
7. 定義設定
設定檔是您 (資料視覺化開發人員) 與使用資料視覺化的報表編輯器之間的合約。定義將視覺化效果載入 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"
}
}
]
}
]
}
8. 下載更新後的訊息
如要更新本機儲存的資料，請執行：
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
這項指令會將視覺化效果部署至數據分析，並將收到的資料列印至本機 viz。指令會列印出視覺化效果的部署位置 (如上圖所示)。您將使用這個位置在數據分析中載入視覺化效果。
如要載入視覺化圖表，請開啟先前複製的報表。
- 前往「編輯報表」
- 按一下工具列中的「社群視覺呈現和元件」
- 按一下「探索更多」
- 按一下「建立專屬的視覺呈現」
- 輸入資訊清單路徑 (終端機中列印的
gs://...位置)，然後按一下「提交」
- 按一下算繪的資訊卡，即可將其新增至報表
圖表應會轉譯類似以下的 JSON：
按一下滑鼠右鍵並選取所有內容，複製整個訊息，然後將 src/localMessage.js 的內容替換為您剛複製的內容。儲存檔案。
瀏覽器中本機執行的視覺化內容應該不會再顯示，且控制台中會顯示錯誤。
9. 編寫長條圖的 JavaScript
首先，請執行下列指令，將 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});
}
如果本機伺服器仍在執行，請檢查瀏覽器。本機開發網頁現在應該會顯示長條圖，如下所示。
10. 更新資訊清單 (選填)
視覺化資訊清單包含視覺化中繼資料，以及視覺化 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"
}
}
]
}
11. 部署視覺化內容
在 src/index.js 中，將常數 LOCAL 變更為「false」。瀏覽器中的視覺化效果應該會停止運作。變更的程式碼行以粗體顯示。這個布林值會設定程式碼是否應使用「本機」資料檔案，或從數據分析收到的資料。
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」值區，並將值區位置列印至控制台。
重新整理數據分析報表。畫面上應該會顯示長條圖。請嘗試在「屬性」面板中變更資料和樣式選項。變更資料會導致長條圖變動。不過，系統還無法選取狀態列顏色樣式。
12. 在長條圖中使用報表編輯器顏色選取項目
如要在本機編輯程式碼，請先將 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
重新整理數據分析報表。現在應該可以變更長條的顏色了。
13. 實際運作部署作業
實際運作部署作業
如果對視覺化效果感到滿意，請確認 src/index.js 中的 const LOCAL 為 false，然後執行。
npm run build:prod
npm run push:prod
這會將檔案部署到「prod」GCS 值區位置。此外，系統會啟用快取功能，並適當縮減 JavaScript 組合包。
與先前一樣，部署位置會列印在控制台中。使用這個「資訊清單路徑」，在數據分析報表中載入「prod」視覺化效果。
恭喜！您剛才使用 dscc-gen 工具建構了第一個社群視覺化。
14. 後續步驟
擴充視覺化效果
- 在視覺化內容中新增互動
- 進一步瞭解可用的樣式元素，並為資料視覺化圖表新增其他樣式。
運用社群視覺呈現執行更多工作
- 請參閱 dscc 輔助程式庫、資訊清單和設定檔的參考資料。
- 將視覺化圖表提交至社群視覺化圖表展示。
- 為數據分析建立社群連接器 。
其他資源
下方提供各種資源，可協助您深入瞭解本程式碼研究室涵蓋的內容。
資源類型 | 使用者功能 | 開發人員功能 |
說明文件 | ||
最新消息與動態 | 在 Data Studio 中註冊 > 使用者設定 | |
提問 | ||
影片 | 即將推出！ | |
範例 |