Giriş
DynamicD3, D3.js kullanarak özel veri görselleştirmeleri sunar. Verilerinizi görüntülemenin en etkili yolunu seçmenize yardımcı olmak için sizinle birlikte çalışacağız: bu, Bar Charts, Line Charts, Pie Charts, Sankey Diagrams veya chloropleths, Bubble Charts veya Sunburst Diagrams gibi daha egzotik veri görselleştirmelerini içerebilir.
D3.js veri görselleştirmeleri araç ipuçları, yakınlaştırmalar, fareyle üzerine gelmeler ve animasyonlar gibi çok sayıda Eklentiler içerebilir. Bunlar kullanıcıların verileri daha sezgisel olarak anlamalarına yardımcı olur ve statik veri görselleştirmelerinde mümkün olmayan ilgi çekici bir deneyim sağlar. Ayrıca radyo düğmeleri, onay kutuları, kaydırıcılar veya geçiş anahtarları kullanarak etkileşimli deneyim yelpazesini daha da genişleten özel bir kullanıcı arayüzü oluşturabiliriz.
Size ya doğrudan web sitenize ekleyebileceğiniz düz JavaScript ya da bir React bileşeni veriyoruz. Demo olarak basit bir ücretsiz web sayfası kuracağız. Bir seçenek olarak, verilerinizi kolayca güncelleyebilmeniz için bir veri ızgarası oluşturabiliriz.
D3.js statik bir JSON veya CSV dosyasından veri kullanabilir veya bir API'den veri alabilir. Ayrıca verileri kolayca güncelleyebilmeniz için bir veri ızgarası oluşturabiliriz.
Çubuk Grafikler
Çubuk grafikler tipik olarak kategorik veriler için kullanılır, örneğin bu örnekte büyük bir hastanede üç spesifik organ üzerinde yapılan ameliyatların sayısı karşılaştırılmaktadır.
Benzer görünseler de sütun grafiğin histogramla aynı şey olmadığını unutmayın. Bir histogramda ülkeler gibi kategorik veriler bulunmaz (bir veri noktasının kesin olarak bir kategoride veya diğerinde olduğu). Bunun yerine, bir süreklilik oluşturan ancak kutucuk adı verilen farklı aralıklara bölünmüş verileri gösterir. Örneğin, x ekseninin belirli bir noktadan uzaklığı gösterdiği bir veri seti aralıklara ayrılabilir. Ancak bu aralıklar keyfidir ve genellikle verileri net bir şekilde göstermek için seçilir.
D3.js, çubuk grafik veya histogram için kullanılabilir ve bunlardan herhangi biri bir veya birden fazla veri kümesini temsil edebilir. Sürekli verileri temsil etmek için de kullanılabilir. Ancak, bu daha uygun olarak bir çizgi grafikte veya dağılım grafiğinde görüntülenir.
Çizgi Grafikler
Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).
Çizgi grafikler özellikle bir şekilde ilişkili olan birden fazla veri setini göstermek için kullanışlıdır. Bu veri setleri genellikle aynı x eksenini kullanır ancak farklı ölçeklere ve farklı y eksenlerine sahip olabilir. Özellikle farklı veri kümelerindeki eğilimleri görmek için kullanışlıdırlar (örneğin, farklı ülkelerde hastalıkların en yüksek olduğu zamanları karşılaştırmak gibi). bu örnekte farklı veri seti kombinasyonları arasında geçiş yapmak için bir kullanıcı arayüzü kullanılmıştır. D3.js'nin veriler değiştikçe dikey eksenin ölçeğini otomatik olarak ayarlayabildiğini unutmayın.
Çizgi grafiklerin bir diğer güçlü yönü de trendleri etkili bir şekilde analiz edebilmesidir. Her noktadan geçen ya da kısa veya uzun vadeli eğilimleri gösteren bir eğri çizilebilir. Yukarıda bağlantısı verilen örnekte, kullanıcıların farklı eğriler kullanarak veri setini farklı şekillerde keşfedebilmeleri için bir kullanıcı arayüzü eklenmiştir.
A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page
Pasta Grafikler
Pasta Grafikte, her dilimin açısı temsil ettiği miktarla orantılıdır. Pasta Grafikleri ve Donut Grafikleri aynıdır, ancak Donut Grafiklerinin ortasında veri içerebilen bir delik vardır. Donut grafiklerinde veri değerleri hiyerarşisini gösteren birden fazla halka olabilir; ancak bu tür grafikler Güneş patlaması diyagramı olarak adlandırılır.
Pasta grafikler gazetelerde yaygın olarak kullanılır. Ancak, tanıdık ve anlaşılması kolay olsalar da, oransal veya kategorik verileri göstermenin en iyi yolu değildirler, çünkü farklı değerleri karşılaştırmak zordur (dikdörtgenlerin yüksekliklerinin kolayca karşılaştırılabildiği çubuk grafiğin aksine. Bununla birlikte, veriler toplam değerin bir oranını temsil ettiğinde kullanışlıdırlar. Oranlar çubuk grafiklerle de gösterilebilir, ancak bu sezgisel olarak daha az açıktır.
Pasta metaforu, pastanın bir parçasını dışarı çizerek genişletilebilir. Bu, Pie Chart sayfasında gösterildiği gibi statik olarak veya fare ile üzerine gelme efekti kullanılarak yapılabilir. Bu, patlatılmış pasta grafiği olarak bilinir. Patlatılmış bölüm için daha ayrıntılı bilgi verilebilir.
Sunburst Diyagramları
Sunburst Grafikleri çok seviyeli bir Pasta Grafiği biçimidir. Bazen radyal ağaç haritaları olarak da bilinirler, çünkü veriler geleneksel bir ağaç haritası ile aynı hiyerarşik yapıdadır.
Bu veri görselleştirme türü, her kategori düğümü için dilimlenmiş bir dizi halka aracılığıyla hiyerarşiyi gösterir. Her halka hiyerarşideki bir seviyeye karşılık gelir; merkezdeki daire kök düğümü temsil eder ve hiyerarşi buradan dışarı doğru hareket eder. Örneğin, bu örnekte işlem türleri bölünmüştür. İlk halka operasyonları etkilenen organa göre ayırır. Bir sonraki halka bu bölümlerin her birini tedavi türüne (konservatif, operasyon, nakil veya ilaçlar) göre ayırır ve bir sonraki halka hastaların sigortası olup olmadığını gösterir. Fareyle üzerine gelindiğinde alttaki bir ekranda temel değerler gösterilmektedir. Bu, kullanıcıların ekranda hareket ederek verileri keşfedebileceği anlamına gelir. Örneğin, böbrek tedavisi gören hastaların oranının sigorta kapsamlarına göre nasıl değiştiğini bilmek isteyebilirler.
Renk, hiyerarşik gruplamaları veya belirli kategorileri vurgulamak için kullanılabilir. Yukarıdaki örnekte kullanıcı, veri setinin farklı yönlerini vurgulamak için renk şemasını değiştirebilir. İlk örnekte, her halka için farklı renk aralıkları kullanılmıştır. Bu, her bir halkada gösterilen verilerin anlaşılmasını kolaylaştırırken aynı zamanda bölüm sınırlarını da netleştirir. Ancak bu, büyük veri kümelerinde işe yaramaz. Bu durumda, belirli bir halkadaki tüm bölümlerin aynı renk tonuna sahip olması daha nettir. Son olarak, bazı durumlarda rastgele renkler kullanılabilir. Bunlar hiyerarşideki her bir seviyenin önemini anlamayı zorlaştırır, ancak farklı sektörleri görmeyi kolaylaştırır. Sunburst örneğindeki kullanıcı arayüzü ekranı bu alternatifler arasında geçiş yapar.
Sankey Diyagramı
Sankey diyagramları, bir kuruluş içindeki para akışı (bir mali tabloda gösterildiği gibi), bir dizi endüstriyel süreç boyunca enerji veya hammadde akışı veya bilgi gibi daha soyut bir varlığın akışı gibi akış süreçlerini temsil etmek için kullanılır. Her bir düğümün yüksekliği veya genişliği o düğümden geçen toplam akış miktarını, her bir düğüm çifti arasındaki çizgilerin kalınlığı ise bu düğümler arasında geçen akış miktarını temsil eder. Renk, ya akış miktarını göstermek için (örneğin, bir renk gradyanı kullanarak) ya da mültecilerin akışını göstermek için renkleri kullanan bu Sankey diyagramında olduğu gibi sürecin başka bir yönünü göstermek için kullanılabilir.
Sankeylerin sıklıkla kullanıldığı alanlardan biri de enerji sektörüdür. Örneğin, ülkelere göre doğal gazın kaynağını, varış noktasına hangi yollarla ulaştığını (boru hattı, gemi vb.) ve daha sonra nasıl kullanıldığını (son kullanıcılar) gösterebilirler. Bunun gibi diyagramlar, verimliliğin artırılabileceği alanları vurguladıkları için politika yapıcılar için yararlıdır.
Sankey diyagramları, zaman içindeki değişimleri göstermenin özellikle sezgisel bir yoludur. Bu Sankey Diyagramında çeşitli menşe ülkelerden Amerika Birleşik Devletleri'ne mülteci akışı belirli bir süre boyunca gösterilmektedir. Kaydırıcı, kullanıcıların zaman çizgisi boyunca hareket etmesini sağlar ve yumuşak geçişler, önemleri arttıkça veya azaldıkça düğümleri takip etmeyi kolaylaştırır.
Kloropleth
Koropletler, bir değişkenin coğrafi bir alan boyunca nasıl değiştiğini göstermek için renk kullanır. Isı haritalarına benzerler; ancak ikincisinden farklı olarak haritayı ülkeler, eyaletler, iller veya ilçeler gibi jeopolitik alt birimlere bölerler.
Bir kloroplette kullanılan değerler, alanların değişen büyüklüklerini dikkate almalıdır. Örneğin, farklı ülkelerin büyüklükleri arasında büyük farklar vardır, bu nedenle ülkeleri sadece nüfuslarına göre renklendirmek mantıklı değildir. Bunun yerine, bu veriler mutlak nüfus yerine nüfus yoğunluğu kullanılarak bölgeler arasında 'normalleştirilmelidir'. Her iki gösterim türü için de, daha koyu veya daha yoğun renkler genellikle daha yüksek değerleri temsil ederken, daha açık veya daha soluk renkler daha düşük değerleri gösterir.
Ne yazık ki, gerçek dünya verileri tipik olarak doğal kategorilere ayrılmamaktadır. Örneğin, bir rengin yoğunluğunun nüfus yoğunluğuyla orantılı olduğu bir kloropleth, farklı bölgelerin nüfus yoğunlukları arasında benzer bir fark olduğunda işe yarayabilir (aynı ABD eyaletindeki farklı ilçeler arasında olduğu gibi). Ancak, veriler genellikle aynı veri setindeki diğer değerlerden büyüklük sırasına göre daha büyük değerler içerir. Neyse ki D3.js zengin bir ölçek setine sahiptir. Bazı durumlarda, bir log ölçeği daha uygun olabilir: bu, küçük farklılıkları iyi gösterir, ancak aynı zamanda çok daha büyük farklılıkları da gösterir. Diğer durumlarda, belirli bir eşiğin üzerindeki veya altındaki değerleri göstermek için bir renk kullanılabilir. D3.js'yi veri görselleştirmeleri oluşturmak için böylesine güçlü kılan da işte bu yüksek esneklik seviyesidir.
D3.js, verileri ölçeklendirmemize yardımcı olmanın yanı sıra çok çeşitli harita projeksiyonları kullanmamıza olanak tanır: bunların verilerin algılanma şekli üzerinde önemli bir etkisi vardır. Diğer kütüphaneler kullanılarak üretilen kloroplethler genellikle Mercator projeksiyonu gibi standart projeksiyonlar kullanır ve bu da dünyanın belirli bölgelerinde büyük bozulmalara yol açabilir. Haritanın Birleşik Krallık'taki ilçeler gibi daha küçük alanları gösterdiği veya görüntülenen alanların hepsinin benzer bir enlemde olduğu durumlarda bu daha az sorun teşkil eder.
Son olarak, her biri farklı bir renk ölçeğine sahip iki ayrı (ancak ilişkili) veri parçası kullanmak mümkündür. Bu, İki Boyutlu Kloropleth olarak bilinir.
Kabarcık Grafiği
Kabarcık grafikleri, verilerin dairelerle değiştirildiği dağılım grafikleri gibidir. Bir dağılım grafiği bilgiyi temsil etmek için yalnızca bir noktanın konumunu ve rengini kullanabilirken, bir kabarcık grafiği yatay ve dikey boyutlara da sahiptir. Bu, kabarcık grafiklerini çok boyutlu ilişkileri görüntülemek için özellikle uygun hale getirir.
Her bir daire için sadece bir ekstra bilgi gösterilmesi gerekiyorsa, bu dairenin alanı ile temsil edilebilir. Ancak bu sorunlu olabilir, çünkü kullanıcılar dairelerin göreli boyutlarını alanlarından ziyade çaplarına göre değerlendirme eğilimindedir. Göstergede bunu açıkça belirtmek önemlidir.
Kabarcık grafikler, çok sayıda veri noktası olduğunda ve büyük bir veri aralığı olduğunda daha az iyi çalışır. Çok fazla veri noktası olduğunda ekran kalabalık görünebilir ve baloncuklar üst üste gelebilir. Veri setinde geniş bir değer aralığı olduğunda, daha küçük baloncuklar net bir şekilde görülemeyebilir. Bu sorunlar, altta yatan veri noktasının tam değeri gibi daha fazla bilgi vermek için fareyle üzerine gelme etkileşimleri kullanılarak bir dereceye kadar aşılabilir.
Kabarcık Grafiklerle ilgili son bir sorun da ağırlıklı ortalama yanılsamasıdır: kabarcıkların boyutları veri noktasının x ve y değerlerinin algılanmasını etkiler. Ortalama x ve y değerleri tahmin edilirken bu bozulma dikkate alınmalıdır.
Negatif değerleri göstermesi gereken kabarcık grafikleri, negatif değerleri temsil eden kabarcıkların ortasında bir sembol, pozitif ve negatif için farklı renkler veya hatta farklı şekiller kullanılarak oluşturulabilir. D3.js ile bu düzeyde esneklik mümkündür, ancak çoğu veri görselleştirme kütüphanesinde durum böyle değildir.
