Photo by Kyle Cesmat on Unsplash

VISUALIZATION SERIES

Visualization — BarChart Samples

Bu blog’da BarChart ile ilgili yaptığım görselleştirme denemelerinden bahsediyor olacağım.

2 min readFeb 14, 2023

--

1. BarChart Filling And Stroke Configurations

Aşağıdaki örnekte BarChart üzerindeki Bar’ların farklı gösterilmesi için Stroke değiştirerek Borde kalınlıklarını ve renklerini değiştirebiliriz. Aynı zamanda her bir bar farklı pattern vererek içerisindeki fill color tonlarında da değişiklikler yapabiliriz.

Bu sayede seçili veya göstermek istediğimiz diğerlerinde farklı olan barı farklı gösterebiliriz.

https://onurdayibasi.dev/barchart

2. Percent StackBar Chart

Bu bileşeni özellikle Chart şeklinde değilde tablolarda CSS bazlı yüzde % oran göstermek için geliştirdim.

Verilen kullanım oranlarına göre yatayda bir bar oluşturur. Aslında bunları alt alta tablo satırları olarak eklediğimizde bu dikey duran bir barchart’ a dönüşür.

https://onurdayibasi.dev/percent-stacked-bar

3. Percent Bar Kullanımı

Bir önceki Chart gösteriminde bileşenlerin birbirlerine göre durumlarını gösterirken, aşağıdaki grafikte her bileşenin 2 değerinin %yüzdesel karşılaştırmasını yapabilirsiniz.

Örneğin Ankara’da satılan ürünlerin, A şubesinde satılana göre karşılaştırmasını yapmak istiyorsunuz. Bu durumda aşağıdaki görsel size Tüm Ankara / A Şubesi karşılaştırmasını tek görselde yapabilmenizi sağlar.

https://onurdayibasi.dev/percent-bar-color

4. Color RangeBar

Özellikle HeatMap tarzı gösterimlerde farklı Color yoğunluklarının farklı ölçütleri ifade ettiğini belirtmek istediğimiz yerlerde diğer Chart’lara yardımcı olması için bu bileşeni kullanırız.

https://onurdayibasi.dev/color-range-bar

Okumaya Devam Et 😃

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

--

--