1. Giriş
Google Data Studio, ücretsiz olarak güzel veri görselleştirmeleri içeren dinamik ve etkileşimli kontrol panelleri oluşturmanıza olanak tanır. Topluluk görselleştirmeleri, Data Studio raporlarınızla entegre olan JavaScript ile özel görselleştirmeler oluşturmanıza olanak tanıyan bir Data Studio özelliğidir.
Neler öğreneceksiniz?
Bu codelab'de öğrenecekleriniz:
- Google Data Studio topluluk görselleştirmelerinin işleyiş şekli
- Komut satırı şablon aracımızla topluluk görselleştirmesi oluşturma
- Topluluk görselleştirmeleri oluşturmak için JavaScript görselleştirme kitaplıklarını kullanma
- Topluluk görselleştirmenizi Data Studio kontrol paneline entegre etme
İhtiyacınız olanlar
Bu codelab'i tamamlamak için şunlar gerekir:
- İnternet erişimi, web tarayıcısı, terminal ve favori metin düzenleyiciniz
- Google Hesabı
- Google Cloud Storage paketine erişim
- JavaScript, Node.js ve komut satırı hakkında bilgi
Bu codelab'de aşağıdaki ön koşullar geçerlidir:
- Daha önce bir topluluk görselleştirmesi oluşturmuş olmanız gerekir (TODO: İlk kod laboratuvarının bağlantısını ekleyin).
- Google Cloud Storage'a aşina olmanız
Başlamak için sağ üst köşedeki 
simgesini tıklayarak bu raporun bir kopyasını oluşturun. Codelab'i uygularken bu sayfayı başka bir sekmede açık tutun.
2. Kısa Anket
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?
Anket bilgilerini göndermek için sonraki sayfaya geçin.
3. dscc-gen ile topluluk görselleştirme geliştirme
dscc-gen
dscc-gen, Topluluk Görselleştirmeleri ve Topluluk Bağlayıcıları için belirli bir görüşe dayalı şablonlar ve iş akışları sağlayan bir komut satırı aracıdır. Topluluk görselleştirme şablonu, çalışan bir görselleştirme ve görselleştirme kodu değişikliklerinizi anında görmenizi sağlayan bir iş akışının yanı sıra görselleştirmelerinizi doğrulama, oluşturma ve dağıtma için komut dosyaları sağlar.
Kurulum
dscc-gen, dağıtım komut dosyalarında gsutil'i, Topluluk Görselleştirme JavaScript kodu oluşturmak için ise npm ve webpack'i kullanır.
- Yerel bilgisayarınıza npm'yi yükleyin.
- gsutil hızlı başlangıç kılavuzunu inceleyin ve Google Cloud Storage paketi oluşturun.
- Projenizi yerleştirmek istediğiniz yerel dizine gidin.
4. Yeni bir dscc-gen topluluk görselleştirme projesi başlatma
Bir terminal açıp şu komutu çalıştırın:
npx @google/dscc-gen viz
dscc-gen, sizden proje adı, "dev" GCS depolama konumu ve "prod" depolama konumu ister. Konumu gs protokolüyle URI olarak girin (ör. gs://my-gs-project/example-dev). "Konum", Cloud Storage paketi veya bu paketin içindeki bir klasör olabilir. İki depolama konumu farklı olmalıdır. Araç, girdiğiniz değerlere erişiminizin olduğunu doğrular. Konumlar yoksa sizin için oluşturulur.
dscc-gen yeni bir topluluk görselleştirmesi oluşturduktan sonra nasıl başlayacağınızla ilgili talimatları yazdırır. Terminaliniz aşağıdaki gibi görünecektir (girişiniz kalın italik olarak gösterilir):
$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...
Created new community viz: barchart
cd barchart and npm run start to begin working on your viz!
Görselleştirmenizi yazmak için src/ klasöründeki dosyaları (özellikle index.js, index.json ve index.css) düzenleyeceksiniz.
dist/ içindeki dosyalar, görselleştirmenizi tarayıcıda yerel olarak önizlemenize olanak tanır. webpack.config.js, görselleştirmeyi yerel olarak çalıştırmak için kullanılır. README.md, şablon dosyalarına ve komutlarına genel bir bakış sunar.
5. Görselleştirmenizi yerel olarak önizleme
Önerilen talimatları uygulayın ve terminalinizde aşağıdaki komutları çalıştırın:
cd <folder name>
npm run start
Aşağıdaki gibi bir web sayfası içeren bir tarayıcı açılır:
Daha fazla bilgiyi sonraki adımda bulabilirsiniz.
6. [Bilgi] dscc-gen iş akışının nasıl çalışması amaçlanmıştır?
dscc-gen görselleştirme şablonu, çalışan bir görselleştirme ve şablonun nasıl kullanılacağıyla ilgili talimatlarla birlikte gelir. Temel işlev şöyledir:
Yerel mesajınızı güncelleyin: Şablonda örnek mesaj yer alır ancak bu mesajın, desteklemek istediğiniz kullanım alanını yansıtması olası değildir. Oluşturmak istediğiniz görselleştirmeyi yansıtan örnek verileri indirmeniz gerekir.
Yerel geliştirme iş akışı: Yerel verilerinizi güncelleme bölümündeki verileri kullanarak kodunuzu yerel olarak yazın ve test edin.
Görselleştirmenizi oluşturun ve dağıtın: Kodunuzu oluşturun ve Google Cloud Storage paketlerinize yükleyin.
Görselleştirmenizi Data Studio'ya yükleme: Görselleştirmeyi Data Studio raporunuza ekleyin.
7. Yapılandırma tanımlama
Yapılandırma dosyası, görselleştirme geliştiricisi olarak sizinle görselleştirmeyi kullanan rapor düzenleyici arasındaki sözleşmedir. Görselleştirme Data Studio'ya yüklendikten sonra kullanılabilen seçenekleri tanımlar.
Bu çubuk grafik görselleştirmesinde yapılandırmada bir boyut, bir metrik ve rapor düzenleyicinin çubuk grafik stilini değiştirmesine olanak tanıyan bir stil öğesi bulunur.
src/index.json dosyasının içeriğini aşağıdakiyle değiştirin. Tüm parantezleri eklediğinizden emin olun. Yeniden yazıyorsanız köşeli ve kıvırcık parantezler ile iç içe yerleştirme yapısı arasındaki farka dikkat edin.
index.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "dimension",
"label": "Dimensions",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "metric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "barStyling",
"label": "Bar Styles",
"elements": [
{
"id": "barColor",
"label": "Bar Color",
"type": "FILL_COLOR",
"defaultValue": {
"color": "#1E555C"
}
}
]
}
]
}
8. Güncellenen mesajı indirme
Yerel olarak depolanan verilerinizi güncellemek için şu komutu çalıştırın:
npm run update_message
Terminaliniz aşağıdaki gibi görünmelidir:
barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object
Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev
Bu komut, alınan verileri yerel bir görselleştirmeye yazdıran bir görselleştirmeyi Data Studio'ya dağıtır. Komut dosyaları, görselleştirmenizin dağıtım konumunu (yukarıda vurgulanmıştır) yazdırır. Görselleştirmenizi Data Studio'ya yüklemek için bu konumu kullanırsınız.
Görselleştirmenizi yüklemek için daha önce kopyaladığınız raporu açın.
- "Raporu düzenle"ye gidin.
- Araç çubuğunda "Topluluk görselleştirmeleri ve bileşenleri"ni tıklayın.
- "Daha fazla keşfedin"i tıklayın.
- "Kendi görselleştirmenizi oluşturun"u tıklayın.
- Manifest yolunuzu (terminalinizde yazdırılan
gs://...konumu) girin ve Gönder'i tıklayın.
- Oluşturulan kartı raporunuza eklemek için tıklayın.
Görselleştirme, aşağıdaki gibi bir JSON oluşturmalıdır:
Sağ tıklayıp tümünü seçerek mesajın tamamını kopyalayın ve src/localMessage.js içeriğini kopyaladığınız içerikle değiştirin. Dosyayı kaydedin.
Tarayıcınızda yerel olarak çalışan görselleştirme artık gösterilmemelidir. Konsola baktığınızda bir hata görürsünüz.
9. Çubuk grafik için JavaScript yaz
İlk olarak d3.js'yi bağımlılık olarak eklemek için aşağıdaki komutu çalıştırın.
npm install d3
Ardından, src/index.js yerine aşağıdaki kodu girin. Son adımdaki değişiklikler kalın olarak gösterilir.
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;
const drawViz = (message) => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]));
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Yerel sunucu hâlâ çalışıyorsa tarayıcınızı kontrol edin. Yerel geliştirme web sayfasında artık aşağıdaki gibi bir çubuk grafik gösterilmelidir.
10. Manifesti güncelleme (isteğe bağlı)
Görselleştirme manifestiniz, görselleştirmenizle ilgili meta verilerin yanı sıra görselleştirme JavaScript'inizin, yapılandırmanızın ve CSS'nizin konumunu içerir. Manifest dosyanızdaki değerleri güncelleyin. Bu değerler, son kullanıcıya görselleştirmeniz hakkında bilgi vermek için kullanılır.
Görselleştirmenizi açıklamak için src/manifest.json dosyasını düzenleyin. Örnek bir manifest aşağıda verilmiştir.
src/manifest.json
{
"name": "Bar Chart",
"organization": "[My name]",
"description": "Bar chart",
"logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
"organizationUrl": "https://github.com/googledatastudio/",
"supportUrl": "http://github.com/googledatastudio/community-visualizations",
"privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
"termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
"packageUrl": "",
"devMode": "DEVMODE_BOOL",
"components": [
{
"id": "Bar chart",
"name": "Bar chart",
"description": "My first Community Visualization",
"iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
"resource": {
"js": "YOUR_GCS_BUCKET/index.js",
"config": "YOUR_GCS_BUCKET/index.json",
"css": "YOUR_GCS_BUCKET/index.css"
}
}
]
}
11. Görselleştirmeyi dağıtma
src/index.js içinde const LOCAL değerini "false" olarak değiştirin. Tarayıcınızdaki görselleştirme çalışmayı durdurur. Değiştirilen kod satırı kalın olarak gösterilir. Bu boole değeri, kodun "yerel" bir veri dosyası mı yoksa Data Studio'dan alınan verileri mi kullanacağını yapılandırır.
src/index.js (abridged)
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;
const drawViz = (message) => {...}
Ardından terminalinizde şu komutu çalıştırın:
npm run build:dev
npm run push:dev
build:dev komutu, JavaScript bağımlılıklarınızı küçültülmemiş bir çıktıda paketler ve önbelleğe almayı devre dışı bırakmak ve daha önce yapılandırdığınız "dev" paketine yönlendirmek için manifest dosyanızdaki değerleri değiştirir.
push:dev komutu, görselleştirme kaynaklarınızı 1. adımda yapılandırdığınız "dev" paketine yükler ve paket konumunu konsola yazdırır.
Data Studio raporunu yenileyin. Bir çubuk grafik görmelisiniz. Özellikler panelinde veri ve stil seçeneklerini değiştirmeyi deneyin. Verileri değiştirmek çubukları değiştirir. Ancak çubuk rengi stili seçici henüz çalışmayacaktır.
12. Çubuk grafikte rapor düzenleyici renk seçimlerini kullanma
Kodu yerel olarak düzenlemek için öncelikle src/index.js içindeki LOCAL sabit değişkenini true olarak güncelleyin. Ardından, styleVal() adlı yeni bir işlev ekleyin ve drawViz() işlevindeki kodu güncelleyin. src/index.js dosyanız şu şekilde görünmelidir:
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;
// parse the style value
const styleVal = (message, styleId) => {
if (typeof message.style[styleId].defaultValue === "object") {
return message.style[styleId].value.color !== undefined
? message.style[styleId].value.color
: message.style[styleId].defaultValue.color;
}
return message.style[styleId].value !== undefined
? message.style[styleId].value
: message.style[styleId].defaultValue;
};
const drawViz = message => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// get the user-selected bar color
let barColor = styleVal(message, "barColor");
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]))
.attr("fill", barColor);
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.attr("fill", barColor)
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
src/index.js dosyasını kaydedin ve yerel tarayıcı oturumunuza geri dönün. Yerel olarak çalıştırın, ardından const LOCAL değerini tekrar false olarak değiştirin.
Aşağıdaki komutu çalıştırarak güncellenen dosyalarınızı Google Cloud Storage'a yükleyin:
npm run build:dev
npm run push:dev
Data Studio raporunuzu yenileyin. Artık çubuklarınızın rengini değiştirebilirsiniz.
13. Üretim dağıtımları
Üretim dağıtımları
Görselleştirmenizden memnun olduğunuzda src/index.js içindeki LOCAL sabitinin yanlış olduğundan emin olun ve çalıştırın.
npm run build:prod
npm run push:prod
Bu işlem, dosyalarınızı "prod" GCS paketi konumunuza dağıtır. Ayrıca, önbelleğe alma etkinleştirilir ve paketlenmiş JavaScript uygun şekilde küçültülür.
Daha önce olduğu gibi, dağıtımınızın konumu konsola yazdırılır. "Üretim" görselleştirmenizi bir Data Studio raporuna yüklemek için bu "manifest yolu"nu kullanın.
Tebrikler! dscc-gen aracıyla ilk topluluk görselleştirmenizi oluşturduğunuzu varsayalım.
14. Sonraki adımlar
Görselleştirmenizi genişletme
- Görselleştirmenize etkileşim ekleme
- 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 | Stack Overflow [google-data-studio]Data Studio Geliştiriciler Forumu | |
Videolar | Çok yakında! | |
Örnekler |