Visualization Series
Visualization Layouts — LineChart
Bu yazıda farklı görselleştirme altlıklarından ve bu altlıklar ve chartların ne amaçlı kullanıldıklarından bahsedeceğim. İlk olarak LineChart ile başlıyoruz.
--
Line Chart genelde 2 ekseni bulunan(X,Y eksenleri). Her eksen kendi içerisinde eşit değerlerle bölünmüş olan ve buradaki veri değişimini X ve Y de nasıl olduğunu algılamaya çalıştığımız görselleştirme aracıdır.
Burada X ve Y arasındaki ilişkiyi ve verinin değişimini görmeyi amaçlarız.
Örneğin bir ürün fiyatının yıllara göre $ cinsinden fiyatlarında olan değişimi göstermek istersek. aşağıdaki gibi bir grafik bize bu durumu anlatacaktır.
Bazen elimizde birden fazla veriyi aynı grafikte göstermek istediğimiz durumlarda olabilir. Yapılan alışveriş adedini hangi kaynaklardan yapıldığının ayrışımını görmek için aynı line’dan birden fazla kullanarak bunu yapabiliriz. Aşağıdaki resimde Kredi Kartı ve Paypal ödemelerinin zaman içerisindeki değişimi gösterilmiştir.
Bazen karşılaştırmak istediğimiz veriler aynı cins değildir. Yani yukarıda alışveriş sayısını farklı kaynaklar için göstermiştik. Ama aynı zaman aralığında 2 farklı türü göstermek istersek nasıl bir grafik çizeceğiz. Burada işte 2 Eksenli Line Chart ihtiyaç duyarız. Aşağıdaki örnekte Petrol & Gas endüstrisinde çalışan kişi sayısı ile teçhizat sayısı arasındaki değişim gösterilerek yıllar içerisinde otomasyon arttıkça çalışan sayısının nasıl azaldığı net olarak gösterilmiştir.
Veri
Veri her zaman istediğiniz gibi gelmeyebilir bazen o aralıkta bir veri olmayabilir. Bu tarz durumlarda sanki aynı bilgiyi içeren bazı bölgelerin null değeri(boşluk) ile gösterilmesi parçalı gösterilmesi gerekebilir.
Yada veriyi daha geniş kapsamlı kullanmak isteriz. X ve Y eksenindeki değerler tek bir sonucu değilde belli bir aralıkta noktalardan(sonuçlardan) oluşuyordur. Bu durumda Spline Chart dediğimiz Line(Çizgileri) doğrusal çizgiler yerine eğriler ile gösterme ihtiyacı duyarız.
Veri üzerinden referans çizgiler göstermemiz gerekir. Bu ağırlıklı ortalama, median, max, min vb noktalar üzerinden alınmış ortalama değerler bu chart bakan kişilere tek seferde bu referans çizgilerine göre karar vermelerini sağlar.
Özelleşmiş Line Chart Türleri
Bump Chart ise belli bir zaman aralığında sıralama(Ranking) amaçlı Y eksenini kullandığımız Chart Türüdür. Aşağıdaki resimde yıllar içerisinde Frontend Framework olan ilgilinin değişimi gösterilmek istenmiştir.
Etkileşim (Interaction)
Tek Bir Noktanın Detayı
En temel etkileşim ihtiyacı ilgili noktanın üzerine gelince bunun ile ilgili detayları göstermektir. Örneğin aşağıdaki örnekte tek bir noktaya odaklanılmış , bir noktanın değerlerinin tooltip gösterme işlemini gerçekleştiririz.
Bir Zaman Aralığındaki Tüm Noktaların Detayı
Ama işler her zaman o kadar kolay değildir. Örneğin Thundra APM projesinden bir Lambda türüne ait invocation sayılarının değişimlerini ilgili aralıktaki tümünü tek bir tooltip görmek istediğimiz durumlarda olabilir. Bu durumda Invocation, Hata ve Cold Start sayılarını tek bir tooltip içerisinde gösteririz
Birden Fazla Chart Aynı X (Zaman Aralığına) Bakacak Şekilde Senkron Çalıştırma
Yine Thundra APM üzerinden örnek verirsem. Aynı Lambda’nın Invocation Count, Duration Memory, CPU Metriklerini aynı anda odaklandığımız zaman aralıklarında birlikte çalışmasını isterseniz. Bunun için Chart Mouse Eventlerini senkronize etmeniz gerekir. Bunu bazı Chart kütüphaneleri destekler , bazılarında da sizin MouseEvent üzerinden React’da RenderProps bu yapıyı kurmanız gerekir.
Zoom Özelliği
LineChart içerisinde belli alanlara odaklanmak isteyebilirsiniz. Örneğin Thundra APM bir Lambda fonksiyonuna haftalık durumuna bakıyorum. Ama ben o anda bir dalgalanma gördüm veya grafikte ani bir yükselme farkettim. Eğer verinizin çözünürlüğü Saatlik vb.. daha alt çözünürlükleride destekliyorsa , kullanıcınıza aşağıdaki resimdeki gibi Zoom desteği vererek kullanıcının o bölgenin detayına daha fazla odaklanabilmesi sağlanır.
Brush Özelliği
Diğer bir etkileşim yöntemide ilgili LineChart altına bir Brush koyarak LineChart ileri geri veya belli bir alana odaklayabilirsiniz.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
