1. Pengantar
Data Studio memungkinkan Anda membuat dasbor interaktif langsung dengan visualisasi data yang menarik, secara gratis. Ambil data Anda dari berbagai sumber dan buat laporan tanpa batas di Data Studio, dengan kemampuan pengeditan dan berbagi penuh. Screenshot berikut adalah contoh laporan Data Studio:
( Klik di sini untuk melihat contoh laporan ini di Data Studio)
Data Studio menyediakan beberapa jenis diagram bawaan, termasuk diagram garis, diagram batang, diagram lingkaran, dan diagram pencar. Visualisasi komunitas memungkinkan Anda membuat dan menggunakan visualisasi JavaScript kustom Anda sendiri di Data Studio. Anda juga dapat membagikan visualisasi komunitas Anda kepada orang lain sehingga mereka dapat menggunakannya dengan data mereka sendiri.
Yang akan Anda pelajari
Dalam lab kode ini, Anda akan mempelajari:
- Cara kerja visualisasi komunitas Data Studio.
- Cara membuat visualisasi komunitas menggunakan library helper ds-component (dscc).
- Cara menggunakan visualisasi komunitas Anda dalam laporan Data Studio.
Yang akan Anda butuhkan
Untuk menyelesaikan lab kode ini, Anda memerlukan:
- Akses ke internet dan browser web.
- Akun Google.
- Akses ke bucket penyimpanan Google Cloud Platform.
- Pengetahuan tentang JavaScript.
2. Survei cepat
Mengapa Anda memilih codelab ini?
Bagaimana Anda berencana menggunakan codelab/tutorial ini?
Bagaimana Anda menilai pengalaman Anda dengan Data Studio?
Apa yang paling menggambarkan latar belakang Anda?
Library visualisasi JavaScript apa yang ingin Anda gunakan?
Pindah ke halaman berikutnya untuk mengirimkan informasi survei.
3. Ringkasan visualisasi komunitas
Dalam codelab ini, Anda akan membuat visualisasi komunitas diagram tabel yang mendukung 1 dimensi, 1 metrik, dan gaya header tabel.
4. Alur kerja pengembangan visualisasi komunitas
Untuk membuat visualisasi komunitas, Anda memerlukan file berikut di bucket penyimpanan Google Cloud Platform, yang akan Anda buat pada langkah berikutnya:
Nama file | Jenis file | Tujuan |
manifest.json* | JSON | Metadata tentang visualisasi dan lokasi semua resource visualisasi. |
viz-codelab.json | JSON | Opsi konfigurasi data dan gaya untuk panel Properti. |
viz-codelab.js | JavaScript | Kode JavaScript untuk merender visualisasi. |
viz-codelab.css (opsional) | CSS | Gaya CSS untuk visualisasi. |
*Manifes adalah satu-satunya file yang memiliki nama yang diperlukan. File lainnya dapat diberi nama yang berbeda, asalkan nama/lokasinya ditentukan dalam file manifes.
5. Menulis visualisasi Hello, world!
Di bagian ini, Anda akan menambahkan kode yang diperlukan untuk merender visualisasi Hello, world! sederhana.
Menulis sumber JavaScript visualisasi
Langkah 1: Download file dscc.min.js dari halaman Data Studio Community Component Library (dscc) dan salin ke direktori kerja Anda.
Langkah 2: Salin kode berikut ke editor teks dan simpan sebagai viz-codelab-src.js di direktori kerja lokal Anda.
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 });
Menyiapkan file paket JavaScript
Langkah 3: Gabungkan semua JavaScript yang diperlukan ke dalam satu file dengan menyalin konten library helper visualisasi (dscc.min.js) dan file viz-codelab-src.js Anda ke dalam file baru bernama viz-codelab.js. Perintah berikut dapat dijalankan untuk menggabungkan file. Ulangi langkah ini setiap kali Anda memperbarui kode visualisasi sumber.
Skrip penggabungan Linux/Mac OS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Skrip penggabungan 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. Menulis CSS visualisasi
File CSS menentukan gaya untuk visualisasi Anda dan bersifat opsional. Salin CSS berikut dan simpan sebagai 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. Menulis konfigurasi JSON
Konfigurasi visualisasi menentukan atribut data dan gaya yang didukung dan diperlukan oleh visualisasi Anda. Visualisasi ini dalam codelab ini memerlukan satu dimensi dan satu metrik, serta memiliki satu elemen gaya untuk memilih warna isian. Pelajari dimensi dan metrik lebih lanjut.
Salin kode berikut dan simpan sebagai viz-codelab.json.Untuk mempelajari lebih lanjut properti yang dapat Anda konfigurasikan, tinjau Referensi Konfigurasi Visualisasi Komunitas.
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. Membuat project dan bucket Cloud Storage
Langkah 1: Buat Project Google Cloud Platform (GCP) atau gunakan project yang sudah ada.
Langkah 2: Buat bucket GCP. Kelas penyimpanan yang direkomendasikan adalah Regional. Buka Harga Cloud Storage untuk mengetahui detail tentang paket gratis. Catatan: Kemungkinan besar penyimpanan visualisasi Anda tidak akan dikenai biaya apa pun untuk kelas penyimpanan Regional.
Langkah 3: Catat nama/jalur bucket Anda, dimulai dengan bagian setelah Buckets/. Jalur ini disebut sebagai "ID komponen" di Data Studio dan digunakan untuk mengidentifikasi dan men-deploy visualisasi.
9. Menulis file manifest.json
File manifes memberikan informasi tentang lokasi dan resource visualisasi Anda. File ini harus diberi nama "manifest.json", dan harus berada di bucket/jalur yang dibuat pada langkah sebelumnya, jalur yang sama yang digunakan untuk ID komponen Anda.
Salin kode berikut ke editor teks dan simpan sebagai manifest.json.
Untuk mempelajari manifes lebih lanjut, buka dokumentasi referensi manifes.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Data 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. Mengupload file visualisasi ke Google Cloud Storage
- Upload file
manifest.json,viz-codelab.js,viz-codelab.json, danviz-codelab.csske bucket Google Cloud Storage Anda menggunakan antarmuka web atau alat command line gsutil. Ulangi langkah ini setiap kali Anda memperbarui visualisasi.
Perintah upload 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. Menguji Visualisasi Komunitas Anda di Data Studio
Membuat laporan dan menambahkan data
Langkah 1: Salin URL untuk set data contoh Visualisasi Komunitas. Atau, gunakan sumber data yang Anda inginkan dan lewati langkah-langkah berikut.
Langkah 2: Login ke Data Studio. Di kiri atas, klik + Buat, lalu pilih Laporan.
Langkah 3: Anda akan melihat alat editor laporan, dengan panel Tambahkan data ke laporan terbuka.
Langkah 4: Di tab Hubungkan ke data, pilih konektor Google Spreadsheet oleh Google.
Langkah 5: Pilih URL dan tempel URL Google Spreadsheet dari langkah 1.
Langkah 6: Di kanan bawah, klik Tambahkan.
Langkah 7: Jika diminta untuk mengonfirmasi Anda akan menambahkan data ke laporan ini, klik TAMBAHKAN KE LAPORAN. Laporan Tanpa Judul dibuat dan tabel default ditambahkan ke laporan dengan data contoh. Secara opsional, pilih dan hapus tabel default sehingga Anda hanya memiliki laporan kosong.
Menambahkan visualisasi komunitas Anda ke laporan
Langkah 1: Di toolbar, klik Komponen dan visualisasi komunitas 
.
Langkah 2: Klik + Jelajahi lainnya untuk membuka Galeri Komunitas.
Langkah 3: Klik Buat visualisasi Anda sendiri
Langkah 4: Di bagian Uji dan tambahkan visualisasi komunitas Anda, masukkan Jalur manifes dan klik Kirim. Jalur manifes adalah nama dan jalur bucket Google Cloud Storage yang mengarah ke lokasi manifes visualisasi Anda, dengan awalan gs://. Misalnya: gs://community-viz-docs/viz-codelab. Jika Anda telah memasukkan Jalur manifes yang valid, kartu visualisasi akan dirender.
Langkah 5: Klik kartu visualisasi untuk menambahkannya ke laporan Anda.
Langkah 6: Jika diminta, berikan izin untuk mengizinkan visualisasi dirender.
Langkah 7: Secara opsional, perbarui dimensi dan metrik yang dipilih untuk tabel. Jika Anda menggunakan set data contoh yang disediakan, tetapkan dimensi ke Negara dan metrik ke Populasi. Tindakan ini tidak akan berpengaruh pada visualisasi hingga nanti di codelab.
Panel properti di sisi kanan mencerminkan elemen yang dikonfigurasi di viz-codelab.json.
Di panel Penyiapan, visualisasi memungkinkan satu Dimensi dan satu Metrik.
Di panel Gaya, visualisasi memiliki satu elemen untuk menata gaya Header Tabel. Pada tahap ini, kontrol gaya tidak akan berpengaruh pada visualisasi hingga kode visualisasi diperbarui pada langkah berikutnya. Catatan: Anda akan melihat opsi gaya tambahan untuk visualisasi yang tidak Anda tentukan dalam file konfigurasi. Hal ini wajar, karena semua visualisasi memiliki serangkaian kontrol umum yang otomatis tersedia.
12. Merender data sebagai tabel
Di bagian ini, Anda akan memperbarui visualisasi untuk menampilkan set data contoh Visualisasi Komunitas sebagai tabel.
Data yang akan dirender tersedia dalam objek tables dan disusun berdasarkan transformasi yang ditentukan oleh visualisasi Anda. Dalam codelab ini, visualisasi meminta format tabel (tableTransform) yang mencakup objek headers dan objek rows yang berisi semua data yang kita perlukan untuk merender tabel.
Langkah 1: Ganti konten viz-codelab-src.js dengan kode di bawah.
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 });
Langkah 2: Siapkan file paket JavaScript, lalu upload dan timpa file visualisasi Anda ke Google Cloud Storage.
Langkah 3: Muat ulang laporan Data Studio untuk memuat ulang dan menguji visualisasi komunitas Anda. Tabel kini merender data (yaitu Google Spreadsheet) dan menampilkan kolom header berdasarkan dimensi dan metrik yang dipilih. Ubah ukuran visualisasi untuk melihat semua baris.
13. Menerapkan perubahan gaya secara dinamis
Di bagian ini, Anda akan memperbarui visualisasi untuk menata gaya header tabel berdasarkan warna isian yang dipilih di panel Gaya.
Status semua elemen gaya tersedia dalam objek style, dengan setiap kunci item ditentukan berdasarkan konfigurasi gaya visualisasi Anda (viz-codelab.json). Untuk bagian ini, Anda akan mendapatkan warna isian yang dipilih dan menggunakannya untuk memperbarui warna latar belakang header tabel.
Langkah 1: Ganti kode dalam file viz-codelab-src.js Anda dengan kode di bawah.
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 });
Langkah 2: Siapkan file paket JavaScript, lalu upload dan timpa file visualisasi Anda ke Google Cloud Storage.
Langkah 3: Muat ulang laporan Data Studio untuk memuat ulang dan menguji visualisasi komunitas Anda.
Langkah 4: Di panel Gaya, gunakan kontrol gaya Warna Latar Belakang Header untuk mengubah warna latar belakang header tabel.
Selamat! Anda telah membuat visualisasi komunitas di Data Studio. Hal ini membawa Anda ke akhir codelab ini. Sekarang, mari kita lihat langkah-langkah berikutnya yang dapat Anda lakukan.
14. Langkah berikutnya
Memperluas visualisasi Anda
- Pelajari lebih lanjut tentang data dan format yang tersedia untuk visualisasi Anda.
- Pelajari lebih lanjut elemen gaya yang tersedia dan tambahkan gaya tambahan ke visualisasi Anda.
- Menambahkan interaksi ke visualisasi Anda
- Pelajari cara mengembangkan visualisasi secara lokal
Melakukan lebih banyak hal dengan visualisasi komunitas
- Tinjau referensi untuk library helper dscc, manifes, dan file konfigurasi.
- Kirim visualisasi Anda ke Galeri Visualisasi Komunitas kami.
- Buat konektor komunitas untuk Data Studio.
Referensi lainnya
Berikut adalah berbagai referensi yang dapat Anda akses untuk membantu Anda mempelajari lebih dalam materi yang dibahas dalam codelab ini.
Jenis Referensi | Fitur Pengguna | Fitur Developer |
Dokumentasi | ||
Berita &Info terbaru | Daftar di Data Studio > Setelan Pengguna | |
Ajukan Pertanyaan | ||
Contoh |