23 Ağu 2025·8 dk
Mike Bostock ve D3.js: Webin Veriyi Görmeyi Öğrenmesi
Mike Bostock’un D3.js'ine pratik bir bakış: nedir, neden önemlidir, temel kavramlar ve ekiplerin web üzerinde net görseller oluşturmak için nasıl kullandığı.
Mike Bostock’un D3.js'ine pratik bir bakış: nedir, neden önemlidir, temel kavramlar ve ekiplerin web üzerinde net görseller oluşturmak için nasıl kullandığı.
Mike Bostock sadece popüler bir JavaScript kütüphanesi yazmadı—web görselleştirmenin ne olabileceğini yeniden çerçeveledi. Öz fikri, “veri odaklı belgeler (data-driven documents)” ifadesinde özetlenir ve basit ama güçlüdür: veriyi sayfayı doğrudan şekillendirebilecek bir şey olarak ele alın. Bir grafiği kapalı bir kutuda çizmek yerine veriyi DOM öğelerine (SVG şekilleri, HTML düğümleri veya Canvas pikselleri gibi) bağlarsınız ve tarayıcının sonucu render etmesine izin verirsiniz.
D3.js'ten önce birçok grafik aracı hazır çıktılara odaklanıyordu: bir grafik türü seç, veriyi koy, seçenekleri ayarla ve umarım tasarım hikayenize uyar. D3.js farklı bir yol izledi. O esasen “bir grafik kütüphanesi” değil—görselleştirmeler inşa etmek için bir araç seti.
Bu fark önemlidir çünkü gerçek dünya verisi ve ürün ihtiyaçları nadiren tek bir şablona tam oturur. D3 ile şunları yapabilirsiniz:
Bu makale bir kavramsal rehberdir, adım adım bir eğitim değildir. Kopyala-yapıştır bir grafik elde etmeyeceksiniz; D3'ün veri, görsel ve etkileşim hakkında nasıl düşündüğüne dair net bir zihinsel modelle ayrılacaksınız—böylece onu daha akıllıca seçip daha hızlı öğrenebilirsiniz.
Eğer bir ürün ekibindeyseniz, içgörüleri iletmeye çalışan bir analistseniz, verinin hissettirdiği şeyi şekillendiren bir tasarımcıysanız veya etkileşimli UI inşa eden bir geliştiriciyseniz, D3'ün etkisini anlamak değerlidir—hatta hiç D3 kodu yazmayacak olsanız bile.
D3.js'ten önce çoğu “web grafiği” arayüzten çok resme yakındı. Ekipler Excel veya R'den grafikleri PNG olarak dışa aktarır, sayfalara gömer ve işin bittiğini düşünürdü. Sunucuda grafikler oluştursalar bile çıktı genellikle hala statik bir görüntüydü—yayınlaması kolay, keşfetmesi zor.
İnsanlar web gibi davranan grafikler istedi: tıklanabilir, duyarlı ve güncellenebilir. Ancak yaygın seçenekler birkaç öngörülebilir şekilde yetersiz kalıyordu:
Eksik olan sadece bir kütüphane değildi—platform da olgunlaşıyordu:
Bu teknolojiler grafikleri gerçek UI bileşenleri gibi ele almayı mümkün kıldı, dışa aktarılmış nesneler gibi değil.
D3 “bir grafik oluşturucu” olarak gelmedi. Veri ile yerel web ilkeleri (DOM, SVG, Canvas) arasında bağ kurma yöntemi olarak geldi—böylece ihtiyacınız olan tam grafiği tasarlayabilir, sonra onu etkileşimli ve uyumlu hale getirebilirdiniz. "Grafik görüntüleri" ile "veri odaklı arayüzler" arasındaki bu boşluğu D3 kapattı.
D3'ün temel önerisi basittir: bir grafiği “bir yerde” çizmek yerine verinizi sayfadaki gerçek öğelere bağlayın. Bu, her veri satırının bir ekrandaki öğe (bir çubuk, bir nokta, bir etiket) ile eşleştirildiği anlamına gelir ve verideki değişiklikler doğrudan görünenleri değiştirebilir.
Kullanışlı bir zihinsel model: veri satırları ekrandaki işaretler haline gelir. Veri kümeniz 50 satırsa, bir SVG'de 50 daire olabilir. 60'a çıkarsa 60 daire görmeniz gerekir. 40'a düşerse 10 daire kaybolmalıdır. D3 bu ilişkiyi açık hale getirmek için tasarlanmıştır.
“Selections”, D3'ün öğeleri bulup onlarla bir şeyler yapma yoludur.
circle elemanları).Bir seçim temelde: “Bu grafik içindeki tüm noktaları bul ve her noktayı kendi verisiyle eşleştir” demektir.
Ünlü D3 “güncelleme deseni”, DOM öğelerini veriyle uyumlu tutmanın iş akışıdır:
Bu yüzden D3 bir grafik üreteci gibi değil de canlı bir görselleştirmeyi koruma yöntemi gibi hissedilir—altyapı verileri değiştikçe doğru kalan bir yapı sağlar.
Bir D3 grafiği temelde bir çeviri makinesidir. Veri setiniz değerler (satış, sıcaklık, oylar) olarak başlar, ama ekran yalnızca pikselleri anlar. D3'ün “veri → ölçek → piksel” hattı bu iki dünya arasındaki temiz köprüdür.
Bir ölçek, bir veri değerini görsel bir değere çeviren fonksiyondur.
Aylık geliriniz 0–50.000 arasında ise bunu 0–300 piksel bar yüksekliğine eşleyebilirsiniz. Ölçek matematiği halleder; kodunuza "/ 50000 * 300" gibi parçalar serpiştirmenize gerek kalmaz.
Ayrıca, ölçekler tersine çevirme (piksel → veri) desteği sunar. Bu, imleç altındaki kesin değeri gösterme gibi hassas etkileşimleri mümkün kılar.
Eksenler süs değil: izleyicinin grafikle yaptığı sözleşmedir. İyi işaretler yanlış okumayı engeller. Çok az işaret farkları gizler; çok fazla görsel gürültü oluşturur. Tutarlı aralıklar ve makul uç değerler (özellikle çubuk grafikler için sıfırı dahil etmek) insanların gördüklerine güvenmesine yardımcı olur.
Biçimlendirme netliğin kazanıldığı veya kaybedildiği yerdir. Tarihler bağlama uygun olmalı (ör. "Oca 2025" vs "2025-01-15"). Sayılar yuvarlama, binlik ayraçlar ve birimler gerektirebilir ("12.400" ile "$12.4k" farklı şeyler iletir). D3'ün biçimlendirme araçları etiketleri tutarlı kılar; bu, grafiğin tahmini veya özensiz hissetmesini engeller.
D3 sizi tek bir render teknolojisine zorlamaz. O, veri→öğeler mantığına (join'ler, ölçekler, etkileşim) odaklanır ve işaretlerin nerede yaşadığına siz karar verirsiniz: SVG, Canvas veya düz HTML. Doğru seçim çoğunlukla çizmeniz gereken öğe sayısına ve stil/erişilebilirliğin ne kadar önemli olduğuna bağlıdır.
SVG DOM tabanlı bir çizim yüzeyidir: her daire, yol ve etiket bir öğedir; CSS ile stil verilir ve DevTools'ta incelenebilir.
SVG şu durumlarda öne çıkar:
Takas: binlerce SVG öğesi tarayıcı için ağır olabilir çünkü her biri DOM'un bir parçası olarak yönetilir.
Canvas piksel tabanlıdır: “boyarsınız” ve tarayıcı her nokta için DOM düğümü tutmaz. Bu, onlarca bin noktalı saçılma grafikleri, yoğun heatmap'ler veya gerçek zamanlı çizimler için iyi bir uyum sağlar.
Takaslar: stil manuel, net metin daha fazla iş gerektirebilir ve etkileşimler genellikle hit-testing (fare hangi öğenin üstünde) mantığı gerektirir.
HTML, görselleştirme aslında bir UI bileşeni olduğunda idealdir—sıralanabilir tablolar, araç ipuçları, filtreler veya kart tabanlı özetler düşünün. Ayrıca HTML kontrollerini SVG veya Canvas grafiklerle karıştırmak sıkça görülür.
D3, veriyi SVG/HTML öğelerine bağlayabilir veya ölçek, yerleşim ve etkileşimleri hesaplayıp sizin Canvas'a render etmenizi sağlayabilir. Bu esneklik D3'ü bir araç seti gibi hissettirir: çizim yüzeyi bir tercih, zorunluluk değildir.
D3'te bir “layout” verilerinizi alıp geometri (x/y pozisyonları, açı, yarıçap, yollar veya ebeveyn/çocuk ilişkileri) hesaplayan bir fonksiyon veya küçük fonksiyon sistemi demektir. Piksel render etmez—şekillerin mümkün olmasını sağlayan sayıları üretir.
Tarihi olarak D3, adlandırılmış yerleşimlerle (force, pack, tree, cluster, chord) birlikte geliyordu. Yeni D3 sürümleri bu fikirleri odaklanmış modüller olarak sunuyor—bu yüzden örneklerde genellikle tek bir “layout” API'si yerine d3-force ağlar veya d3-geo haritalar için doğrudan kullanılır.
Çoğu ilginç grafik "örtbas edilmiş matematik problemleridir." Yerleşimler olmasaydı çarpışma önleme, düğüm konumlandırma, dikdörtgenleri döşeme veya enlem/boylam projeksiyonu gibi işleri elle yazmanız gerekirdi. Yerleşimler bu işi yapılandırmaya indirger:
Bu, renk, etiketleme ve etkileşim gibi tasarım seçimleri üzerinde daha hızlı yineleme yapmanızı sağlar çünkü geometri tutarlı şekilde ele alınır.
Ağ grafikleri: d3.forceSimulation() düğümlere ve bağlantılara yineleyerek x/y verir; bunları daireler ve çizgiler olarak çizersiniz.
Treemap'ler: hiyerarşik yerleşimler değere göre boyutlandırılmış iç-içe dikdörtgenler hesaplar; çok kategorili "bütünden-parça" görünümleri için idealdir.
Haritalar: d3.geoPath() GeoJSON'u bir projeksiyon (Mercator, Albers vb.) kullanarak SVG yollarına çevirir.
Temel fikir tekrarlanabilir: yerleşimler ham sayıları çizilebilir geometriye dönüştürür ve D3'ün veri bağlama bu geometriyi sayfadaki işaretlere çevirir.
Etkileşim sadece "güzel bir ekstra" değildir—çoğu zaman insanların gördüklerini doğrulama biçimidir. Yoğun bir grafik ikna edici görünebilir ama yine de yanlış anlaşılabilir. Okuyucu bir değeri doğrulamak için üzerine geldiğinde, bir segmenti izole etmek için filtre uyguladığında veya sıkışık bir kümeyi incelemek için yakınlaştırdığında, grafik bir resim olmaktan çıkar ve düşünme aracı haline gelir.
D3 tarzı etkileşimlerin en tanınabilirlerinden biri araç ipuçlarıdır. Grafik dağınık kalırken hassas değerler gerektiğinde görünür. En iyi araç ipuçları sadece eksen etiketini tekrarlamaz—bağlam ekler (birim, dönem, kaynak, sıra) ve incelenen işareti gizlemeyecek şekilde konumlanır.
Fırçalama—tıklayıp sürükleyerek bir bölge seçme—"Bu zaman penceresinde ne oldu?" veya "Hangi noktalar bu kümede?" gibi sorular sormanın doğrudan bir yoludur. D3 bu deseni özellikle zaman serileri ve saçılma grafikleri için webde erişilebilir kıldı.
Filtreleme ile eşleştirildiğinde (seçileni vurgula, diğerlerini soluklaştır veya yeniden çiz) fırçalama statik bir görünümü keşifsel bir araca dönüştürür.
D3, etkileşimlerin grafikler arasında geçtiği panoları popülerleştirdi. Bir çubuğa tıklamak haritayı güncellesin; bir zaman çizelgesinde fırçalama tabloyu güncelleştirsin; bir noktaya gelindiğinde ilgili satırı vurgulamak gibi. Bu bağlı görünümler insanlar kategori, coğrafya ve zamanı fazla yüklü tek bir grafiğe zorlamadan bağlamlandırmasına yardımcı olur.
Çoğu etkileşim birkaç olayda toplanır—click, mousemove, mouseenter/mouseleave ve dokunma karşılıkları. D3'ün yaklaşımı ekiplerin davranışı doğrudan görsel öğelere (çubuklar, noktalar, etiketler) iliştirmesini teşvik etti; bu da etkileşimlerin grafiğe "sonradan takılmış" değil de doğal hissetmesini sağlar.
Etkileşimli grafikler fare ötesinde çalışmalıdır. Temel eylemleri klavye ile de yapılabilir yapın (odaklanabilir öğeler, net odak durumları), ekran okuyucular için metin alternatifleri sağlayın (etiketler ve açıklamalar) ve anlamı yalnızca renkle kodlamaktan kaçının. Ayrıca azaltılmış hareket tercihlerini saygı gösterin, böylece araç ipuçları, vurgular ve geçişler bariyer oluşturmasın.
D3 basit bir fikri popülerleştirdi: geçiş bir durumlar arası animasyonlu değişimdir. Bir grafiği yeniden çizmek yerine işaretlerin eski konumdan yeni konuma hareket etmesine izin verirsiniz—çubuklar büyür, noktalar kayar, etiketler güncellenir. Bu ara hareket izleyicinin neyin değiştiğini değil, nasıl değiştiğini takip etmesine yardımcı olur.
Amaçlı kullanıldığında geçişler açıklık katar:
Animasyon veriyle yarıştığında gürültü olur:
Kural: izleyici güncellemeyi animasyon olmadan anlıyorsa geçişleri subtile tutun ya da atlayın.
Geçişler ücretsiz değildir. Performansı artırmak için:
Son olarak, kullanıcı konforunu unutmayın. Azaltılmış hareket tercihlerini saygı gösterin (süreleri kısaltma veya geçişleri kapatma) ve kullanıcılara kontrol verin—ör. "Animasyonları duraklat" seçeneği veya anlık güncelleme moduna geçiş. Veri görselleştirmede hareket anlamayı desteklemeli, dikkat çekmeyi dayatmamalıdır.
D3 sıklıkla “bir grafik kütüphanesi” olarak yanlış anlaşılır. Değil. D3 size hazır bir çubuk grafik bileşeni vermiyor; bunun yerine grafikler inşa etmeniz için düşük seviyeli yapı taşları sunuyor: ölçekler, eksenler, şekiller, yerleşimler, seçimler ve davranışlar. Bu yüzden D3 inanılmaz esnek hissedebilir—ve bazen beklenenden daha fazla iş gerektirebilir.
Eğer "bir grafiği bırak, çalışsın" istiyorsanız genellikle daha üst düzey kütüphanelere yönelirsiniz. D3 daha çok hassas aletlerden oluşan bir sette gibidir: grafiğin ne olduğunu, nasıl çizileceğini ve nasıl davranacağını siz belirlersiniz.
Bu takas kasıtlıdır. D3 tarafsız kalarak klasik grafiklerden özel haritalara, ağ diyagramlarına ve benzersiz editoryal grafikleri destekler.
Modern ekiplerde D3 sıklıkla bir UI çerçevesiyle eşleştirilir:
Bu melez yaklaşım D3'ün tüm uygulamayı yönetmesini zorlamadan en güçlü yeteneklerinden faydalanmayı sağlar.
Pratik bir kural: çerçeve DOM öğelerini oluşturup güncellesin; D3 pozisyon ve şekil hesaplamalarını yapsın.
Örneğin, değerleri piksellere eşlemek (ölçekler) ve bir SVG yolu üretmek için D3 kullanın, ama <svg> yapısını ve kullanıcı girdilerine yanıt vermeyi bileşenlerinize bırakın.
Tekrarlayan iki hata:
D3'ü belirli işler için çağırdığınız bir araç seti gibi görün; kodunuz daha temiz kalır ve grafikler bakımı daha kolay olur.
D3'ün en büyük mirası tek bir grafik türü değildir—web grafikleri hassas, ifade edilebilir ve veriye sıkı bağlı olabilir beklentisini yaratmasıdır. D3 yaygın hale geldikten sonra birçok ekip görselleştirmeyi sayfanın sonuna eklenen bir unsur değil, arayüzün birinci sınıf bir parçası olarak ele almaya başladı.
D3 gazetecilikte erken göründü çünkü iş akışına uyuyordu: muhabirler ve tasarımcılar her veri hikayesi için özel görseller inşa edebiliyordu, verileri standart bir şablona zorlamak yerine. Etkileşimli seçim haritaları, kaydırma destekli açıklayıcı grafikler ve notlandırılmış çizimler daha yaygın hale geldi—D3 onları "kolaylaştırdı" demek yerine "web yerel yapı taşları ile mümkün kıldı" demek daha doğru.
Sivil teknoloji projeleri de aynı esneklikten faydalandı. Kamu verileri dağınık olabilir ve sorular şehir, politika ve izleyiciye göre değişir. D3 yaklaşımı projelerin veriye uyum sağlamasını teşvik etti; ister dikkatli etiketlenmiş basit bir grafik olsun, ister daha keşifsel bir arayüz.
Ekipler doğrudan D3 kullanmasalar bile onun popülerleştirdiği birçok uygulama ortak bir standart haline geldi: ölçekler ve koordinat sistemleri düşünmek, veri dönüşümünü render'dan ayırmak ve DOM (veya Canvas) kullanarak programlanabilir bir grafik yüzeyi oluşturmak.
D3'ün etkisi topluluğu aracılığıyla da yayıldı. Küçük, odaklı örnekler yayınlama alışkanlığı—her seferinde bir fikri göstermek—yeni başlayanların remix yaparak öğrenmesini kolaylaştırdı. Observable defterleri bu geleneği daha etkileşimli bir ortamla genişletti: canlı kod, anında geri bildirim ve paylaşılabilir "skeç defterleri". Kütüphane ve etrafındaki kültür, modern web görselleştirme işinin nasıl yapılacağını tanımlamada etkili oldu.
D3'e en kolay geçiş onu bir tasarım aracı olarak gördüğünüzde olur, bir kestirme olarak değil. Veri işaretlere (çizgiler, çubuklar, alanlar, düğümler) nasıl dönüşür, işaretler girdiye nasıl tepki verir ve her şey zaman içinde nasıl güncellenir üzerinde ince kontrol verir. Bu özgürlük aynı zamanda maliyettir: bir grafik kütüphanesinin sizin için yapacağı birçok kararı siz vermekten sorumlusunuz.
Araç seçmeden önce dört şeyi netleştirin:
Eğer sorular keşif gerektiriyor ve grafik türü hazır kutuda yoksa D3 mantıklı hale gelir.
D3, özel etkileşimler (fırçalama, bağlı görünümler, sıra dışı araç ipuçları, kademeli açığa çıkarma), benzersiz tasarımlar (standart dışı kodlamalar, özel yerleşim kuralları) veya render/performance üzerinde hassas kontrol gerektiğinde mükemmeldir. Ayrıca görselleştirmenin bir ürün özelliği olduğu durumlarda (ekibinizin üstünde yineleme yapacağı bir özellik) D3 parladığı yerdir.
Amacınız standart bir gösterge paneli ise, ortak grafiklerle tutarlı tema ve hızlı teslimat gerekiyorsa üst düzey kütüphane veya BI araçları genellikle daha hızlıdır. Yerleşik eksenler, lejantlar, duyarlılık ve erişilebilirlik varsayımları ile bunlar size zaman kazandırır.
Büyük bir rehber veya proje planlıyorsanız (ör. üretim görselleştirmesi), seçim ve join'leri, ölçekleri, olay işleme ve uç durum testlerini öğrenmek için süre ayırın. En iyi D3 çalışmaları genellikle sadece kod değil, tasarım yinelemesi de içerir—yani bunu planlamada hesaba katın.
D3 eliyle öğrenmeyi ödüllendirir. D3 zihniyetini hissetmenin en hızlı yolu bir küçük grafik baştan sona inşa etmek, sonra onu adım adım geliştirmektir—doğrudan bir panoya atlamayın.
Küçük bir veri kümesi (10–50 satır) seçin ve tek serili bir çubuk veya çizgi grafiği oluşturun. İlk sürümü kasıtlı olarak sade tutun: bir SVG, bir grup (<g>), bir seri. Bir kez doğru render ettiğinde, iyileştirmeleri teker teker ekleyin—hover araç ipuçları, vurgu durumu, sonra filtreleme veya sıralama. Bu sıra güncellemelerin nasıl çalıştığını feature'larla boğmadan öğretir.
İnşa ederken bir referans noktası isterseniz ekip wiki'nizde sürekli bir not sayfası tutun ve beğendiğiniz örneklere /blog içinden notlar alın.
Basit bir kural: güncelleyemiyorsanız, gerçekten anlamamışsınız demektir.
İlk grafikten sonra tekrar kullanılabilir bir “grafik deseni” belgeleyin (yapı, kenar boşlukları, güncelleme fonksiyonu, olay işleyiciler). Bunu küçük bir dahili bileşen kütüphanesi gibi görün—çerçeve kullanmasanız bile. Zamanla ortak bir sözlük ve daha hızlı teslimat elde edersiniz.
Eğer dahili bir analiz aracı inşa ediyorsanız (sadece bir kerelik grafik değil), görselleştirme ayrıntılarına çok yatırım yapmadan önce çevre uygulamayı prototiplemek—kimlik doğrulama, yönlendirme, tablolar, filtreler, API uç noktaları—yardımcı olabilir. Platforms like Koder.ai are useful here: you can vibe-code a React-based web app around your D3 components via chat, iterate in a planning mode, and then deploy with hosting and custom domains. For teams experimenting with different interaction designs, snapshots and rollback are especially practical—so you can try a new brushing/zoom flow without losing a known-good version.
Daha derin rehberlik için yeni başlayanları /docs'e yönlendirin ve eğer araçları ve desteği değerlendiriyorsanız, /pricing'de bir karşılaştırma sayfası bulundurmak faydalıdır.
Mike Bostock açık bir zihinsel model sundu: veriyi DOM'a bağlayın; böylece her veri öğesi ekrandaki bir “işaret”e (çubuk, nokta, etiket, yol) karşılık gelir. Bir grafiği kapalı bir görsel olarak üretmek yerine gerçek web öğelerini (SVG/HTML) güncellersiniz veya veriye dayalı mantıkla Canvas'a çizersiniz.
Geleneksel araçlar genellikle bir şablon (çubuk/çizgi/pasta) ile başlar ve seçenekleri değiştirmenize izin verir. D3 ise web ilkelere (DOM, SVG, Canvas) dayanır ve ölçekler, şekiller, eksenler, yerleşimler ve davranışlar gibi yapı taşları sunar—böylece gerçekten ihtiyacınız olan görselleştirmeyi, özel etkileşimleri ve standart dışı düzenleri tasarlayabilirsiniz.
Tarayıcı güçlü, standartlaşmış grafik ve yapı yetenekleri kazandı:
D3, veriyi bu yerel yeteneklere bağlayarak statik görüntüler yerine etkileşimli web grafiklerini mümkün kıldı.
Bir seçim (selection), D3'ün öğeleri hedefleme ve değişiklik uygulama yoludur. Pratikte: “bu kapsayıcıyı seç, işaretleri (ör. circle) bağla ve her veri öğesine göre x/y, r, fill ve metni ayarla.”
Görselleri değişen veriyle senkron tutma iş akışıdır:
Bu desen, filtreleme, canlı güncellemeler ve etkileşimli yeniden sıralamalar için D3'ü etkili kılar çünkü her şeyi yeniden çizmek zorunda kalmazsınız.
Bir D3 ölçeği (scale), veri değerlerini görsel değerlere (genellikle piksellere) çeviren bir işlevdir: veri → ölçek → ekran. Domain ve range ayarlarını merkezi hale getirir, böylece kodunuzda sürekli matematik saçmak zorunda kalmazsınız. Birçok ölçek ayrıca pikselleri veriye geri çevirebilen tersine çevirme (invert) sağlar; bu özellik, imleç altındaki kesin değeri göstermek gibi etkileşimlere olanak tanır.
SVG: net metin/eksenler, her işaret için ayrı stil ve erişilebilirlik olduğunda tercih edilir. Canvas: on binlerce nokta gibi büyük hacimler için performans gerekirken uygundur. HTML: tablolar, filtreler ve UI ağırlıklı parçalar için idealdir. Hangi yüzeyi kullanacağınız, kaç öğe çizmeniz gerektiği ve stil/erişilebilirliğin önemine bağlıdır.
D3'deki bir yerleşim (layout), verilerden geometri (x/y pozisyonları, açılar, yarıçaplar, yollar, iç-içe dikdörtgenler vb.) hesaplayan bir işlevdir; kendisi çizim yapmaz. Örnekler:
d3.forceSimulation() ağ düğümleri için x/y hesaplar.d3.geoPath() GeoJSON'u proje ederek çizilebilir yollar üretir.Hesaplanan bu koordinatları sonra SVG/Canvas/HTML üzerinde işaretlere bağlarsınız.
D3 birkaç etkileşim kalıbını web için standartlaştırdı:
İyi bir yaklaşım etkileşimleri veri güncellemelerine bağlamak ve ardından görselleştirmeyi yeniden render etmektir; böylece grafik tutarlı ve açıklanabilir kalır.
D3, özelleştirilmiş tasarım, kişiye özel etkileşimler veya render/performance üzerinde sıkı kontrol gerektiğinde mükemmeldir (ör. SVG+Canvas melezleri). Eğer standart panelli bir gösterge ve yaygın grafik türleriyle hızlı teslimat istiyorsanız, daha üst düzey kütüphaneler veya BI araçları genellikle daha hızlı ve güvenlidir; hazır eksenler, lejantlar, tema ve erişilebilirlik kalıpları sunarlar.