Google Data Studio, kullanıcıların ücretsiz olarak güzel veri görselleştirmeleri içeren canlı ve etkileşimli gösterge tabloları oluşturmasına olanak tanır. Kullanıcılar, verilerini çeşitli kaynaklardan alabilir ve Data Studio'da tam düzenleme ve paylaşım özellikleriyle raporlar oluşturabilir. Data Studio kontrol paneli örneğini burada bulabilirsiniz:
(Bu örnek raporu Data Studio'da görüntülemek için burayı tıklayın)
Data Studio; çizgi grafikler, çubuk grafikler, pasta grafikler ve dağılım grafikleri dahil olmak üzere çeşitli yerleşik grafik türleri sunar. Topluluk görselleştirmeleri, Data Studio'da kendi özel JavaScript görselleştirmelerinizi oluşturup kullanmanıza olanak tanır. Topluluk görselleştirmeleri, Data Studio geliştirici topluluğu tarafından oluşturulur. Herhangi bir geliştirici topluluk görselleştirmesi oluşturabilir. Topluluk görselleştirmelerinizi başkalarıyla da paylaşarak kendi verileriyle kullanmalarını sağlayabilirsiniz.
Neler öğreneceksiniz?
Bu kod laboratuvarında şunları öğreneceksiniz:
- Google Data Studio topluluk görselleştirmesinin işleyiş şekli
- ds-component yardımcı kitaplığını kullanarak topluluk görselleştirmesi oluşturma
- Topluluk görselleştirmenizi Data Studio kontrol paneline entegre etme
İ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
Neden bu codelab'i seçtiniz?
Bu codelab'i/eğitimi nasıl kullanmayı planlıyorsunuz?
Data Studio deneyiminizi nasıl değerlendirirsiniz?
Geçmişinizi en iyi şekilde ne tanımlar?
Hangi JavaScript görselleştirme kitaplıklarıyla ilgileniyorsunuz?
Anket bilgilerini göndermek için sonraki sayfaya gidin.
Data Studio topluluk görselleştirmeleri, kontrol panellerinize entegre olan özel JavaScript görselleştirmeleri oluşturmanıza ve kullanmanıza olanak tanır.
Bu codelab'de 1 boyutu, 1 metriği ve çubuk rengi stilini destekleyen bir çubuk grafik topluluk görselleştirmesi oluşturacaksınız.
Topluluk görselleştirmesi oluşturmak için Google Cloud Platform depolama paketinde aşağıdaki dosyalar gerekir. Bu dosyaları sonraki bir adımda oluşturacaksınız.
Dosya adı | Dosya türü | Amaç |
manifest.json* | JSON | Görselleştirme ve diğer kaynakların konumu hakkında meta veriler sağlar. |
myViz.json | JSON | Mülk paneli için veri ve stil yapılandırma seçenekleri sunar. |
myViz.js | JavaScript | Görselleştirmenin gösterilmesi için gereken JavaScript kodunu sağlar. |
myViz.css (isteğe bağlı) | CSS | Görselleştirme için stil sağlar. |
*Manifest, zorunlu ada sahip olan tek dosyadır. Diğer dosyalar, adları/konumları manifest dosyanızda belirtildiği sürece farklı şekilde adlandırılabilir.
Bu bölümde, verileri işlemek, stil değişikliklerini yönetmek ve görselleştirme oluşturmak için gereken kodu JavaScript dosyanıza ekleyeceksiniz.
Görselleştirme kaynağını yazma
1. adım: Data Studio Topluluk Bileşeni Kitaplığı'ndan dscc.min.js dosyasını indirip çalışma dizininize kopyalayın.
2. adım: Aşağıdaki kodu bir metin düzenleyiciye kopyalayın ve yerel çalışma dizininizde myVizSource.js olarak kaydedin.
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 });Son JavaScript dosyasını hazırlama
3. adım: Görselleştirme yardımcı kitaplığının (dscc.min.js) ve myVizSource.js dosyanızın içeriğini kopyalayarak gereken tüm JavaScript'i myViz.js adlı yeni bir dosyada birleştirin. Dosyaları birleştirmek için aşağıdaki komutları çalıştırın. Görselleştirme kodunuzu her güncellediğinizde bu adımı tekrarlayın.
Linux/Mac OS birleştirme komut dosyası
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsWindows komut dosyası
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsCSS dosyası, görselleştirmenizin stilini tanımlar. Aşağıdaki kodu kopyalayıp myViz.css. olarak kaydedin.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}Görselleştirme yapılandırması JSON dosyası, görselleştirmeniz tarafından desteklenen ve gerekli olan veri ve stil özelliklerini tanımlar. Bu codelab'de oluşturacağınız görselleştirme bir boyutu ve bir metriği destekler ve renk seçmek için bir stil öğesi gerektirir. Boyutlar ve metrikler hakkında daha fazla bilgi edinin.
Aşağıdaki kodu kopyalayın ve myViz.json. olarak kaydedin. Yapılandırabileceğiniz özellikler hakkında daha fazla bilgi edinmek için yapılandırma referansı belgelerini ziyaret edin.
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. adım: Google Cloud Platform (GCP) projesi oluşturun
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. Görselleştirme depolama alanınızın bölgesel depolama 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. Data Studio buna "bileşen kimliği" adını verir ve tanımlama ile dağıtım için kullanılır.
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 (bileşen kimliğiniz için kullanılan paketle aynı) 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ı belgelerini inceleyin.
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"
}
}]
}
manifest.json,myViz.js,myViz.jsonvemyViz.cssdosyalarını web arayüzünü veya gsutil komut satırı aracını kullanarak Google Cloud Storage paketine 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 myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET1. adım: Topluluk görselleştirme örnek veri kümesinin URL'sini kopyalayın.
2. adım: Data Studio'yu ziyaret edin ve Yeni rapor başlatın bölümünde Boş'u tıklayın.
3. adım: Sağ altta YENİ VERİ KAYNAĞI OLUŞTUR'u tıklayın.
4. adım: Google E-Tablolar bağlayıcısını seçin.
5. adım: URL alanına, yukarıdaki 1. adımda oluşturduğunuz Google E-Tablosu'nun URL'sini girin.
6. adım: Sayfanın sağ üst kısmında BAĞLAN'ı tıklayın.
7. adım: Veri kaynağı başlığında Topluluk görselleştirmelerine erişim'i tıklayın, AÇIK'ı seçin ve Kaydet'i tıklayın.
7. adım: Veri kaynağını raporunuza eklemek için açılan kutuda RAPORA EKLE'yi tıklayın.
6. adım: Araç çubuğunda topluluk görselleştirme düğmesini 
tıklayın. Açılır liste açılır.
7. adım: Paket adınızı gs:// ( ile öneklenmiş şekilde yapıştırın (ör. gs://community-viz-docs/myViz)). "Manifest Path" (Manifest Yolu) metin girişine barChart ekleyin ve "ADD" (EKLE) seçeneğini tıklayın. 
Görselleştirmeniz tuvalinize otomatik olarak çizilir. Sağ taraftaki özellik paneli, myViz.json dosyanızdaki öğeleri yansıtmalıdır.
Görselleştirme, bir boyut ve bir metriğe izin verir.
Bir Stil Öğesi belirtildi. Bu öğe, "Çubuk Rengi" etiketli bir Yazı Tipi Rengi seçicisi oluşturuyor. Bir sonraki adımda, görselleştirmeyi etkilemek için bu seçiciyi kullanacaksınız.
Bu bölümde, görselleştirmenizi güncellemek için renk seçici stil öğesini kullanacaksınız.
1. adım: myVizSource.js dosyanızdaki kodu aşağıdaki kodla değiştirin.
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. adım: Birleştirilmiş JavaScript dosyasını oluşturun, ardından görselleştirme dosyalarınızı Google Cloud Storage'a yeniden yükleyin.
3. adım: Topluluk görselleştirmenizi test ettiğiniz Data Studio raporunu yenileyin.
Stil menüsündeki seçiciyi kullanarak dikdörtgenin rengini değiştirebilirsiniz.
Bu bölümde, Topluluk görselleştirme örnek veri kümesindeki verileri kullanarak çubuk grafik oluşturmak için görselleştirmenizi güncelleyeceksiniz. Not: Data Studio,görselleştirmeye en fazla 2.500 satır veri döndürür.
1. adım: myVizSource.js dosyanızdaki kodu aşağıdaki kodla değiştirin.
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. adım: Birleştirilmiş JavaScript dosyasını oluşturun, ardından görselleştirme dosyalarınızı Google Cloud Storage'a yeniden yükleyin.
3. adım: Topluluk görselleştirmenizi test ettiğiniz Data Studio raporunu yenileyin. Google E-Tablosu'ndaki verilerden oluşturulan etiketlere sahip bir çubuk grafik görmelisiniz. Çubukların rengini değiştirmek için Stil "Çubuk Rengi" seçicisinde belirlenen rengi değiştirin.
Bu bölümde, Topluluk görselleştirme örnek veri kümesindeki verileri kullanarak çubuk grafik oluşturmak için görselleştirmenizi güncelleyeceksiniz.
1. adım: myVizSource.js dosyanızdaki kodu aşağıdaki kodla değiştirin.
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. adım: Birleştirilmiş JavaScript dosyasını oluşturun, ardından görselleştirme dosyalarınızı Google Cloud Storage'a yeniden yükleyin.
3. adım: Topluluk görselleştirmenizi test ettiğiniz Data Studio raporunu yenileyin. Verilerden oluşturulmuş bir başlığa sahip ve myViz.css dosyanız kullanılarak biçimlendirilmiş bir çubuk grafiğiniz olmalıdır.
Tebrikler, Data Studio'da bir topluluk görselleştirmesi oluşturdunuz. Bu codelab'in sonuna geldiniz. Şimdi, sonraki adımlarda neler yapabileceğinize bakalım.
Görselleştirmenizi genişletme
- Görselleştirmenize etkileşim ekleme
- Görselleştirme işlemini yerel olarak geliştirmeyi öğrenin
- Kullanılabilir stil öğeleri hakkında daha fazla bilgi edinin ve görselleştirmenize ek stil uygulayın.
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 Vitrinimize gönderin.
- Data 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 | Data Studio > Kullanıcı Ayarları'nda kaydolun. | |
Soru Sorma | ||
Videolar | Çok yakında! | |
Örnekler |