1. Giriş
Looker Studio, güzel veri görselleştirmeleri içeren canlı ve etkileşimli kontrol panellerini ücretsiz olarak oluşturmanıza olanak tanır. Verilerinizi çeşitli kaynaklardan alın ve Looker Studio'da sınırsız rapor oluşturun. Düzenleme ve paylaşım özelliklerinin tümünden yararlanın. Aşağıdaki ekran görüntüsü, örnek bir Looker Studio raporunu göstermektedir:
( Bu örnek raporu Looker Studio'da görüntülemek için burayı tıklayın)
Looker Studio'da çizgi grafikler, çubuk grafikler, pasta grafikler ve dağılım grafikleri gibi çeşitli yerleşik grafik türleri bulunur. Topluluk görselleştirmeleri, Looker Studio'da kendi özel JavaScript görselleştirmelerinizi oluşturup kullanmanıza olanak tanır. Topluluk görselleştirmelerinizi başkalarıyla da paylaşarak kendi verileriyle kullanmalarını sağlayabilirsiniz.
Neler öğreneceksiniz?
Bu kod laboratuvarında şunları öğreneceksiniz:
- Looker Studio topluluk görselleştirmelerinin işleyiş şekli
- ds-component helper library (dscc) kullanarak topluluk görselleştirmesi oluşturma
- Topluluk görselleştirmenizi Looker Studio raporunda kullanma
İhtiyacınız olanlar
Bu kod laboratuvarını tamamlamak için şunlar gerekir:
- İnternet erişimi ve web tarayıcısı
- Google Hesabı
- Google Cloud Platform depolama paketine erişim.
- JavaScript hakkında bilgi sahibi olmak
2. Kısa anket
Neden bu codelab'i seçtiniz?
Bu codelab'i/eğitimi nasıl kullanmayı planlıyorsunuz?
Looker Studio deneyiminizi nasıl değerlendirirsiniz?
Geçmişinizi en iyi şekilde ne tanımlar?
Hangi JavaScript görselleştirme kitaplıklarını kullanmak istiyorsunuz?
Anket bilgilerini göndermek için sonraki sayfaya geçin.
3. Topluluk görselleştirmelerine genel bakış
Looker Studio topluluk görselleştirmeleri, kontrol panellerinizde özel JavaScript görselleştirmeleri oluşturup kullanmanıza olanak tanır.
Bu codelab'de 1 boyut, 1 metrik ve tablo başlığı stilini destekleyen bir tablo grafiği topluluk görselleştirmesi oluşturacaksınız.
4. Topluluk görselleştirme geliştirme iş akışı
Topluluk görselleştirmesi oluşturmak için Google Cloud Platform depolama paketinde aşağıdaki dosyaların olması gerekir. Bu dosyaları sonraki bir adımda oluşturacaksınız:
Dosya adı | Dosya türü | Amaç |
manifest.json* | JSON | Görselleştirme ve tüm görselleştirme kaynaklarının konumlarıyla ilgili meta veriler. |
viz-codelab.json | JSON | Mülk paneli için veri ve stil yapılandırma seçenekleri. |
viz-codelab.js | JavaScript | Görselleştirmeyi oluşturmak için kullanılan JavaScript kodu. |
viz-codelab.css (isteğe bağlı) | CSS | Görselleştirme için CSS stilleri. |
*Manifest, zorunlu ada sahip olan tek dosyadır. Diğer dosyalar, adları/konumları manifest dosyasında belirtildiği sürece farklı şekilde adlandırılabilir.
5. "Merhaba dünya!" görselleştirmesi yazma
Bu bölümde, basit bir "Merhaba dünya!" görselleştirmesini oluşturmak için gereken kodu ekleyeceksiniz.
Görselleştirme JavaScript kaynağını yazma
1. adım: dscc.min.js dosyasını Looker Studio Topluluk Bileşeni Kitaplığı (dscc) sayfasından indirip çalışma dizininize kopyalayın.
2. adım: Aşağıdaki kodu bir metin düzenleyiciye kopyalayın ve yerel çalışma dizininizde viz-codelab-src.js olarak kaydedin.
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 paketi dosyasını hazırlama
3. adım: Görselleştirme yardımcı kitaplığının (dscc.min.js) ve viz-codelab-src.js dosyanızın içeriğini kopyalayarak gereken tüm JavaScript'i viz-codelab.js adlı yeni bir dosyada birleştirin. Dosyaları birleştirmek için aşağıdaki komutlar yürütülebilir. Kaynak görselleştirme kodunu her güncellediğinizde bu adımı tekrarlayın.
Linux/Mac OS birleştirme komut dosyası
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Windows birleştirme komut dosyası
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. Görselleştirme CSS'sini yazma
CSS dosyası, görselleştirmenizin stilini tanımlar ve isteğe bağlıdır. Aşağıdaki CSS'yi kopyalayıp viz-codelab.css. olarak kaydedin.
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. JSON yapılandırmasını yazma
Görselleştirme yapılandırması, görselleştirmeniz tarafından desteklenen ve gerekli olan veri ve stil özelliklerini tanımlar. Bu codelab'deki görselleştirme için bir boyut ve bir metrik gerekir. Ayrıca, dolgu rengini seçmek için bir stil öğesi bulunur. Boyutlar ve metrikler hakkında daha fazla bilgi edinin.
Aşağıdaki kodu kopyalayın ve viz-codelab.json.Yapılandırabileceğiniz özellikler hakkında daha fazla bilgi edinmek için Topluluk Görselleştirmesi Yapılandırma Referansı'nı inceleyin.
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 projesi ve paketi oluşturma
1. adım: Google Cloud Platform (GCP) projesi oluşturun veya mevcut bir projeyi kullanın.
2. adım: GCP paketi oluşturun. Önerilen depolama sınıfı Regional'dır. Ücretsiz katmanlarla ilgili ayrıntılar için Cloud Storage Fiyatlandırması sayfasını ziyaret edin. Not: Görselleştirme depolama alanınızın Regional Storage sınıfı için herhangi bir maliyete neden olması olası değildir.
3. adım: Buckets/ bölümünden sonra başlayan paket adınızı/yolunuzu not alın. Yol, Looker Studio'da "bileşen kimliği" olarak adlandırılır ve bir görselleştirmeyi tanımlamak ve dağıtmak için kullanılır.
9. manifest.json dosyasını yazma
Manifest dosyası, görselleştirme konumunuz ve kaynaklarınız hakkında bilgi sağlar. "manifest.json" olarak adlandırılmalı ve önceki adımda oluşturulan pakette/yolda (bileşen kimliğiniz için kullanılan yolda) bulunmalıdır.
Aşağıdaki kodu bir metin düzenleyiciye kopyalayın ve manifest.json. olarak kaydedin.
Manifest hakkında daha fazla bilgi edinmek için manifest referansı dokümanlarını inceleyin.
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. Görselleştirme dosyalarınızı Google Cloud Storage'a yükleme
manifest.json,viz-codelab.js,viz-codelab.jsonveviz-codelab.cssdosyalarını web arayüzünü veya gsutil komut satırı aracını kullanarak Google Cloud Storage paketinize yükleyin. Görselleştirmenizi her güncellediğinizde bu işlemi tekrarlayın.
gsutil yükleme komutları
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. Topluluk görselleştirmenizi Looker Studio'da test etme
Rapor oluşturma ve veri ekleme
1. adım: Topluluk görselleştirmesi örnek veri kümesinin URL'sini kopyalayın. Alternatif olarak, tercih ettiğiniz herhangi bir veri kaynağını kullanabilir ve aşağıdaki adımları atlayabilirsiniz.
2. adım: Looker Studio'da oturum açın. Sol üstte + Oluştur'u tıklayın ve Rapor'u seçin.
3. adım: Rapor düzenleyici aracını görürsünüz. Rapora veri ekleyin paneli açıktır.
4. adım: Verilere bağlanın sekmesinde Google tarafından Google E-Tablolar bağlayıcısını seçin.
5. adım: URL'yi seçin ve 1. adımdaki Google E-Tablosu'nun URL'sini yapıştırın.
6. adım: Sağ altta Ekle'yi tıklayın.
7. adım: Bu rapora veri eklemek üzeresiniz mesajını onaylamanız istenirse RAPORA EKLE'yi tıklayın. Adsız bir rapor oluşturulur ve rapora örnek veriler içeren varsayılan bir tablo eklenir. İsteğe bağlı olarak, varsayılan tabloyu seçip silebilirsiniz. Böylece boş bir raporunuz olur.
Topluluk görselleştirmenizi rapora ekleme
1. adım: Araç çubuğunda Topluluk görselleştirmeleri ve bileşenleri'ni 
tıklayın.
2. adım: Topluluk Galerisi'ni açmak için + Daha fazla keşfedin'i tıklayın.
3. adım: Kendi görselleştirmenizi oluşturun'u tıklayın.
4. adım: Kendi topluluk görselleştirmenizi test edin ve ekleyin bölümünde Manifest yolu'nu girip Gönder'i tıklayın. Manifest yolu, görselleştirmenizin manifest dosyasının konumunu gösteren Google Cloud Storage paketi adı ve yoludur. Bu yola gs://. öneki eklenir. Örneğin: gs://community-viz-docs/viz-codelab. Geçerli bir manifest yolu girdiyseniz görselleştirme kartı oluşturulur.
5. adım: Görselleştirme kartını tıklayarak raporunuza ekleyin.
6. adım: İstenirse görselleştirmenin oluşturulmasına izin verin.
7. adım: İsteğe bağlı olarak, tablo için seçilen boyut ve metriği güncelleyin. Sağlanan örnek veri kümesini kullanıyorsanız boyutu Ülke, metriği ise Nüfus olarak ayarlayın. Bu durum, codelab'in ilerleyen bölümlerine kadar görselleştirme üzerinde herhangi bir etkiye sahip olmayacaktır.
Sağ taraftaki özellikler paneli, viz-codelab.json içinde yapılandırılan öğeleri yansıtır.
Kurulum panelinde, görselleştirme bir boyut ve bir metriğe izin verir.
Stil panelinde, görselleştirme Tablo Başlığı'nı stilize etmek için tek bir öğeye sahiptir. Bu noktada, görselleştirme kodu daha sonraki bir adımda güncellenene kadar stil kontrolünün görselleştirme üzerinde hiçbir etkisi olmaz. Not: Görselleştirmeniz için yapılandırma dosyasında tanımlamadığınız ek stil seçenekleri görürsünüz. Tüm görselleştirmelerde otomatik olarak kullanılabilen ortak kontroller olduğundan bu durum normaldir.
12. Verileri tablo olarak oluşturma
Bu bölümde, görselleştirmenizi Topluluk görselleştirmesi örnek veri kümesini tablo olarak gösterecek şekilde güncelleyeceksiniz.
Oluşturulacak veriler tables nesnesinde bulunur ve görselleştirmeniz tarafından belirtilen dönüşüme göre yapılandırılır. Bu codelab'de, görselleştirme, tablo oluşturmak için ihtiyacımız olan tüm verileri içeren bir headers nesnesi ve bir rows nesnesi içeren tablo biçimini (tableTransform) istedi.
1. adım: viz-codelab-src.js içeriğini aşağıdaki kodla değiştirin.
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. adım: JavaScript paketi dosyasını hazırlayın, ardından görselleştirme dosyalarınızı Google Cloud Storage'a yükleyip üzerine yazın.
3. adım: Topluluk görselleştirmenizi yeniden yüklemek ve test etmek için Looker Studio raporunu yenileyin. Tablo artık verileri (ör. Google E-Tablosu) oluşturur ve seçilen boyut ile metriğe göre başlık sütunlarını gösterir. Tüm satırları görmek için görselleştirmeyi yeniden boyutlandırın.
13. Stil değişikliklerini dinamik olarak uygulama
Bu bölümde, Stil panelinde seçilen dolgu rengine göre tablo başlığını stilize etmek için görselleştirmeyi güncelleyeceksiniz.
Tüm stil öğelerinin durumu style nesnesinde kullanılabilir. Burada her öğe anahtarı, görselleştirme stili yapılandırmanıza (viz-codelab.json) göre tanımlanır. Bu bölümde, seçilen dolgu rengini alıp tablo başlığının arka plan rengini güncellemek için kullanacaksınız.
1. adım: viz-codelab-src.js dosyanızdaki kodu aşağıdaki kodla değiştirin.
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. adım: JavaScript paketi dosyasını hazırlayın, ardından görselleştirme dosyalarınızı Google Cloud Storage'a yükleyip üzerine yazın.
3. adım: Topluluk görselleştirmenizi yeniden yüklemek ve test etmek için Looker Studio raporunu yenileyin.
4. adım: Stil panelinde, tablo üstbilgisi arka plan rengini değiştirmek için Üstbilgi Arka Plan Rengi stil kontrolünü kullanın.
Tebrikler! Looker Studio'da bir topluluk görselleştirmesi oluşturdunuz. Bu işlem sizi bu codelab'in sonuna getirir. Şimdi, sonraki adımlarda neler yapabileceğinize bakalım.
14. Sonraki adımlar
Görselleştirmenizi genişletme
- Görselleştirmenizde kullanılabilecek veriler ve biçimler hakkında daha fazla bilgi edinin.
- Kullanılabilir stil öğeleri hakkında daha fazla bilgi edinin ve görselleştirmenize ek stil uygulayın.
- Görselleştirmenize etkileşim ekleme
- Görselleştirme işlemini yerel olarak geliştirmeyi öğrenin
Topluluk görselleştirmeleriyle daha fazlasını yapın
- dscc yardımcı kitaplığı, manifest ve yapılandırma dosyası ile ilgili referansları inceleyin.
- Görselleştirmenizi Topluluk Görselleştirme Galerimize gönderin.
- Looker Studio için topluluk bağlayıcısı oluşturun.
Ek kaynaklar
Bu codelab'de ele alınan materyalleri daha yakından incelemenize yardımcı olacak çeşitli kaynaklara aşağıdan erişebilirsiniz.
Kaynak Türü | Kullanıcı Özellikleri | Geliştirici Özellikleri |
Belgeler | ||
Haberler ve Güncellemeler | Looker Studio > Kullanıcı Ayarları'nda kaydolun. | |
Soru sorma | ||
Örnekler |