Temeller
Veri görselleştirme
Grafikler bir soruyu yanıtlar ve her zaman tablo ya da metin karşılığıyla gelir. Bu sayfa grafik türünü seçmeyi, renk rollerini, grafik anatomisini, sayı biçimini, hareketi ve erişilebilirliği anlatır.
Nasıl çalışır
Bölüm başlığı “Nasıl çalışır”- Grafikler ECharts ile çizilir (D-17). Renkler, yazı ve hareket token’lardan gelir; grafik kodunda renk kodu yazılmaz.
- Grafik, mod değiştiğinde paleti token’lardan yeniden okur; sayfa yenilenmeden açık ve koyu moda geçer. Seri paleti markadan bağımsızdır; her markada aynı sekiz renktir.
- Her grafik bir soruyu yanıtlar: “Son 12 ayda aylık işlem sayısı nasıl değişti?” Başlık bu soruyu ya da yanıtını söyler.
Grafik türünü seçmek
Bölüm başlığı “Grafik türünü seçmek”| Soru | Tür | Not |
|---|---|---|
| Zamanla nasıl değişti? | Çizgi | En çok 5 seri. Kesintisiz zaman ekseni. |
| Kategoriler nasıl karşılaştırılır? | Yatay ya da dikey çubuk | Çubuklar sıfırdan başlar; uzun etiketlerde yatay çubuk. |
| Bütünün parçaları neler? | Yığılmış çubuk | Pasta ve halka yalnızca 2-3 parça için; daha fazlasında çubuk. |
| Tek bir sayı ne durumda? | Gösterge kutusu | Değer, önceki döneme göre değişim ve isteğe bağlı küçük çizgi grafik. |
| Kesin değerler gerekiyor mu? | Tablo | Grafik kesin değeri okutmaz. |
| İki değişken arasında ilişki var mı? | Saçılım | Yalnızca analiz ekranlarında. |
Üç boyutlu grafik, çift eksenli grafik (eksenler açıkça etiketlenmemişse) ve göstergeli hız saati kullanılmaz.
Renk rolleri
Bölüm başlığı “Renk rolleri”Bir sayının yükseldiğini ya da düştüğünü gösterir. Bu renkler durum değil, yön anlatır; yönün yanında işaret (+, −) ya da ok da bulunur.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-data-positive | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-data-negative | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
Kategoriler
Bölüm başlığı “Kategoriler”Seriler sabit bir sırayla renk alır (color-chart-categorical-1…8); aynı seri her grafikte aynı rengi taşır. İlk beş renkte kırmızı ve yeşil yoktur; bunlar yalnızca altıncı ve yedinci seride gelir. Artış ve düşüş gibi yön bildiren değerler seri rengi değil data-positive ve data-negative kullanır. Her seri rengi yüzeye karşı en az 3:1 kontrast taşır ve renk körlüğü denetiminde komşu iki renk birbirine karışmaz. Alan ve vurgu dolguları için her serinin yumuşak bir eşi vardır (color-chart-soft-1…8).
| Sıra | Rampa adımı, açık mod | Rampa adımı, koyu mod |
|---|---|---|
| 1 | blue 700 | blue 400 |
| 2 | teal 500 | teal 300 |
| 3 | orange 700 | orange 500 |
| 4 | violet 500 | violet 500 |
| 5 | pink 600 | pink 400 |
| 6 | green 600 | green 500 |
| 7 | red 500 | red 300 |
| 8 | neutral 600 | neutral 400 |
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-chart-categorical-1 | #0068a5#0068a5#0068a5 | #79c2ff#79c2ff#79c2ff | |
--bigbang-color-chart-categorical-2 | #0a9f9a#0a9f9a#0a9f9a | #9edfda#9edfda#9edfda | |
--bigbang-color-chart-categorical-3 | #8a5600#8a5600#8a5600 | #c17a00#c17a00#c17a00 | |
--bigbang-color-chart-categorical-4 | #9575e2#9575e2#9575e2 | #9575e2#9575e2#9575e2 | |
--bigbang-color-chart-categorical-5 | #b34881#b34881#b34881 | #f897c6#f897c6#f897c6 | |
--bigbang-color-chart-categorical-6 | #138a50#138a50#138a50 | #2da264#2da264#2da264 | |
--bigbang-color-chart-categorical-7 | #e1595b#e1595b#e1595b | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-chart-categorical-8 | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-chart-soft-1 | #c8e5ff#c8e5ff#c8e5ff | #015182#015182#015182 | |
--bigbang-color-chart-soft-2 | #bfece8#bfece8#bfece8 | #005956#005956#005956 | |
--bigbang-color-chart-soft-3 | #fddbb4#fddbb4#fddbb4 | #6c4300#6c4300#6c4300 | |
--bigbang-color-chart-soft-4 | #e3dcff#e3dcff#e3dcff | #523e83#523e83#523e83 | |
--bigbang-color-chart-soft-5 | #ffd3e6#ffd3e6#ffd3e6 | #782f56#782f56#782f56 | |
--bigbang-color-chart-soft-6 | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-chart-soft-7 | #ffd6d4#ffd6d4#ffd6d4 | #822b2e#822b2e#822b2e | |
--bigbang-color-chart-soft-8 | #e5e5e5#e5e5e5#e5e5e5 | #262626#262626#262626 | |
--bigbang-color-chart-grid | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-chart-axis | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-chart-cursor | #f5f5f5#f5f5f5#f5f5f5 | #1e1e1e#1e1e1e#1e1e1e |
- Bir grafikte en çok 5 kategori rengi kullanılır. Daha fazlası “Diğer” altında toplanır ya da grafik bölünür.
- Komşu seriler renkle birlikte çizgi deseni, işaretçi şekli ya da doğrudan etiketle ayrılır.
Sıralı ve iki yönlü
Bölüm başlığı “Sıralı ve iki yönlü”- Sıralı ölçek (az → çok) tek renk ailesinin açıktan koyuya adımlarıdır: brand 100 → brand 800.
- İki yönlü ölçek (eksi ↔ artı) ortada nötr bir adımla iki ucu ayırır:
data-negative↔ neutral 200 ↔data-positive. - Isı haritasında her hücrenin değeri ipucunda ya da hücrenin içinde yazılı olarak da verilir.
Grafik bir durumu gösteriyorsa (başarılı, bekleyen, başarısız) Renkler sayfasındaki status-*-emphasis token’ları kullanılır ve her durumun adı göstergede yazar.
Anatomi
Bölüm başlığı “Anatomi”| Parça | Kural |
|---|---|
| Başlık | Grafiğin yanıtladığı soru ya da ana bulgu; type-heading-sm. |
| Alt başlık | Birim, dönem ve saat dilimi: “Adet, son 12 ay”. |
| Gösterge (legend) | 2 ve daha fazla seride gösterilir; mümkünse seriler çizginin ucunda doğrudan etiketlenir. |
| Eksenler | Etiketli; birim eksen başlığında ya da alt başlıkta. Izgara çizgileri color-chart-grid renginde, 1 px ve yalnızca yatay; eksen çizgisi ve çentik yok. Eksen yazısı color-chart-axis renginde, 12 px ve eşit genişlikli rakamlarla. |
| İmleç | Çubuklarda kategori arkasında color-chart-cursor bandı, çizgilerde 1 px border-default dikey çizgi. |
| İpucu | Fareyle, dokunmayla ve klavyeyle açılır; tam değeri ve tarihi gösterir. |
| Veri etiketi | Az sayıda çubukta doğrudan değer yazılabilir; kalabalıkta yazılmaz. |
| Kaynak ve not | Gerekirse grafiğin altında type-body-sm ile. |
Durumlar
Bölüm başlığı “Durumlar”| Durum | Gösterim |
|---|---|
| Yükleniyor | Grafiğin boyutunda iskelet; eksenler çizilmez. |
| Veri yok | Grafik alanında boş durum metni: “Bu dönemde veri yok.” |
| Hata | Grafik alanında hata metni ve “Yeniden dene” eylemi. |
| Kısmi veri | Eksik dönem kesik çizgiyle gösterilir ve notta açıklanır. |
Sayı ve tarih biçimi
Bölüm başlığı “Sayı ve tarih biçimi”- Değerler
Intl.NumberFormatile, tutarlarnarrowSymbolile biçimlenir. Bkz. Biçim ve yerelleştirme. - Eksen etiketlerinde kısaltma kullanılabilir (1,2 Mn); ipucunda tam değer gösterilir.
- Çubuk grafiğin değer ekseni sıfırdan başlar. Çizgi grafikte eksen sıfırdan başlamıyorsa bu eksende açıkça görünür.
- Eksi değerler sıfır çizgisinin altında çizilir ve eksi işaretiyle yazılır.
- Zaman ekseni
Europe/Istanbulsaat dilimindedir; alt başlık bunu söyler. - Grafik ön yüzde toplam ya da ücret hesaplamaz; değerler sunucudan hesaplanmış gelir.
Hareket
Bölüm başlığı “Hareket”Grafik ilk açılışta ve veri değiştiğinde kısa bir geçişle çizilir. Azaltılmış harekette grafik son hâliyle doğrudan görünür.
| Token | Açık mod | Koyu mod |
|---|---|---|
--bigbang-motion-chart-enter-duration | 0.4s0.4s0.4s | 0.4s0.4s0.4s |
--bigbang-motion-chart-update-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
- Sayılar saydırılmaz; yeni değer doğrudan görünür.
- Sürekli dönen ya da kayan grafik yoktur.
Erişilebilirlik
Bölüm başlığı “Erişilebilirlik”- Her grafiğin yanında aynı verinin tablosu ya da metin özeti bulunur. Tablo “Tabloyu göster” ile açılan bir bölümde olabilir (WCAG 1.1.1).
- Grafiğin kısa bir metin özeti vardır: “Aylık işlem sayısı Mart’tan bu yana artıyor; en yüksek değer Eylül’de.” Bu özet grafiğin erişilebilir açıklamasıdır.
- Çizgiler, çubuklar ve işaretçiler zemine karşı en az 3:1 kontrast taşır (WCAG 1.4.11).
- Renk tek başına anlam taşımaz: seriler desen, işaretçi ya da doğrudan etiketle de ayrılır (WCAG 1.4.1).
- İpucu klavyeyle açılabilir; veri noktaları arasında ok tuşlarıyla gezinilir.
- Grafik 320 CSS px genişlikte kendi kapsayıcısı içinde kayar ya da tabloya döner.
Yönergeler
Bölüm başlığı “Yönergeler”Yönü renkle birlikte işaretle de gösterin
Bölüm başlığı “Yönü renkle birlikte işaretle de gösterin”+%12,4−%3,1
%12,4%3,1