Bu neden önemli?
Grafik, veriyi anlatmanın en hızlı yolu. Ama grafik kütüphaneleri ya çok katı ya da çok karmaşık oluyor. Yapay zekâya grafik çizdirmek istediğinde bu sorun daha da büyüyor. Doğru soyutlama, hem insan hem makine için işi kolaylaştırıyor.
Grafiğin dilbilgisi
Çoğu grafik kütüphanesinde önce grafik türünü seçersin: çubuk, çizgi, pasta. Sonra verini o türün beklediği şekle sokmaya çalışırsın. İstediğin grafik listede yoksa işin zor.
Bunun alternatifi, istatistikçilerin uzun süredir kullandığı bir fikir: grammar of graphics, yani grafiğin dilbilgisi. R dilindeki ünlü ggplot2 kütüphanesi bu fikirle çalışır. Burada grafik hazır bir tür değil, küçük parçaların birleşimi:
- İşaretler (marks): Ekrana çizilen şeyler. Çubuklar, noktalar, çizgiler, alanlar.
- Ölçekler (scales): Verinin ekrandaki karşılığı. Kategoriler eşit aralıklara, sayılar bir eksene.
- Eşlemeler (mappings): Hangi sütunun x’e, hangisinin y’ye ya da renge gideceği.
“Çubuk grafik istiyorum” demiyorsun. “Şu veriyi çubuk olarak çiz, harfleri x’e, sıklığı y’ye koy” diyorsun. Sonuç bir çubuk grafik oluyor, ama istersen üstüne bir ortalama çizgisi de ekleyebiliyorsun. Sadece bir işaret daha eklemek yetiyor.
TanStack Charts
TanStack, React Query ve TanStack Router gibi popüler kütüphanelerin arkasındaki ekip. TanStack Charts onların yeni, hâlâ alfa aşamasındaki grafik kütüphanesi ve tam olarak bu dilbilgisi fikriyle çalışıyor.
Videoda öne çıkanlar:
- Onlarca işaret türü: Çubuk, çizgi ve alanın yanında kutu grafikleri, ağaç haritaları, Sankey diyagramları, radar grafikleri ve dünya haritaları gibi coğrafi şekiller.
- Tip güvenliği: Verideki bir alanın adını yanlış yazarsan TypeScript hemen uyarıyor.
- Etkileşim ve animasyon: Yakınlaştırma, fırça ile aralık seçme, klavyeyle gezinme, sabitlenebilen açıklama kutuları, veri değişince yumuşak geçişler.
- Framework’ten bağımsız çekirdek: Grafiğin tanımı ayrı, React gibi bir framework’te göstermek ayrı.
- Küçük boyut: TanStack’in kendi karşılaştırmasına göre temel bir React çizgi grafiği sıkıştırılmış hâlde yaklaşık 29 kB. Bu, birçok popüler kütüphaneden daha küçük.
Ekip, API’yi yapay zekânın da kolayca yazabileceği şekilde tasarladığını söylüyor. Videoyu hazırlayan kişi de örneklerin çoğunu Claude’a yazdırmış ve az düzeltme gerektiğini anlatıyor.
Flint: Ajanlar için grafik dili
Microsoft Research’ün Flint projesi aynı soruna yapay zekâ tarafından bakıyor. Gözlem şu: Grafik üretmek aslında iki ayrı iş.
- Anlam: Bu sütun ay, şu sütun gelir, öteki yüzde değişim. Dil modelleri bunda iyi.
- Geometri: Eksen aralıkları, etiket boşlukları, renk geçişleri. Modeller burada sık sık hata yapıyor.
Flint bu iki işi ayırıyor. Model sadece kısa bir JSON yazıyor ve her sütunun ne olduğunu söylüyor. Bunun için 70’ten fazla “anlamsal tip” var: fiyat, sıralama, sıcaklık, ülke gibi. Geri kalan bütün görsel kararları ise her seferinde aynı sonucu veren bir derleyici veriyor. Çıktı; Vega-Lite, ECharts, Chart.js, Plotly ya da Excel grafikleri gibi zaten var olan araçların anlayacağı bir tanım oluyor.
Videodaki örnek: Bir sütunun tipini “miktar”dan “yüzde değişim”e çevirince, derleyici renk düzenini artı ve eksi değerleri ayıran bir palete çeviriyor, sayı biçimini ve ekseni de ona göre ayarlıyor. Tek kelime değişiyor, onlarca doğru karar geliyor.
Dikkat: Flint bir araştırma projesi, ürün değil. Videoya göre haritalar, 3B grafikler ve ağ diyagramları henüz yok. Ayrıca güçlü modeller basit grafikleri zaten sorunsuz çizebiliyor. Flint’in faydası daha çok küçük modellerde ve karmaşık grafiklerde ortaya çıkıyor.
Ortak ders
İki proje de aynı yere varıyor: Doğru yapı taşlarıyla, grafiği tarif etmek çizmekten kolay. Yapay zekâ tarafında bu fikir daha da genel: Model küçük ve kontrol edilebilir bir tarif yazıyor, gerisini kurallı bir program yapıyor.
Düşün
- En son çizdiğin grafik hangi “işaretlerden” oluşuyordu?
- 10 satırlık bir tarifi kontrol etmek mi kolay, 100 satırlık bir kodu mu?
Bu yazıdaki araçlar Araç Kutusu'nda: Flint, TanStack Charts