Google 데이터 스튜디오를 사용하면 사용자가 아름다운 데이터 시각화로 실시간 대화형 대시보드를 무료로 빌드할 수 있습니다. 사용자는 다양한 소스에서 데이터를 가져와 데이터 스튜디오에서 보고서를 만들 수 있으며, 수정 및 공유 권한을 모두 사용할 수 있습니다. 다음은 데이터 스튜디오 대시보드의 예입니다.
(데이터 스튜디오에서 이 예시 보고서를 보려면 여기를 클릭하세요)
Data Studio에서는 선 차트, 막대 그래프, 원형 차트, 분산형 차트 등 다양한 기본 제공 차트 유형을 제공합니다. 커뮤니티 시각화를 사용하면 데이터 스튜디오에서 맞춤 JavaScript 시각화를 빌드하고 사용할 수 있습니다. 커뮤니티 시각화는 데이터 스튜디오 개발자 커뮤니티에서 빌드하며, 모든 개발자가 빌드할 수 있습니다. 다른 사용자가 자신의 데이터와 함께 사용할 수 있도록 커뮤니티 시각화 유형을 공유할 수도 있습니다.
학습할 내용
이 Codelab에서는 다음 내용을 학습합니다.
- Google 데이터 스튜디오 커뮤니티 시각화의 작동 방식
- ds-component 도우미 라이브러리를 사용하여 커뮤니티 시각화를 빌드하는 방법
- 커뮤니티 시각화를 데이터 스튜디오 대시보드에 통합하는 방법
필요한 항목
이 코드 실습을 완료하려면 다음이 필요합니다.
- 인터넷 및 웹브라우저 액세스
- Google 계정
- Google Cloud Platform 스토리지 버킷에 대한 액세스 권한
- JavaScript에 대한 기본 지식
이 Codelab을 선택한 이유는 무엇인가요?
이 Codelab/튜토리얼을 어떻게 사용할 계획인가요?
데이터 스튜디오 사용 경험을 어떻게 평가하시겠어요?
귀하의 배경을 가장 잘 설명하는 항목은 무엇인가요?
어떤 JavaScript 시각화 라이브러리에 관심이 있으신가요?
다음 페이지로 이동하여 설문조사 정보를 제출합니다.
데이터 스튜디오 커뮤니티 시각화를 사용하면 대시보드에 통합되는 맞춤 JavaScript 시각화를 만들고 사용할 수 있습니다.
이 Codelab에서는 측정기준 1개, 측정항목 1개, 막대 색상 스타일을 지원하는 막대 그래프 커뮤니티 시각화를 만듭니다.
커뮤니티 시각화 요소를 만들려면 나중에 만들 Google Cloud Platform 스토리지 버킷에 다음 파일이 필요합니다.
파일 이름 | 파일 형식 | 목적 |
manifest.json* | JSON | 시각화 및 기타 리소스의 위치에 관한 메타데이터를 제공합니다. |
myViz.json | JSON | 속성 패널의 데이터 및 스타일 구성 옵션을 제공합니다. |
myViz.js | 자바스크립트 | 시각화를 표시하는 데 필요한 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를 단일 파일로 결합합니다. 다음 명령어를 실행하여 파일을 연결합니다. 시각화 코드를 업데이트할 때마다 이 단계를 반복합니다.
Linux/Mac OS 연결 스크립트
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsWindows 스크립트
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsCSS 파일은 시각화의 스타일을 정의합니다. 다음 코드를 복사하여 myViz.css.로 저장합니다.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}시각화 구성 json 파일은 시각화에서 지원하고 요구하는 데이터 및 스타일 속성을 정의합니다. 이 Codelab에서 빌드할 시각화는 측정기준 하나와 측정항목 하나를 지원하며 색상을 선택하려면 스타일 요소 하나가 필요합니다. 측정기준 및 측정항목에 대해 자세히 알아보기
다음 코드를 복사하여 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단계: 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 업로드 명령어
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET1단계: 커뮤니티 시각화 샘플 데이터 세트의 URL을 복사합니다.
2단계: 데이터 스튜디오를 방문하여 새 보고서 시작 아래의 비어 있음을 클릭합니다.
3단계: 오른쪽 하단에서 새 데이터 소스 만들기를 클릭합니다.
4단계: Google Sheets 커넥터를 선택합니다.
5단계: URL 필드에 위의 1단계의 Google Sheets URL을 입력합니다.
6단계: 페이지 오른쪽 상단에서 연결을 클릭합니다.
7단계: 데이터 소스 헤더에서 커뮤니티 시각화 액세스를 클릭하고 사용을 선택한 다음 저장을 클릭합니다.
7단계: 표시되는 상자에서 보고서에 추가를 클릭하여 보고서에 데이터 소스를 추가합니다.
6단계: 툴바에서 커뮤니티 시각화 버튼 
을 클릭합니다. 그러면 드롭다운이 열립니다.
7단계: 버킷 이름 앞에 gs:// (를 붙여넣습니다(예: gs://community-viz-docs/myViz)). '매니페스트 경로'의 텍스트 입력에 barChart를 '구성요소 ID' 아래에 추가하고 '추가'를 클릭합니다. 
시각화가 캔버스에 자동으로 그려집니다. 오른쪽의 속성 패널에는 myViz.json 파일의 요소가 반영되어야 합니다.
시각화는 측정기준 하나와 측정항목 하나를 허용합니다.
스타일 요소가 하나 지정되어 '막대 색상'이라는 라벨이 지정된 글꼴 색상 선택기가 렌더링되었습니다. 다음 단계에서는 이 선택기를 사용하여 시각화에 영향을 줍니다.
이 섹션에서는 색상 선택기 스타일 요소를 사용하여 시각화를 업데이트합니다.
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단계: 커뮤니티 시각화를 테스트한 데이터 스튜디오 보고서를 새로고침합니다.
스타일 메뉴의 선택기를 사용하여 직사각형의 색상을 변경할 수 있습니다.
이 섹션에서는 커뮤니티 시각화 샘플 데이터 세트의 데이터를 사용하여 막대 그래프를 그릴 수 있도록 시각화를 업데이트합니다. 참고: Data Studio는 시각화에 최대 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에서 다룬 내용을 자세히 알아볼 수 있는 다양한 리소스입니다.
리소스 유형 | 사용자 기능 | 개발자 기능 |
문서 | ||
뉴스 및 업데이트 | 데이터 스튜디오 > 사용자 설정에서 가입 | |
질문하기 | ||
동영상 | 제공 예정 | |
예시 |