Bu Çizgi Grafiği Yığılmış Çubuk Grafiği ile aynı verileri gösterir, ancak veri noktalarını işaretlemek için noktalar ve bunları bağlamak için çizgiler kullanır. Geçiş anahtarı (MUI'de oluşturulmuştur) basit bir Çizgi Grafiği ile Alan Grafiği arasında geçiş yapar. Her iki veri görselleştirmesi de neredeyse aynı D3.js kodunu kullanır.
Alan Grafikleri, tek veri kümeleri olduğunda veri görselleştirmeleri olarak daha iyi çalışır: kullanıcıların veri noktaları tarafından temsil edilen toplam değeri daha net görmelerine yardımcı olurlar, çünkü bu gölgeli alanın boyutuyla orantılıdır. Ancak, birden fazla veri noktası olduğunda, gölgeli alanlar kafa karıştırıcı olabilir, çünkü bir alan arkasındaki alanları gizleyebilir. D3.js bu konuda tam kontrol sağlar: örneğin, alanların bir kısmının veya tamamının opaklığını azaltabilir, hatta alttakilerle örtüşen alanların opaklığını azaltabiliriz. Alan grafikleri negatif değerler gösterdiğinde de kafa karıştırıcı olabilir, ancak D3.js pozitif ve negatif değerler için farklı renkler kullanmak gibi bu sorunu aşmanın yollarını sunar.
Bar Chart örneğinde olduğu gibi, veri görselleştirme içinde belirli bir veri kümesine odaklanmak için UI kontrollerini kullanmak ve bunu D3.js koduna bağlamak mümkündür. Ancak bu durumda, radyo düğmeleri yerine onay kutuları kullanılır. Radyo düğmeleri ile sadece bir seçenek seçmeniz gerekir; ancak onay kutuları ile her kutu diğerlerinden bağımsız olarak seçilebilir veya seçimi kaldırılabilir. Dolayısıyla, bu kullanıcı arayüzü ile veri setlerinin herhangi bir permütasyonunu seçmek mümkündür: örneğin, herhangi bir tek organ, herhangi iki organ veya üç organın tümü. Bunun için kodlama, özellikle az sayıda veri noktasından daha fazlası olduğunda biraz daha karmaşıktır.
D3.js ayrıca verileri bağlamak için kullanılan eğriyi seçmemize de olanak tanır. Tipik olarak, veri görselleştirme için en uygun eğriyi seçer ve bunu sabit kodlarız. Ancak, nelerin mümkün olduğunu göstermek için, kullanıcıların kendi eğrilerini seçebilmeleri için bir dizi radyo düğmesi ekledik. Catmull-Rom gibi bazı eğriler tüm veri noktalarından geçerken, Curve Basis gibi diğerleri geçmez. Tüm veri noktalarından geçmemenin iyi tarafı, verilerdeki eğilimleri çok iyi göstermenin mümkün olmasıdır. Tersine, Catmull-Rom eğrisi tüm gerçek veri noktalarını içerir, ancak eğilimleri görmeyi zorlaştıran aşma ve alçalmaları içerir.
Bir D3.js Çizgi Grafiği veya Alan Grafiğinin maliyeti, büyük ölçüde özel olarak kodlanmasının ne ölçüde gerekli olduğuna bağlıdır. Araç ipuçları, özel animasyonlar vb. gibi eklentiler maliyeti biraz artıracak ancak kullanıcı deneyimini büyük ölçüde geliştirecektir. Fiyatlar sayfası size genel bir fikir verecektir. Fiyatlar sayfası size genel bir fikir verecektir. Ancak, sizin için en iyi olanı bulmak amacıyla bir geliştirici ile ücretsiz görüşmek için lütfen bizimle iletişime geçin.