Looker Studio에서 맞춤 시각화 만들기

1. 소개

Looker Studio를 사용하면 아름다운 데이터 시각화로 실시간 대화형 대시보드를 무료로 빌드할 수 있습니다. 다양한 소스에서 데이터를 가져오고 Looker Studio에서 무제한 보고서를 만들 수 있으며, 편집 및 공유 기능도 완벽하게 지원됩니다. 다음 스크린샷은 Looker Studio 보고서의 예입니다.

( Looker Studio에서 이 예시 보고서를 보려면 여기를 클릭하세요)

Looker Studio에서는 선 차트, 막대 그래프, 원형 차트, 분산형 차트 등 여러 기본 제공 차트 유형을 제공합니다. 커뮤니티 시각화를 사용하면 Looker Studio에서 자체 맞춤 JavaScript 시각화를 빌드하고 사용할 수 있습니다. 다른 사용자가 자신의 데이터와 함께 사용할 수 있도록 커뮤니티 시각화 자료를 공유할 수도 있습니다.

학습할 내용

이 Codelab에서는 다음을 알아봅니다.

Looker Studio 커뮤니티 시각화의 작동 방식
ds-component 도우미 라이브러리 (dscc)를 사용하여 커뮤니티 시각화를 빌드하는 방법
Looker Studio 보고서에서 커뮤니티 시각화 요소를 사용하는 방법

필요한 항목

이 코드 실습을 완료하려면 다음이 필요합니다.

인터넷 및 웹브라우저 액세스
Google 계정
Google Cloud Platform 스토리지 버킷에 대한 액세스 권한
JavaScript에 대한 지식

2. 간단한 설문조사

이 Codelab을 선택한 이유는 무엇인가요?

일반적인 데이터 시각화에 관심이 있습니다.

Looker Studio에 대해 자세히 알아보고 싶습니다.

나만의 커뮤니티 시각화를 만들고 싶습니다.

Looker Studio를 다른 플랫폼과 통합하려고 합니다.

Google Cloud 솔루션에 관심이 있습니다.

이 Codelab/튜토리얼을 어떻게 사용할 계획인가요?

훑어보기만 합니다.

읽은 다음 연습 활동을 완료할 계획입니다.

Looker Studio 사용 경험을 어떻게 평가하시겠어요?

들어본 적 없음

무엇인지 알지만 사용하지 않습니다.

가끔 사용합니다.

정기적으로 사용합니다.

전문가 사용자입니다.

귀하의 배경을 가장 잘 설명하는 항목은 무엇인가요?

개발자.

디자이너 / UX 전문가

비즈니스 / 데이터 / 재무 분석가

데이터 과학자 / 데이터 엔지니어.

마케팅 / 소셜 미디어 / 디지털 분석 전문가

기타

어떤 JavaScript 시각화 라이브러리를 사용하고 싶으신가요?

D3.js

Google 차트

Chart.js

Leaflet

Highcharts

Plot.ly

기타

다음 페이지로 이동하여 설문조사 정보를 제출합니다.

3. 커뮤니티 시각화 개요

Looker Studio 커뮤니티 시각화를 사용하면 대시보드에서 맞춤 JavaScript 시각화를 만들고 사용할 수 있습니다.

이 Codelab에서는 측정기준 1개, 측정항목 1개, 표 헤더 스타일을 지원하는 표 차트 커뮤니티 시각화를 만듭니다.

4. 커뮤니티 시각화 개발 워크플로

커뮤니티 시각화 요소를 만들려면 나중에 만들 Google Cloud Platform 스토리지 버킷에 다음 파일이 있어야 합니다.

파일 이름	파일 형식	목적
manifest.json*	JSON	시각화 및 모든 시각화 리소스의 위치에 관한 메타데이터입니다.
viz-codelab.json	JSON	속성 패널의 데이터 및 스타일 구성 옵션입니다.
viz-codelab.js	자바스크립트	시각화를 렌더링하는 JavaScript 코드입니다.
viz-codelab.css (선택사항)	CSS	시각화의 CSS 스타일입니다.

*매니페스트는 필수 이름이 있는 유일한 파일입니다. 이름/위치가 매니페스트 파일에 지정되어 있다면 다른 파일의 이름은 다르게 지정할 수 있습니다.

5. Hello, world! 시각화 작성

이 섹션에서는 간단한 Hello, world! 시각화를 렌더링하는 데 필요한 코드를 추가합니다.

시각화 JavaScript 소스 작성

1단계: Looker Studio 커뮤니티 구성요소 라이브러리 (dscc) 페이지에서 dscc.min.js 파일을 다운로드하고 작업 디렉터리에 복사합니다.

2단계: 다음 코드를 텍스트 편집기에 복사하고 로컬 작업 디렉터리에 viz-codelab-src.js로 저장합니다.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

JavaScript 번들 파일 준비

3단계: 시각화 도우미 라이브러리 (dscc.min.js)의 콘텐츠와 viz-codelab-src.js 파일을 viz-codelab.js이라는 새 파일에 복사하여 필요한 모든 JavaScript를 단일 파일로 결합합니다. 다음 명령어를 실행하여 파일을 연결할 수 있습니다. 소스 시각화 코드를 업데이트할 때마다 이 단계를 반복합니다.

Linux/Mac OS 연결 스크립트

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

Windows 연결 스크립트

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. 시각화 CSS 작성

CSS 파일은 시각화의 스타일을 정의하며 선택사항입니다. 다음 CSS를 복사하여 viz-codelab.css.로 저장합니다.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. JSON 구성 작성

시각화 구성은 시각화에서 지원하고 요구하는 데이터 및 스타일 속성을 정의합니다. 이 Codelab의 시각화에는 측정기준 하나와 측정항목 하나가 필요하며 채우기 색상을 선택하는 스타일 요소가 하나 있습니다. 측정기준 및 측정항목에 대해 자세히 알아보기

다음 코드를 복사하여 viz-codelab.json.구성할 수 있는 속성에 대해 자세히 알아보려면 커뮤니티 시각화 구성 참조를 검토하세요.

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. Cloud Storage 프로젝트 및 버킷 만들기

1단계: Google Cloud Platform (GCP) 프로젝트를 만들거나 기존 프로젝트를 사용합니다.

2단계: GCP 버킷 만들기 권장되는 스토리지 클래스는 Regional입니다. 무료 등급에 대한 자세한 내용은 Cloud Storage 가격 책정을 참고하세요. 참고: 시각화 스토리지에는 리전 스토리지 클래스에 대한 비용이 발생하지 않을 가능성이 높습니다.

3단계: Buckets/ 뒤에 나오는 섹션부터 시작하여 버킷 이름/경로를 메모합니다. 이 경로를 Looker Studio에서는 '구성요소 ID'라고 하며 시각화를 식별하고 배포하는 데 사용됩니다.

9. manifest.json 파일 작성

매니페스트 파일은 시각화 위치와 리소스에 관한 정보를 제공합니다. 이름은 'manifest.json'이어야 하며 이전 단계에서 생성된 버킷/경로에 있어야 합니다. 구성요소 ID에 사용된 경로와 동일한 경로입니다.

다음 코드를 텍스트 편집기에 복사하여 manifest.json.로 저장합니다.

매니페스트에 대해 자세히 알아보려면 매니페스트 참조 문서를 참고하세요.

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. 시각화 파일을 Google Cloud Storage에 업로드

웹 인터페이스 또는 gsutil 명령줄 도구를 사용하여 manifest.json, viz-codelab.js, viz-codelab.json, viz-codelab.css 파일을 Google Cloud Storage 버킷에 업로드합니다. 시각화를 업데이트할 때마다 이 단계를 반복합니다.

gsutil 업로드 명령어

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. Looker Studio에서 커뮤니티 시각화 테스트하기

보고서 만들기 및 데이터 추가하기

1단계: 커뮤니티 시각화 샘플 데이터 세트의 URL을 복사합니다. 또는 원하는 데이터 소스를 사용하고 다음 단계를 건너뛰세요.

2단계: Looker Studio에 로그인합니다. 왼쪽 상단에서 + 만들기를 클릭한 다음 보고서를 선택합니다.

3단계: 보고서에 데이터 추가 패널이 열려 있는 보고서 편집기 도구가 표시됩니다.

4단계: 데이터에 연결 탭에서 Google의 Google Sheets 커넥터를 선택합니다.

5단계: URL을 선택하고 1단계의 Google 시트 URL을 붙여넣습니다.

6단계: 오른쪽 하단에서 추가를 클릭합니다.

7단계: 보고서에 데이터를 추가하시겠습니까?라는 메시지가 표시되면 보고서에 추가를 클릭합니다. 제목이 없는 보고서가 생성되고 샘플 데이터가 포함된 기본 테이블이 보고서에 추가됩니다. 원하는 경우 기본 테이블을 선택하고 삭제하여 빈 보고서를 남깁니다.

보고서에 커뮤니티 시각화 추가

1단계: 툴바에서 커뮤니티 시각화 및 구성요소 를 클릭합니다 .

2단계: + 더보기를 클릭하여 커뮤니티 갤러리를 엽니다.

3단계: 나만의 시각화 구축하기 클릭

4단계: 테스트 및 커뮤니티 시각화 추가에서 매니페스트 경로를 입력하고 제출을 클릭합니다. 매니페스트 경로는 시각화의 매니페스트 위치를 가리키는 Google Cloud Storage 버킷 이름과 경로이며, gs://.이 프리픽스로 지정됩니다. 예를 들어 gs://community-viz-docs/viz-codelab입니다. 유효한 매니페스트 경로를 입력한 경우 시각화 카드가 렌더링됩니다.

5단계: 시각화 카드를 클릭하여 보고서에 추가합니다.

6단계: 메시지가 표시되면 시각화가 렌더링되도록 동의합니다.

7단계: 선택적으로 표의 선택된 측정기준과 측정항목을 업데이트합니다. 제공된 샘플 데이터 세트를 사용하는 경우 측정기준을 국가로, 측정항목을 인구로 설정합니다. 이 코드는 Codelab 후반부까지 시각화에 영향을 미치지 않습니다.

오른쪽의 속성 패널에는 viz-codelab.json에서 구성된 요소가 반영됩니다.

설정 패널에서 시각화는 측정기준 하나와 측정항목 하나를 허용합니다.

스타일 패널에서 시각화에는 표 헤더의 스타일을 지정하는 단일 요소가 있습니다. 이 시점에서는 시각화 코드가 나중에 업데이트될 때까지 스타일 컨트롤이 시각화에 영향을 미치지 않습니다. 참고: 구성 파일에서 정의하지 않은 시각화의 추가 스타일 옵션이 표시됩니다. 모든 시각화에는 자동으로 사용할 수 있는 공통 컨트롤 세트가 있으므로 이는 예상되는 동작입니다.

12. 데이터를 표로 렌더링

이 섹션에서는 커뮤니티 시각화 샘플 데이터 세트를 표로 표시하도록 시각화를 업데이트합니다.

렌더링할 데이터는 tables 객체에서 사용할 수 있으며 시각화에서 지정한 변환을 기반으로 구조화됩니다. 이 Codelab에서 시각화는 표를 렌더링하는 데 필요한 모든 데이터를 포함하는 headers 객체와 rows 객체를 포함하는 표 형식 (tableTransform)을 요청했습니다.

1단계: viz-codelab-src.js의 내용을 아래 코드로 바꿉니다.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

2단계: JavaScript 번들 파일을 준비한 다음 시각화 파일을 Google Cloud Storage에 업로드하고 덮어씁니다.

3단계: Looker Studio 보고서를 새로고침하여 커뮤니티 시각화를 다시 로드하고 테스트합니다. 이제 표에 데이터 (즉, Google 시트)가 렌더링되고 선택한 측정기준과 측정항목을 기반으로 헤더 열이 표시됩니다. 모든 행을 보려면 시각화의 크기를 조절하세요.

13. 스타일 변경사항 동적으로 적용

이 섹션에서는 스타일 패널에서 선택한 채우기 색상을 기반으로 테이블 헤더의 스타일을 지정하도록 시각화를 업데이트합니다.

모든 스타일 요소의 상태는 style 객체에서 확인할 수 있으며, 각 항목 키는 시각화 스타일 구성 (viz-codelab.json)에 따라 정의됩니다. 이 섹션에서는 선택한 채우기 색상을 가져와 테이블 헤더의 배경색상을 업데이트합니다.

1단계: viz-codelab-src.js 파일의 코드를 아래 코드로 바꿉니다.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

2단계: JavaScript 번들 파일을 준비한 다음 시각화 파일을 Google Cloud Storage에 업로드하고 덮어씁니다.

3단계: Looker Studio 보고서를 새로고침하여 커뮤니티 시각화를 다시 로드하고 테스트합니다.

4단계: 스타일 패널에서 헤더 배경색 스타일 컨트롤을 사용하여 표 헤더 배경색을 변경합니다.

축하합니다. Looker Studio에서 커뮤니티 시각화를 만들었습니다. 이로써 이 Codelab을 마칩니다. 이제 다음 단계를 살펴보겠습니다.

14. 다음 단계

시각화 확장

시각화에 사용할 수 있는 데이터 및 형식에 대해 자세히 알아보세요.
사용 가능한 스타일 요소에 대해 자세히 알아보고 시각화에 스타일을 추가하세요.
시각화에 상호작용 추가하기
로컬에서 시각화 개발 알아보기

커뮤니티 시각화로 더 많은 작업 수행

dscc 도우미 라이브러리, 매니페스트, 구성 파일의 참조를 검토합니다.
커뮤니티 시각화 갤러리에 시각화를 제출하세요.
Looker Studio용 커뮤니티 커넥터 를 빌드합니다.

추가 리소스

다음은 이 Codelab에서 다룬 내용을 자세히 살펴볼 수 있는 다양한 리소스입니다.

리소스 유형	사용자 기능	개발자 기능
문서	고객센터	개발자 문서
뉴스 및 업데이트	Looker Studio > 사용자 설정에서 가입	개발자 메일링 리스트
질문하기	사용자 포럼	Stack Overflow [looker-studio] Looker Studio 개발자 포럼
예시	보고서 갤러리	오픈소스 저장소

Looker Studio에서 맞춤 시각화 만들기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

1. 소개

학습할 내용

필요한 항목

2. 간단한 설문조사

이 Codelab을 선택한 이유는 무엇인가요?

이 Codelab/튜토리얼을 어떻게 사용할 계획인가요?

Looker Studio 사용 경험을 어떻게 평가하시겠어요?

귀하의 배경을 가장 잘 설명하는 항목은 무엇인가요?

어떤 JavaScript 시각화 라이브러리를 사용하고 싶으신가요?

3. 커뮤니티 시각화 개요

4. 커뮤니티 시각화 개발 워크플로

5. Hello, world! 시각화 작성

시각화 JavaScript 소스 작성

viz-codelab-src.js

JavaScript 번들 파일 준비

Linux/Mac OS 연결 스크립트

Windows 연결 스크립트

6. 시각화 CSS 작성

viz-codelab.css

7. JSON 구성 작성

viz-codelab.json

8. Cloud Storage 프로젝트 및 버킷 만들기

9. manifest.json 파일 작성

manifest.json

10. 시각화 파일을 Google Cloud Storage에 업로드

gsutil 업로드 명령어

11. Looker Studio에서 커뮤니티 시각화 테스트하기

보고서 만들기 및 데이터 추가하기

보고서에 커뮤니티 시각화 추가

12. 데이터를 표로 렌더링

viz-codelab-src.js

13. 스타일 변경사항 동적으로 적용

viz-codelab-src.js

14. 다음 단계

시각화 확장

커뮤니티 시각화로 더 많은 작업 수행

추가 리소스

Looker Studio에서 맞춤 시각화 만들기