Eklentiler

Araç İpuçları

Herhangi bir grafiğe veya çizelgeye araç ipuçları ekleyebiliriz. Bunlar özellikle çok sayıda veri noktası olduğunda (örneğin, bir Dağılım Grafiğinde) faydalıdır. Daha küçük veri setlerinde bile, grafiğin dağınıklığını gidermeye yardımcı olarak kullanıcıların genel modellere odaklanmasını sağlarlar.

Ayrıca, grafiğin farklı bölümlerinin veri setinin farklı yönlerini aktardığı karmaşık grafiklerde de kullanışlıdır ve bu, bu tür diyagramlara aşina olmayan kullanıcılar için açık olmayabilir. Örneğin bu Sunburst diyagramında kullanıcılar hem altta yatan veri noktasını hem de bu veri noktasının bağlamını görmek için fareyi segmentlerin üzerine getirebilir. Bu durumda, Sunburst diyagramı tıbbi tedavileri türüne, etkilenen organa ve hastanın sigorta durumuna göre ayırmaktadır. Bu bilgiler ekranın alt kısmında görüntülenir ve kullanıcı her bir segmentin üzerinde fareyle gezindikçe değişir.

D3'ün en güçlü yönlerinden biri çok fazla esneklik sunmasıdır. Bir araç ipucu, veri setinde bulunan herhangi bir veriyi, bağlamsal metni ve hatta tamamen farklı bir veri setinden değerleri içerebilir. Örneğin bu Sankey kullanıcılara düğümlerin toplam mülteci sayısını temsil ettiğini, çizgilerin ise her bir kaynak (bu durumda bir ülke) ve hedef (bu durumda bir ABD eyaleti) arasında hareket eden mülteci sayısını temsil ettiğini gösterir. Bu metin herhangi bir dilde olabilir, bu da yerelleştirmeye büyük ölçüde yardımcı olur.

Gösterimde iki veya daha fazla veri seti kullanıldığında araç ipuçları bunlar arasındaki karşılaştırmaları gösterebilir. Örneğin, hem bu yılın hem de geçen yılın değerini veya farklı bölgeler için veri setlerini gösterebilirler. Tersine, tek bir veri setiyle, güven aralıklarını, yüzde değerlerini veya veri noktalarıyla ilgili diğer istatistiksel bilgileri görüntülemek için kullanılabilirler ve kullanıcıların verilerin güvenilirliğini değerlendirmelerine yardımcı olurlar.

Araç ipuçlarının bir diğer faydası da eğlenceli olmalarıdır! Kullanıcıların grafikle etkileşime geçmesine ve verileri kendi koşullarına göre keşfetmesine olanak tanıyarak etkileşimi artırırlar.

Yakınlaştırmalar

Yakınlaştırmalar, kullanıcıların veri noktalarını ve eğilimleri daha yakından incelemek için bir grafiğin veya çizelgenin belirli alanlarını yakınlaştırmasına olanak tanır. Bu özellikle büyük veri kümeleri için faydalıdır. Ayrıca, kullanıcıların veri setinin farklı yönleriyle ilgilendiği durumlarda da kullanışlıdır: örneğin, bazı kullanıcılar belirli bir zaman dilimine odaklanmak isteyebilir.

Yakınlaştırmalar ayrıca kullanıcıların veri setinin farklı bölümleri arasında ayrıntılı karşılaştırmalar yapmasına olanak tanır. Bir alanı yakınlaştırıp ardından farklı bir alana geçerek verileri etkileşimli olarak keşfedebilirler. Bu, korelasyonları, aykırı değerleri ve örüntüleri daha net görmelerine yardımcı olur.

Yakınlaştırmaların bir diğer faydası da kullanıcıların akıllı telefonlar gibi daha küçük cihazlar kullanarak veri setinin tamamını görmelerine ve yine de ihtiyaç duydukları ayrıntıları görebilmelerine olanak sağlamasıdır. Akıllı telefon kullanıcıları 'kıstırma hareketini' kullanarak ekranı yakınlaştırmaya alışkındır.

Yakınlaştırma, görme kusurları olan kişiler için erişilebilirliği artırmaya da yardımcı olur.

Fırçalar

Fırçalama, kullanıcıların veri setinin bir kısmıyla etkileşime girmesi için bir yol sunması açısından yakınlaştırmaya benzer şekilde çalışır. Ancak grafiğin bir bölümünü büyütmek yerine bu alanın boyutu değişmez. Fırçalanan alan, renk değişikliği gibi başka bir şekilde gösterilebilir.

Verileri filtrelemek için bir fırça kullanılabilir - örneğin, kullanıcılar farelerini hareket ettirerek bir alan grafiğinin x ekseni boyunca fırçalayabilirler. Fırçalanan alan daha sonra ekranın başka bir bölümünde görünebilir. Fırça kullanmanın bir başka yolu da aynı verileri farklı bir ölçekte gösteren ayrı bir grafik eklemektir. Bu durumda, fırça yakınlaştırmaya benzer şekilde çalışır. Ancak, orijinal grafiğin boyutları değişmediği için kullanımı daha kolay olabilir.

Animasyonlar

Animasyonlar çeşitli şekillerde yardımcı olur. Örneğin basit bir Çubuk Grafik söz konusu olduğunda, çubuklar anında görünmek yerine yavaşça yukarı kayabilir. Bu, grafiğin bilgi içeriğine çok az şey ekler, ancak kullanıcılar için daha ilginç hale getirir.

Animasyonlar geçişler için kullanıldıklarında daha ciddi bir rol oynarlar. Örneğin, bu Sankey Diyagramı birkaç yıla ait verileri göstermektedir. Kullanıcı kaydırıcıyı kullanarak bir yıldan diğerine geçerken düğümlerin göreli boyutları değişir. Boyut sırasına göre düzenlendikleri için hareket ederler. Animasyon olmasaydı değişim sarsıcı olurdu ve 'nesne sabitliğini' korumak zor olurdu. Örneğin, bir kullanıcı belirli bir ülkeden gelen akışın (bu durumda mültecilerin) yıldan yıla nasıl değiştiğiyle ilgilenebilir. Eğer bu düğüm yumuşak bir geçiş olmadan atlarsa bunu yapmak zor olacaktır.

Başka bir geçiş örneği bu PieChart'de gösterilmiştir. Bir segmentin üzerine fare ile gelindiğinde hafifçe dışarı doğru hareket eder. Yumuşak bir geçiş kullanıldığında bu hareket doğal görünür ve pasta metaforunun korunmasına yardımcı olur. Bu olmadan, pasta grafiğin bu bölümü bir konumdan diğerine atlayacaktır. Aynı nedenden dolayı animasyonlar, hisse senedi etiketindeki değerler gibi zaman serisi verilerini görüntülerken özellikle iyi çalışır. Yine bunun faydası, gözün belirli bir değer değiştikçe onu takip etmesinin daha kolay olmasıdır.

Veri setleri arasında geçiş yapmak için animasyon kullanıldığında ve bu geçişler <TransLink>this slider</TransLink> gibi bir kullanıcı arayüzü tarafından kontrol edildiğinde, kullanıcı değerleri neredeyse bir video ekranı gibi keşfedebilir.

Renkler

D3 grafikleri ve çizelgeleri JavaScript kullanılarak oluşturulduğu için renkleri bir fonksiyon kullanarak ayarlamak mümkündür. Bu, rengin diğer veri görselleştirme kütüphanelerinde mümkün olmayan şekillerde kullanılabileceği anlamına gelir.

Rengin en belirgin kullanımı farklı veri setlerini ayırt etmektir - örneğin, bu Bar Grafik benzer verilerin birden fazla setine ait verileri içerir. Her veri seti için farklı renkler kullanarak ve bu renklerin anlamını bir göstergede açıklayarak, bunları aynı grafikte bir araya getirmek mümkündür.

Renk, benzer değer kümelerini gruplamak için de kullanılabilir. Örneğin, bu Sunburst diyagramı bir veri hiyerarşisini göstermektedir. Her halka hiyerarşide farklı bir seviyeyi temsil etmektedir. Renk kullanarak, aynı seviyeye ait değerleri gruplandırabilir ve bunları bir göstergede açıklayabiliriz.

D3'ün bir başka avantajı da rengin tonunun yanı sıra doygunluğunu da değiştirmenin mümkün olmasıdır. Örneğin, bu Sunburst diyagramında (en üstteki örnek) aynı halkadaki tüm bölümler aynı renge sahipken, her bölümdeki rengin doygunluğu değişmektedir. Bu durumda, tek tek sektörleri daha net bir şekilde ayırt etmek için yoğunluk basitçe rastgele ayarlanmıştır (bunu bir halkadaki her sektörün hem aynı renk tonuna hem de aynı doygunluğa sahip olduğu örnekle karşılaştırın). Bununla birlikte, doygunluk altta yatan veri noktasıyla da ilgili olabilir. Bu durumda, bölümlerin boyut sırasına göre düzenlenmemesi daha iyidir, aksi takdirde daha küçük sektörleri ayırt etmek çok zor olacaktır.

Diyagramı daha net hale getirmek için rengin kullanıldığı bir başka örnek de bu Sankey diyagramıdır. Üstteki iki örnekte, bir renk başlangıç düğümlerini, diğer renk ise hedef düğümleri temsil etmek için kullanılmıştır. Buna ek olarak, renk yoğunluğu her bir düğümün boyutunu temsil eder. Aynı renkler bağlantı çizgilerinde de kullanılmıştır. Dolayısıyla, düğümler tarafından temsil edilen değerler ile bağlantı çizgileri tarafından temsil edilen değerler arasında açık bir bağlantı vardır. Son iki örnekte iki renk kullanılmış ve altta yatan veri değerleri bu iki rengin göreceli değerleriyle temsil edilmiştir. Bu, özellikle veri değerleri arasındaki farklar ince olduğunda bazen daha net olabilir.

Son olarak, renk bazen altta yatan bir anlam olmaksızın sadece diyagramın parçalarını ayırmak için kullanılabilir. Üçüncü Güneş patlaması diyagramı örneğinde durum budur. Renkler, Güneş Patlaması diyagramındaki sektörler arasındaki sınırların açıkça görülebileceği şekilde özellikle seçilmiştir. Bu özellikle değerler küçük ve sektörler çok dar olduğunda kullanışlıdır.

Rengin kullanılabileceği bir başka yol da belirli bir veri noktası kümesini ayırt etmektir. Bu, bir Fırça ile birleştirilebilir (yukarıya bakın). Kullanıcılar grafik üzerinde fırça kullanarak veri noktalarını filtreleyebilir. Filtrelenen değerler farklı bir renk olarak gösterilebilir ve bu renk ayrı bir göstergeye bağlanabilir.

Fırça olmadan bile renkler belirli değerleri vurgulamak için yararlı olabilir. Örneğin, D3.js ile aykırı değerleri belirli bir renk yapabilir veya negatif ve pozitif değerler için farklı renkler kullanabiliriz. Renkler akıllıca kullanıldığında, özellikle de çok sayıda veri noktası olduğunda, veri görselleştirmeleri çok daha net hale gelir. Renk kodlaması, bir veri görselleştirmesinin genel yapısını göstermek için de kullanılabilir.

Renkler de etkileşimlere yardımcı olabilir. Bir veri noktasının, çubuğun veya çizginin rengi fareyle üzerine gelindiğinde değişerek seçildiğini vurgulayabilir.

Veri Izgarası

Bir D3js grafiği veya çizelgesi için veriler tipik olarak üç kaynaktan birinden gelecektir. Verilerin çok sık değişmesi beklenmiyorsa, sunucuda bir JSON veya CSV dosyasında saklanabilir. Veriler yerel bir veritabanından geliyorsa, bu veritabanının ya özel bir arayüzle ya da DBeaver gibi bir veritabanı aracıyla doğrudan güncellenmesi gerekecektir. Bunu sizin için ayarlayabiliriz.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

Veri ızgarasının bir çeşidi de formdur: bu, bir web sitesindeki iletişim formu gibi işlev görür. Bu, verilerin veri ızgarasına aşina olmayan personel tarafından girilmesi gerektiğinde daha uygun olabilir.

Kullanıcı Arayüzü Öğeleri

D3.js sınırlı sayıda UI aracı sunsa da, bunları MUI gibi bir bileşen kütüphanesi kullanarak ya da düz HTML olarak kodlamak daha iyidir.

En kullanışlı kullanıcı arayüzü öğeleri radyo düğmeleri ve onay kutularıdır. Bunlar bazen karıştırılmaktadır. Bu Yığılmış Çubuk Grafik'te gösterilenler gibi radyo düğmeleri, kullanıcıların birbirini dışlayan bir dizi seçenek arasından seçim yapmasına olanak tanır: bu durumda, basit bir Çubuk Grafik olarak gösterilen tek bir veri kümesini veya Yığılmış Çubuk Grafik olarak gösterilen birden çok veri kümesini seçebilirler. Bununla birlikte, verilerin görüntülenme şeklini değiştirmek için de kullanılabilirler. Bu Sunburst veri görselleştirmesinde radyo düğmeleri, veri setinin farklı yönlerini ortaya çıkarmak için rengin kullanılma şeklini etkiler.

Öte yandan onay kutuları, kullanıcıların herhangi bir seçenek permütasyonunu seçmesine olanak tanır: bu durumda, seçenekler birbirini dışlamaz. Onay kutusu örneğinde, <Link>Line Chart veri görselleştirmesi</Link> sadece bir veri setini, herhangi iki veri setini veya üçünü birden gösterebilir. Bu, kullanıcıların veri seti çiftleri arasında belirli karşılaştırmalar yapması gerektiğinde son derece yararlıdır: örneğin, kalp ameliyatları ile karaciğer ameliyatları için değerleri karşılaştırmak ve netliği artırmak için dalak ameliyatları için değerleri kaldırmak isteyebilirler.

D3.js veri görselleştirmelerini geliştirmek için yararlı olan bir başka UI öğesi de geçiş anahtarıdır. Bu, diyagram iki durumdan birinde olabildiğinde veya kullanıcılara netliği artırmak için veri görselleştirmesinin bir kısmını değiştirme seçeneği sunmak istediğinizde kullanılır. Bu örnekte, <Link> Çizgi Grafiği ile Alan Grafiği arasında geçiş yapmak için bir geçiş anahtarı kullanılmıştır</Link>.

Son olarak, kaydırıcılar kullanılabilir. Bunlar özellikle bir veri görselleştirmesi farklı zaman dilimlerinden veri setleri içerdiğinde işe yarar. Bu Sankey veri görselleştirmesinde olduğu gibi, kullanıcıların zaman çizgisi boyunca sezgisel olarak ileri ve geri hareket etmelerine olanak tanırlar