Custom: Özel

Custom bileşeni, Vispeahen içerisinde standart grafik bileşenleriyle sunulan görselleştirmelerin ötesine geçerek daha esnek ve özelleştirilebilir grafiklerin oluşturulmasını sağlar.

Bileşen, Vega-Lite tabanlı bir yapı kullanır. Bu sayede kullanıcılar; veri alanlarını, eksenleri, renkleri, gösterim biçimlerini ve grafik yapısını ihtiyaçlarına göre özelleştirerek farklı görselleştirmeler oluşturabilir.

Custom bileşeni özellikle aşağıdaki durumlarda kullanılabilir:

• Standart grafik bileşenleri arasında bulunmayan görselleştirmelerin oluşturulması,

• Isı haritası (Heatmap), kutu grafiği (Box Plot), dağılım grafiği (Scatter Plot) ve benzeri özel grafiklerin kullanılması,

• Birden fazla grafik türünün aynı görünüm içerisinde birlikte gösterilmesi,

• Veri alanlarının renk, boyut, konum veya benzeri görsel özelliklerle farklı şekillerde ilişkilendirilmesi,

• Mevcut grafiklerin ihtiyaca göre daha detaylı biçimde özelleştirilmesi.

Custom bileşeninde kullanılacak veri alanları, diğer grafiklerde olduğu gibi Veri ekranından seçilir. Görselleştirmenin yapısı ise Ayarlar ekranında belirlenir. Burada Vega-Lite tarafından sunulan hazır grafik örneklerinden yararlanılabilir ve seçilen örnek, Vispeahen içerisindeki veri alanlarına göre uyarlanabilir.

Bu yapı sayesinde kullanıcıların her görselleştirmeyi sıfırdan oluşturması gerekmez. İhtiyaca uygun hazır bir Vega-Lite örneği seçilerek veri alanlarının eşleştirilmesi ve gerekli görsel düzenlemelerin yapılmasıyla farklı grafik türleri Vispeahen içerisinde kullanılabilir.

Not: Custom bileşeninin kullanılabilmesi için ileri seviyede yazılım geliştirme bilgisi zorunlu değildir; ancak Vega-Lite'ın JSON tabanlı spesifikasyon yapısına ilişkin temel bilgi gereklidir. Vega-Lite örnek galerisindeki hazır görselleştirmeler başlangıç noktası olarak kullanılabilir ve ilgili tanımlar Vispeahen'deki veri alanlarına göre uyarlanabilir.

Custom Bileşeninin Eklenmesi

Custom grafik eklemek için Plugin Listesi içerisinden Özel bileşeni seçilir ve kumanda tablosuna eklenir.

Bileşenin kullanımı temel olarak iki aşamadan oluşur:

1. Veri ekranından görselleştirmede kullanılacak kolonların belirlenmesi,

2. Ayarlar ekranından Vega-Lite JSON tanımının oluşturulması veya mevcut bir tanımın uyarlanması.

Veri alanları ile Vega-Lite kodunda kullanılan alanlar eşleştirildikten sonra bileşen yenilenerek görselleştirme oluşturulur.

Custom Bileşeni Araçları

Custom bileşeni seçildiğinde bileşen üzerinde kullanılabilecek düzenleme araçları görüntülenir.

1. Araçları Aç/Kapat: Bileşene ait düzenleme araçlarının görüntülenmesini veya gizlenmesini sağlar.

2. Veri: Custom görselleştirmesinde kullanılacak veri alanlarının tanımlandığı ekrandır.

3. Ayarlar: Vega-Lite JSON tanımının oluşturulduğu ve bileşene ait diğer görünüm özelliklerinin yapılandırıldığı ekrandır.

4. Yenile: Veri ve yapılandırma üzerinde yapılan değişikliklerin uygulanarak görselleştirmenin yeniden oluşturulmasını sağlar.

5. Kaldır: Custom bileşeninin kumanda tablosundan kaldırılmasını sağlar.

Veri Yapılandırması

Custom bileşeninde kullanılacak veri alanlarının öncelikle Veri ekranı üzerinden tanımlanması gerekir.

Tablolar & Kolonlar : Seçili modelde var olan tablo ve kolonların bulunduğu alandır. Tablolar & Kolonlar bölümünde yer alan kolonlar, sağ tarafta bulunan bölümlere sürükle-bırak ile eklenir.

Kolon Eşleştirmeleri

• Sıralama ve Limit: Sorgu sonucunda dönecek verilerin sıralamasının ve gerekirse kayıt limitinin belirlenmesini sağlar.

• Columns: Custom görselleştirmesinde kullanılacak veri alanlarının eklendiği temel alandır. Kategorik, tarihsel veya sayısal kolonlar bu alana eklenebilir. Eklenen kolonların adları, Vega-Lite kodunda bulunan field tanımları ile eşleştirilerek görselleştirmede kullanılır.

• Saklı Alan: Görsel üzerinde doğrudan kullanılmayan ancak filtreleme, formül veya diğer arka plan işlemlerinde ihtiyaç duyulan kolonların eklenmesini sağlar.

Önemli: Columns alanına eklenen kolonlar, Vega-Lite kodunda kullanılabilir hale gelir. Bir kolonun X ekseninde, Y ekseninde, renkte, boyutta veya başka bir görsel özellikte kullanılacağı ise JSON içerisinde bulunan encoding tanımları ile belirlenir.

Yapılandırma Ayarları

Custom bileşeninde görselleştirmenin temel yapısı Ayarlar ekranı üzerinden yönetilir.

Standart grafik bileşenlerinde grafik tipi, eksenler ve görsel özellikler arayüz seçenekleri üzerinden yapılandırılırken, Custom bileşeninde bu tanımların büyük bölümü doğrudan Vega-Lite spesifikasyonu içerisinde yapılır.

Vega Lite Plugin Özelleştirme

Bu bölümde Custom görselleştirmesinin Vega-Lite JSON tanımının girildiği kod editörü bulunur.

Vega-Lite tanımında grafiğin türü, kullanılacak veri alanları, eksenler, renkler, tooltip bilgileri, katmanlar ve diğer görsel özellikler tanımlanabilir.

Örneğin temel bir Vega-Lite tanımında:

• mark, kullanılacak görsel işaretin veya grafik yapısının türünü,

• encoding, veri alanlarının görsel özelliklerle nasıl eşleştirileceğini,

• field, Vispeahen'den gelen hangi kolonun kullanılacağını,

• type, ilgili alanın veri tipini,

• x ve y, eksenlerde kullanılacak alanları,

• color, verinin renkle nasıl temsil edileceğini,

• tooltip, kullanıcı grafik üzerinde ilgili noktaya geldiğinde gösterilecek bilgileri

tanımlamak için kullanılabilir.

Örneğin Veri ekranındaki Tarih kolonu X ekseninde kullanılacaksa Vega-Lite tanımında ilgili alan:

"field": "Tarih"

şeklinde eşleştirilir.

Benzer şekilde Maksimum_Sicaklik kolonu görselin renk yoğunluğunu belirleyecekse color tanımı içerisinde bu kolon kullanılabilir.

Hazır Vega-Lite Örneklerinin Kullanılması

Vega-Lite tarafından sunulan hazır örnekler Custom bileşeninde oluşturulacak grafikler için başlangıç noktası olarak kullanılabilir.

Kullanıcı, ihtiyacına uygun bir Vega-Lite örneğinin JSON tanımını alarak Custom bileşenindeki kod editörüne uyarlayabilir.

Bu işlem sırasında özellikle;

• Örneğin kendi veri kaynağını tanımlayan data alanları,

• field içerisinde kullanılan kolon isimleri,

• Veri tipleri,

• Eksen tanımları,

• Başlıklar,

• Renk ve diğer görsel özellikler

Vispeahen içerisinde kullanılacak veri yapısına göre kontrol edilmelidir.

Vispeahen veriyi kendi veri modeli üzerinden sağladığı için, harici bir CSV veya URL kullanan Vega-Lite örneklerinde bulunan veri kaynağı tanımlarının doğrudan kullanılmasına çoğu durumda ihtiyaç duyulmaz.

Genel Görünüm

Custom bileşeni, standart grafiklerin yanı sıra Vega-Lite tarafından desteklenen harita tabanlı görselleştirmelerin oluşturulmasında da kullanılabilir. Harita özelliği etkinleştirildiğinde, kullanılacak coğrafi yapı Topojson alanı üzerinden belirlenir.

• Mevcut plugin bir haritadır: Etkinleştirildiğinde Custom bileşeninin harita tabanlı bir görselleştirme olarak kullanılacağını belirtir. Bu seçenek, bölge veya alan bazlı coğrafi görünümler oluşturulacağı durumlarda kullanılır.

• Topojson: Haritada kullanılacak coğrafi sınır yapısını belirler. Seçilen TopoJSON tanımı, görselleştirmede kullanılacak ülke, bölge veya idari alanların geometrisini sağlar. Örneğin UK - NUTS 1 seçildiğinde, Birleşik Krallık'ın NUTS 1 seviyesindeki bölgesel sınırları harita üzerinde kullanılabilir.

Harita kullanımlarında, veri içerisindeki bölge veya konum bilgisinin seçilen TopoJSON yapısındaki ilgili alanlarla uyumlu olması gerekir. Böylece veriler doğru coğrafi alanlarla eşleştirilerek harita üzerinde görselleştirilebilir.

Başlık Ayarları

• Başlık: Grafiğe verilecek başlığın tanımlandığı alandır.

• Başlık Hizası: Grafik başlığının sola, ortaya veya sağa hizalanmasını sağlar.

• Başlık Yazı Stilleri: Grafik başlığının kalın, italik veya altı çizili gibi yazı stilleriyle biçimlendirilmesini sağlar.

• Başlık Yazı Stili: Grafik başlığında kullanılacak yazı tipini (font) belirlemenizi sağlar.

• Başlık Yazı Rengi: Grafik başlığının metin renginin değiştirilmesini sağlar.

• Başlık özelliklerini rapordaki diğer pluginlere uygula: Tanımlanan başlık ayarlarının (stil, renk, hizalama vb.) aynı dashboard içindeki diğer grafik bileşenlerinin başlıklarına da otomatik olarak uygulanmasını sağlar.

Veri Yok Ayarları

• Veri Yok Açıklaması: Veri gelmediğinde kullanıcıya gösterilecek mesajı belirler. Default olarak “Seçilen kriterlerde veri bulunamadı. Plugin görselleştirilemedi.” mesajı görünür.

• Veri Yok Yazı Stilleri: Mesajı kalın , italik veya altı çizili yapmanı sağlar.

• Veri Yok Yazı Stili: Yazı tipini/fontunu belirler.

• Veri Yok Yazı Boyutu: Mesajın font büyüklüğünü belirler.

• Veri Yok Yazı Rengi: Mesajın hangi renkte gösterileceğini belirler.