1. 소개
Google 데이터 스튜디오를 사용하면 아름다운 데이터 시각화로 동적이고 대화형 대시보드를 무료로 빌드할 수 있습니다. 커뮤니티 시각화는 데이터 스튜디오 보고서와 통합되는 JavaScript로 맞춤 시각화를 빌드할 수 있는 데이터 스튜디오 기능입니다.
학습할 내용
이 Codelab에서는 다음 내용을 알아봅니다.
- Google 데이터 스튜디오 커뮤니티 시각화의 작동 방식
- 명령줄 템플릿 도구로 커뮤니티 시각화를 빌드하는 방법
- JavaScript 시각화 라이브러리를 사용하여 커뮤니티 시각화를 빌드하는 방법
- 커뮤니티 시각화를 데이터 스튜디오 대시보드에 통합하는 방법
필요한 항목
이 Codelab을 완료하려면 다음이 필요합니다.
- 인터넷, 웹브라우저, 터미널, 즐겨 사용하는 텍스트 편집기에 대한 액세스
- Google 계정
- Google Cloud Storage 버킷에 대한 액세스 권한
- JavaScript, Node.js, 명령줄에 대한 기본 지식
이 Codelab에서는 다음을 가정합니다.
- 이미 커뮤니티 시각화를 빌드했습니다 (첫 번째 Codelab의 TODO 링크).
- Google Cloud Storage에 익숙함
시작하려면 오른쪽 상단에 있는 
을 클릭하여 이 보고서 의 사본을 만드세요. Codelab을 진행하는 동안 다른 탭에서 열어 두세요.
2. 간단한 설문조사
이 Codelab을 선택한 이유는 무엇인가요?
이 Codelab/튜토리얼을 어떻게 사용할 계획인가요?
데이터 스튜디오 사용 경험을 어떻게 평가하시겠어요?
귀하의 배경을 가장 잘 설명하는 항목은 무엇인가요?
다음 페이지로 이동하여 설문조사 정보를 제출합니다.
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' 스토리지 위치를 묻는 메시지가 표시됩니다. 위치를 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.js, index.json, index.css)을 수정하여 시각화를 작성합니다.
dist/의 파일을 사용하면 브라우저에서 시각화 자료를 로컬로 미리 볼 수 있습니다. webpack.config.js는 시각화를 로컬에서 실행하는 데 사용됩니다. README.md는 템플릿 파일과 명령어의 개요를 제공합니다.
5. 로컬에서 시각화 미리보기
추천 안내를 따르고 터미널에서 다음 명령어를 실행합니다.
cd <folder name>
npm run start
브라우저가 열리고 다음과 같은 웹페이지가 표시됩니다.
다음 단계에서 자세히 알아보세요.
6. [정보] dscc-gen 워크플로의 작동 방식
dscc-gen 시각화 템플릿에는 작동하는 시각화와 템플릿 사용 방법이 포함되어 있습니다. 주요 기능은 다음과 같습니다.
현지 메시지 업데이트: 샘플 메시지가 템플릿에 포함되어 있지만 지원하려는 사용 사례를 반영하지 않을 수 있습니다. 빌드하려는 시각화를 반영하는 샘플 데이터를 다운로드해야 합니다.
로컬 개발 워크플로: 로컬 데이터 업데이트의 데이터를 사용하여 로컬에서 코드를 작성하고 테스트합니다.
시각화 빌드 및 배포: 코드를 빌드하고 Google Cloud Storage 버킷에 업로드합니다.
데이터 스튜디오에서 시각화 로드: 데이터 스튜디오 보고서에 시각화를 추가합니다.
7. 구성 정의
구성 파일은 시각화 개발자와 시각화를 사용하는 보고서 편집자 간의 계약입니다. 시각화가 데이터 스튜디오에 로드된 후 사용할 수 있는 옵션을 정의합니다.
이 막대 그래프 시각화의 경우 구성에는 측정기준 하나와 측정항목 하나, 보고서 편집자가 막대 그래프 스타일을 변경할 수 있는 스타일 요소가 있습니다.
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
이 명령어는 수신된 데이터를 로컬 시각화에 출력하는 시각화를 데이터 스튜디오에 배포합니다. 스크립트는 시각화의 배포 위치를 출력합니다 (위에서 강조 표시됨). 이 위치를 사용하여 데이터 스튜디오에서 시각화를 로드합니다.
시각화 자료를 로드하려면 이전에 복사한 보고서를 엽니다.
- '보고서 수정'으로 이동
- 툴바에서 '커뮤니티 시각화 및 구성요소'를 클릭합니다.
- '더 둘러보기'를 클릭합니다.
- '나만의 시각화 구축하기'를 클릭합니다.
- 매니페스트 경로 (터미널에 출력된
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에서 const 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 도우미 라이브러리, 매니페스트, 구성 파일의 참조를 검토합니다.
- 커뮤니티 시각화 쇼케이스에 시각화를 제출하세요.
- 데이터 스튜디오용 커뮤니티 커넥터 를 빌드합니다.
추가 리소스
다음은 이 Codelab에서 다룬 내용을 자세히 살펴볼 수 있는 다양한 리소스입니다.
리소스 유형 | 사용자 기능 | 개발자 기능 |
문서 | ||
뉴스 및 업데이트 | 데이터 스튜디오 > 사용자 설정에서 가입 | |
질문하기 | ||
동영상 | 제공 예정 | |
예시 |