D3 Derinlemesine İnceleme

• D3 in Depth, D3 6 ve 7 temel alınarak D3.js ile özel veri görselleştirmeleri oluşturma sürecini ele alan bir öğrenme kaynağıdır
• Basit grafik kullanımından çok özel görselleştirme oluşturmaya odaklanır ve web görselleştirmesinin bileşenlerini de birlikte öğrenmeyi sağlar
• HTML, SVG, CSS ve JavaScript temelleri D3 çalışmalarıyla bağlantılı olduğundan web tabanlı veri sunumunu anlamaya yardımcı olur
• React, Chart.js ve Leaflet kullanan dashboard ve veri hikâyesi kaynaklarıyla da bağlantılıdır; böylece JavaScript görselleştirme öğrenme akışı oluşturulabilir
• D3’yi derinlemesine öğrenmek isteyen okuyucular için kavramları anlama ile pratiği birlikte sunan giriş ve ileri seviye bir kaynak olarak kullanılabilir

---

D3 in Depth’in kapsadığı alan

• D3 in Depth, D3 sürüm 6 ve 7’yi hedefler
• D3.js kullanarak özel veri görselleştirmeleri oluşturmayı öğrenebilirsiniz
• Web tabanlı görselleştirme üretimi için gerekli temel öğeler olarak HTML, SVG, CSS ve JavaScript’i birlikte ele alır

Birlikte incelenebilecek JavaScript görselleştirme kaynakları

• Data Dashboards with JavaScript, React, Chart.js ve Leaflet kullanarak veri dashboard’ları oluşturmayı ele alır
• Visualising Data with JavaScript, Chart.js, Leaflet, D3 ve React kullanarak grafikler ve veri hikâyeleri oluşturmayı ele alır
• Bir okuyucu değerlendirmesi, bu kaynağı D3 kitapları arasında yüksek değerlendiriyor; içeriğin net, takip etmesi kolay ve kavramsal olarak sağlam olduğunu düşünüyor

[GN⁺]

Hacker News yorumları

• D3 ile veri görselleştirme fikri iyi, ama biraz daha üst seviye bir araç istiyorsanız D3 ekibinin yaptığı Observable Plot[1]'a bakmaya değer.
  D3'ün üzerine grafik, chart ve plot oluşturmak için pek çok yerleşik yaklaşım ve kullanım kolaylığı ekleyen bir kütüphane.
  Bunun da ötesinde Observable Framework[2] var; Plot, D3 ve çeşitli diğer kütüphaneleri destekleyen, görselleştirme panoları için bir statik site oluşturucu.
  1: https://observablehq.com/plot/
  2: https://observablehq.com/framework/
  • Son zamanlarda ise tam tersi daha cazip geliyor. Çoğu durumda insanlar sonucun tam olarak nasıl görünmesi gerektiğini zaten biliyor, ama framework'ler doğası gereği çok sayıda önceden belirlenmiş ayar sunuyor ve bu ayarların biraz dışına çıkmaya çalışınca iş acı verici hale geliyor.
    Çeşitli plot türlerinde çoğu zaman SVG verisini doğrudan manipüle etmek gerçekten daha kolay oluyor ve o kadar da zor değil.
    SVG veya canvas çıktısını daha kolay manipüle etmeyi sağlayan bir kütüphane ya da framework olsa keşke. Küçük değişiklikler çok kolay olmalı, ama framework ne kadar üst seviyeye çıkarsa belirlenmiş yolun dışına çıkmak da o kadar zorlaşıyor.
  • Observable Plot harika. Çok esnek ve sezgisel kullanılabiliyor, bu yüzden eskiden kullandığım Plotly.js'e kıyasla artık bunu tercih ediyorum.
    Dokümantasyon da fena değil, ama işe yarar bir API referansı bölümü eksik olduğu için özellikleri keşfetmek pek kolay değil.
  • Web görselleştirmeleri için Matlab benzeri sürükle-bırak arayüzü olup olmadığını merak ediyorum.
    HTML5 canvas ile grafik yapmaktan mümkün olduğunca kaçınmaya çalışıyorum; bu yüzden daha yeni bir tasarım yaklaşımı olsa iyi olurdu.
  • Plot ve Framework, Observable ekosistemine bağlı ve kendilerine özgü bir öğrenme eğrileri var. Esneklik ve kontrol açısından en iyisi yine D3 öğrenmek.
  • Bu web sitesinin başkalarına da takılarak mı çalıştığını merak ediyorum. İçeriği yoğun web sayfalarında sık sık tekleme hissettim.
    Düzenleme: Donanım hızlandırmayı açınca daha akıcı oldu ama Ryzen 9'da bile hâlâ beklediğimden daha fazla takılıyor.
• D3'ü seviyorum ve onunla çok şey yaptım, ama birkaç yıl kullanmayıp geri döndüğüm her seferde neredeyse hiçbir şey hatırlamıyorum, dokümantasyon da daha da kafa karıştırıcı geliyor ve yeniden sıfır noktasına dönmüş gibi hissediyorum.
  10 yıldır görmediğim bir kısmi diferansiyel denklemi çözmem istense sanırım ona daha çabuk yeniden alışırım.
  D3 referans dokümantasyonunun da gerçekten korkunç olduğunu düşünüyorum.
  • D3'ü sürüm 2'den 7'ye kadar yoğun kullandım ve bu süreçteki refaktörler yüzünden çevrimiçi örnekler zaten baştan anlaşılması zorken güncellemesi daha da zor hale geldi.
    Yine de artık daha stabil görünüyor. D3'ü tek başına kullanmak yerine Svelte+D3 ile daha imperative tarzda yazmaya başlayınca daha iyi kavradım.
    Böylece oluşturulan öğeleri sonradan geliştirici araçlarında incelemek yerine, üretilen öğeleri daha kolay anlayabildim.
    D3 ve Svelte'i birlikte kullanmak için şu site faydalı: https://svelte.recipes/
  • Bence bu sorun diğer plotting kütüphanelerine kıyasla çok daha az yaşanıyor.
    Yaptığım işlerin %80'i uygulama, %10'u sistem, %10'u ise veri analizine daha yakın; bazen iki hafta boyunca bir Jupyter notebook hazırlayıp sonra iki ay hiç bakmadığım da oluyor.
    Çoğu plotting kütüphanesinde ezberlenmesi gereken çok sayıda keyfi kural var ve genelde birden fazla küçük alan özel dili bulunuyor. Basit bir string'in atoi'den çok daha karmaşık biçimde yorumlanması gibi.
    Ayrıca eksen aralığı belirleme, çok büyük sayıda noktayı işleme gibi çeşitli alanlarda bana göre yanlış olan şeyler var.
    D3 birçok şeyi sana yaptırıyor ama bunun için sunduğu arayüz kavramsal olarak sezgisel. Şişenin içinde gemi inşa eder gibi bir API ile başkasının şişkin ve bug dolu genel amaçlı kodunu kullanmak yerine, D3.js ile doğru düzgün yapmak daha iyi bence.
  • D3'ü çok kullandım, hatta AngularJS ve Angular için entegrasyonlar bile yazdım. Güçlü bir araç ama bana hep pek sezgisel gelmedi.
    Yanlış kullanması kolay, debug etmesi zor, anlaması da güç.
    Bu, sorunun kolay çözüldüğü anlamına gelmiyor. Çok spesifik veri odaklı grafikler yapmak gerekirse yine de büyük ihtimalle D3'ü seçerim.
  • Kalkülüs için insan hesaplama arayüzü nesiller boyunca özenle rafine edildi. Newton'ın orijinal metinlerinden biraz okumak bile bunun eskiden hiç de böyle olmadığını hemen gösterir.
    API'leri bu ölçütle karşılaştırmak aslında pek adil görünmüyor.
  • Ben de aynı deneyimi yaşadım. Bugünlerde bir teknik lider olarak, yüksek seviyede alan bilgisi gerektiren kütüphanelerin kullanılmamasını güçlü biçimde istiyorum.
    Yazanın bile anlamakta zorlanacağı koddan mümkün olduğunca kaçınmak gerekir ve D3 bu tür kütüphanelerin önde gelen örneklerinden biri.
• D3 işte kullanmasanız bile öğrenmeye değer bence. Bu kütüphanenin özü, verinin yansıtıldığı hedefin boyutlarıyla verinin kendi boyutlarının her zaman farklı olması.
  Örneğin 0-100 aralığındaki veriyi 1920x1080 çözünürlüklü bir 1080p ekrana çizecekseniz, bir noktada veriyi ekran projeksiyonuna uyacak şekilde nasıl ölçekleyeceğinize karar vermeniz gerekir.
  Matematiği kendiniz hesaplayabilirsiniz ya da bunu D3 gibi bir kütüphaneye bırakabilirsiniz.
  Veriyi web üzerinde çizmiyor olsanız bile bir gün bir yerde veri çizeceksiniz ve o ekosistemde aynı rolü üstlenen araçları bulmanız faydalı olacaktır.
  • Kendi yazdığım ilk PHP programlarından biri, binom dağılımı grafiği için PNG üreteciydi.
    Oluşturduğum PNG'nin boyutuna uyacak şekilde grafiğe çizilecek dikdörtgenleri ölçeklemem gerektiğini hatırlıyorum.
    Elbette çok basit bir şeydi ve D3'ün yapabildiği etkileyici şeylerle hiç kıyaslanamazdı, ama bilgisayarda görüntü üretmeyi ilk kez kendim yapmış olmak harika bir deneyimdi.
  • Bu, temel kavramı yakalayan iyi bir açıklama.
    D3 bana kişisel olarak hiçbir zaman sezgisel gelmedi. Sorun belki de çok fazla soyutlama seviyesinde çok fazla iş yapmaya çalışmasıdır.
    Sadece veriyi yansıtma meselesi olsaydı anlamak daha kolay olurdu, ama projeksiyon eksenler ve diğer öğelerle de sıkı biçimde bağlantılı olduğundan sanırım durum böyle.
• D3'ün asıl sorunu, bir kütüphane olarak gerçekte görselleştirme yapmaması. Yalnızca görselleştirmeyi kendiniz birleştirmeniz için fonksiyonlar ve örnekler sağlıyor; bunun temel gereksinimi de JavaScript, özellikle de closure'lar ve fonksiyonel programlama konusunda uzman seviyesinde anlayış.

mbostock’un D3’ün temel soyutlaması olarak söylediği select ve select diff hesaplamasının, yeniden giriş yapılabilir paint() yazmak için bir kolaylık aracına daha yakın olduğunu düşünüyorum
Sadece paint ifadesinin builder ifadesi olarak yazılması, kendi başına select kapsamı içine bağlanması ve çeşitli efektler için bölünebilmesi gibi bir süs eklenmiş durumda
Özellikle animasyon örneklerinde D3’ün yaptığı iş şaşırtıcı derecede az; dış döngüyü kullanmak ve zamana göre durumu takip etmek sizin doğrudan yapmanız gereken şeyler
D3, görselleştirmeyi ister fonksiyon ister başka bir biçimde kapsülleyecek bir soyutlama da sunmuyor; bu kısım okuyucuya ödev olarak bırakılıyor
Yeni D3 kullanıcıları için bütün bunlar büyük bir sürpriz ya da şok olarak geliyor. Yeni bir veritabanı getirip elinizde sadece dosya G/Ç, B-tree indeksleri ve sorgu optimize edici kütüphaneleri olması, geri kalan her şeyi de sizin bağlamanız gerekmesi gibi

• visx’e bakmaya değer. Hatta aslında D4, yani Declarative Data Driven Documents olarak adlandırılması gerekiyor gibi
  D3’ün DOM manipülasyon modülü d3-select’in React ile değiştirilmiş hali. Bunun mümkün olması ve iyi çalışması, D3 tasarımının ne kadar iyi olduğunun kanıtı
• D3, matplotlib ya da ggplot gibi bir grafik araç takımı değil; veri görselleştirmeyi sıfırdan kurmak için kullanılan düşük seviyeli bir kütüphane
  Hedefinize göre gerekli araç olabilir de olmayabilir de
• D3.js’i seviyordum ve ticari ya da kişisel onlarca veri görselleştirme projesinde temel teknoloji olarak kullandım. Ama artık render söz dizimi jQuery dönemini hatırlatacak kadar eski görünüyor
  Hâlâ easing ve scaling gibi çeşitli yardımcı fonksiyonlarını kullanıyorum, ama gerçek bileşenleri güncel framework’lerle yapıyorum. Benim durumumda Vue 3 ve TypeScript
  Yine de D3.js’in sunduğu güzel yıllar ve veri görselleştirmede birçok iyi pratiği öğretmiş olması için minnettarım
  Mike Bostock’un varsayılanları ve demoları hem ilham vericiydi hem de iyi bir standart örneğiydi; ayrıca Tufte’un minimalizmiyle de iyi uyuyordu
  • Vue 3 ve TypeScript ile birlikte D3 yardımcı fonksiyonlarını kullanan bir örnek varsa görmek isterim
• D3’ü öğrendikten sonra, grafik benzeri bir şey yapma varsayımıyla VisX ya da React gibi eşdeğer bir araca geçip bir daha arkaya bakmamanın daha iyi olduğunu düşünüyorum
  D3 ile jQuery bir ölçüde benziyor ve ikisi de kolayca spagetti koda dönüşebiliyor. VisX gibi araçlar, kullandıkları D3’ün üzerine ciddi bir yapı ekleyip işi makul tutuyor
  • D3’ü epey uzun zamandır aralıklı olarak kullanıyorum ve şimdi React ile visx’e yeni başlıyorum; ikisi arasındaki boşluğu iyi kapattığı için umut verici görünüyor
    Yine de saf D3 kullanmaya kıyasla daha özelleştirilmiş bir şey yapmak istediğinizde araçla savaşmanız gereken, dolayısıyla daha kısıtlı bir his verip vermediğini merak ediyorum
• D3, Wilkinson’ın Grafiklerin Dilbilgisi yaklaşımından ilham aldı
  GG’den ilham alan bir başka araç da adı da uygun olan ggplot2 ve R dili için
  Çok daha kısa ve işlevsel programlamaya daha yakın bir arayüz sunuyor; ayrıca CSV’yi pipe ile aktararak hızlıca grafik üretmeye yarayan nadir bir araç olan Rush, yani shell için R one-liner’larıyla da iyi çalışıyor
• Tamamen web tabanlı olmayan diyagram/grafik çözümleri aramaya devam ediyorum. CLI ya da kütüphane olarak çalışabilmeli ve SVG ya da PNG üretebilmeli
  Bu araçlar genelde tarayıcı özelliklerine bağımlı oluyor ya da sunucu tarafı üretim için headless browser kullanan hantallaşmış sunucu tarafı render çözümleri kullanıyor
  Özellikle programatik olarak Venn diyagramı oluşturabilmek güzel olurdu. Garip şekilde bu alanda neredeyse hiçbir şey yok
  Bazı JavaScript grafik kütüphaneleri bunu destekliyor ama genel olarak destek neredeyse yok gibi görünüyor
  gnuplot iyi görünüyor ama Venn diyagramı desteği yok
• D3’ü anlamamı sağlayan tek kaynak buydu. Yazarı da çok hızlı yanıt veriyor ve çok yardımcı oluyor
• Vega[1] hakkında çok iyi şeyler duydum; D3 üzerine kurulu bir araç
  Aynı zamanda OpenSearch Dashboards’un bağımlılıklarından biri, bu yüzden kullanıcıların loglar ve gözlemlenebilirlik verileri üzerinde özel panolar oluşturmasına imkân veriyor[2]
  Vega kütüphanesi, başkalarının bahsettiği D3 öğrenme eğrisi sorununu bir ölçüde hafifletebilir gibi görünüyor
  [1] https://vega.github.io/vega/docs/
  [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...