VISUALIZATION SERIES

Visualization Layouts — Pie and Donut Charts

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. 3ncü olarak Pie ve Donut Chart ile devam ediyoruz.

Onur Dayıbaşı
Frontend Development With JS
4 min readFeb 13, 2021

--

Önce Pie ve Donut Chart birer örnek gösterelim. Soldaki Pie, sağdaki de Donut Chart. İki grafikte bir bütünün % kaçı olduğu konusunda kullanıcıya bilgi veriyor. Aradaki farklara değinmeden önce biraz kendilerinden bahsedelim.

https://www.d3-graph-gallery.com/pie

Pie Chart ismini turta ve tart pastasından alıyor. Ortası kapalı bu tatlının farklı açılarda dilimlere bölümlenmesi ile paylaşım gerçekleştiriliyor. Aynı gerçek hayattaki bu kullanım görselleşirmeye de yansımış.

Tart, Turta

Donut dediğimiz ise ortası delik şekerlemeler. Bu tarz veri görselleştirmelerine Donut Charts deniyor.

Donuts

Peki bu 2 chart türüne baktımığımızda bir önceki Line ve Bar Chart tan farklı olarak Radial Türlerde bir gösterime sahip olduğunu görebilirsiniz. Radyal ne demek ? Yani dairesel gösterime sahiptir.

Line ve Bar Chart Kartezyen Koordinat Sistemini kullanırken; Yani x ve y eksenindeki uzunluklar üzerinden bir ölçü ve karşılaştırma altlığı oluştururken,

https://en.wikipedia.org/wiki/Cartesian_coordinate_system

Pie ve Donut Chart Polar Koordinat Sistemini kullanır. Yani açılar üzerinden derece/radyan olarak bütüne oranı veya birbirine oranını göstermeyi daha iyi sağlar.

https://en.wikipedia.org/wiki/Polar_coordinate_system

2015 seçimlerindeki Amerika nüfusunun 5 yaş ara ile yaş dağılımına baktığımızda tek bir bakışta, bütün ile dilimler arasındaki bağlantıyı kurmamızı sağlar. Aşağıdaki resimde tüm 0–60 yaş arası nüfus dağılımı birbirine yakın iken, 60 yaşından sonra nüfus giderek azalmaktadır.

https://observablehq.com/@d3/pie-chart

Aynı grafiği bar chart olarak incelediğimizde ise en büyük nufüs aralıkları ile en düşük nüfus aralıklarını görmemizi ve karşılaştırmamızı sağlar. İnsanın gözü aşağıdaki grafikte

  • Birincil olarak 22.6M ve 22.5M olan 20–25 yaş aralığı ile 55–60 yaş aralığına
  • İkincil olarak en an nüfusu olan yaş aralığına yani 80–85 yaş aralığına bakıyor kişi.
https://observablehq.com/@observablehq/why-use-a-radial-data-visualization

Burda Radyal grafiklerin avantajı daha özet bilgiye tek bakışta hızlı bir şekilde ulaşmak. Ve bütün ile bir ilişki kurabilmek.

Bu 2 grafiğin ortak özelliklerini birleştiren bir Chart türüde Donut Chart. Pie Chart türeyen türeyen bu grafik orta kısmının kaldırılması ile oluşuyor. Peki neden bu şekilde bir grafiğe ihtiyaç duyuyoruz ?

Cevap çoğu kişi için estetik olabilir. Örneğin ben kendi web sitemde yazıların okunma oranlarını Donut göstermek istedim, tamamen estetik açıdan düşündüm.

https://www.onurdayibasi.com/ — Blog Okunma Dağılımı

Peki bu Chart gösterebilmek için bazı koşulların olması gerekiyor mu ? Evet Kategori sayınız çok fazla olduğunda bu Chart kullanmak, Chart anlaşılmaz olmasına neden olur. Bundan dolayı 3,5 kategori gösteriminde Donut Chart kullanmanızı öneririm.

Estetik dışında bir diğer özellikte Donut Chart Alanlar üzerinden bütün ile ilişki kurmaması Uzunluklar üzerinden bir karşılaştırma yapmayı sağlaması aynı BarChart olduğu gibi. Çünkü insan gözü tek boyuttaki uzunluk karşılaştırmasını alan karşılaştırmasına göre daha rahat yapabilir. Donut Chart aslında Stack Bar Chart’larda bulunun bir Bar elemanın yuvarlak hale getirilmesidir. Bu sayede siz Pie Chart taki gibi bütüne bakmak yerine uzunluklar üzerinden de bir karşılaştırma yapabilirsiniz.

https://medium.com/@hypsypops/pie-chart-vs-donut-chart-showdown-in-the-ring-5d24fd86a9ce

Bunu aşağıdaki 2 Chart odaklanarak kendiniz’de çıkartabilirsiniz.

https://www.onurdayibasi.com/ — Blog Okunma Dağılımı

Soldaki Pie Chart gözünüz merkeze ve bütüne odaklanırken, Sağdaki Donut Chart en büyük uzunluklar algılama sayesinde en büyük okunma oranı olan Mimari ve Temel kısımlara hızlı bir odaklanma gerçekleşir.

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--