SVG Gradyanları ile D3.JS Grafiklerini Boost

Nadieh Bremer olacak Londra'yı oluştur Eylül ayında, nasıl alınacağını gösterecek? SVG sadece şekillerin ötesinde , Veri görselleştirmeleri yapmak için Javascript, CSS ve D3.JS kullanarak daha eğlenceli ve heyecan verici. Biletinizi şimdi ayırtın K!

D3.js, etkileşimli veri görselleştirme dünyasını ele geçirdi. Her biri kendi eğlencesini ve kütüphanede faydalı bir şekilde gösteren muazzam sayıda örnek bulunabilir. Görüyorsunuz, D3 bir grafik kütüphanesi değil, ama çok daha iyi bir şey. Size yalnızca veri görselleştirmeleri oluşturmak için temel araçlar verir ve bunu yaparken pratik olarak düşünebileceğiniz her şeyi oluşturmanıza olanak sağlar. Bazı fikirler diğerlerinden daha fazla zaman alabilir olsa da, sonunda oraya gidersiniz. Ve bu özgürlük tam olarak D3 hakkında sevdiğim şeydir.

Çekirdeğinde, her D3 görseli SVG elemanlarından yapılmıştır. Örneğin, bir scatterplot grafiğindeki her veri noktası için, bir eksen, paralel koordinatlar veya eğim grafiği olarak, etiket olarak ve pratik olarak her şey için son derece yararlı bir çubuk grafik oluşturmak için. Ayrıca, SVG'ler çözünürlükten bağımsızdır, bu nedenle herhangi bir ekran veya yakınlaştırma seviyesinde harika görünüyor.

Sadece şekilleri için SVG'leri kullansanız bile, harika görselleştirmeler yaratabilirsiniz. Ancak, daha fazla yapabilirler - örneğin SVG filtrelerini düşünebilirler. Bu eğitimde, belirli bir yönde derin bir dalış yapacağız ve görselleştirmeyi aydınlatmak için uygulanabileceği birkaç farklı şekilde bakacağız. Sizi SVG Gradyanları'na tanıtmama izin verin!

Bu eğitim için ihtiyacınız olan tüm dosyaları bulun İşte .

Doğrusal gradyanlar

Bazen tek bir satır ile bir çizgi grafiği oluşturduğumda sadece biraz boş hisseder ve beyaz zemin üzerine kaybolabilir. Daha fazla durmasını sağlamak için, d3'leri kullanarak aşağıda bir ışık gradyanını yerleştiririm. d3.svg.area Bir SVG gradyanı ile doldurulmuş işlev (bkz. Şekil 1).

Degradenin dikey olarak dikey olarak (çizgiyle aynı renkte olduğu, hafif bir gölge olduğu) alttan (beyaz olması gerektiği veya şeffaf olması gerektiği) çalışmasını istiyorum. Bu, doğrusal bir gradyan olarak bilinen şeydir; düz bir çizgi boyunca rengi değiştiren bir şey.

Bir SVG ile başlıyoruz. Bu, çizgimizin çizilmeyeceği tuval. Daha sonra bir defs ekleyebileceğimiz öğe lineelgradient eleman. Degradeyi benzersiz bir kimlik vermek çok önemlidir - bunu daha sonra, alanın altının altındaki alana vermemiz gerektiğinde kullanacağız.

 var areagradient = svg.append ("defs")
.Append ("lineAleRadient")
.ATTR ("id", "AlanGradient")
.ATTR ("x1", "0%"). Attr ("Y1", "0%")
.ATTR ("x2", "% 0"). Attr ("Y2", "% 100"); 

Yukarıdaki kodun son iki satırı degradenin nasıl çalışması gerektiğini tanımlar. Görünmez bir çizgi olarak düşünün: x1 ve y1 görünmez çizginin başlangıç ​​pozisyonlarıdır ve x2 ve y2 Degradenin yönünü vermek için son noktasını belirtin. Kesin piksel konumlarını kullanmak mümkün olmasına rağmen, bunları yüzdeler olarak tanımlamak genellikle en kolaydır. Varsayılan olarak konumlar, gradyanın uygulandığı öğenin sınırlayıcı kutusuna bakın. Degradenin dikey olarak çalışmasını istiyoruz, bu yüzden x1 ve x2 aynı olmalı ( 0% iyi), y1 olmalı 0% ve Y2% 100 .

Şimdi degradenin renklerini tanımlayabiliriz. Bir degrade için en az iki renk gereklidir, ancak istediğiniz kadar kullanabilirsiniz. Degradedeki her renk için ekleyin Dur eleman. Bunun içinde gölgeyi belirtirsiniz rengi ve bu rengin saf (kesin renk) olmasını istediğiniz yer (görünmez satır boyunca) dengelemek .

İsteğe bağlı olarak, her rengin opaklığını da ayarlayabiliriz. durgunluk . Burada gölgeyi en üstte hafifçe daha hafif ve altta tamamen şeffaf yapıyorum.

alangradient.append ("dur")
.ATTR ("Ofset", "% 0")
.ATTR ("stop-rengi", "# 21825C")
.ATTR ("Stop-Opacity", 0.6);
alangradient.append ("dur")
.ATTR ("Ofset", "% 80")
.ATTR ("Durak-Renk", "Beyaz")
.ATTR ("Stop-Opacity", 0); 

Şimdi doğrusal gradyan ayarlandı, bir alan grafiği oluşturabilir ve degrade ile doldurabiliriz. Bunu yapmak için kullanın URL (# degrade-id) Doldurma tarzında, daha önce ayarlandığımız benzersiz kimlik ile birlikte.

 SVG.Append ("yol")
.Style ("Dolgu", "URL (#Areagradient)")
.ATTR ("D", AlanFonksiyon (VeriSet)); 

Daha sonra, grafiğin bu alanının üstüne çizgiyi çizin, böylece görüntüleyici grafiğinizden çıkabilir. Grafiğimde, belirli veri noktalarının yerlerini vurgulamak için daire yerleştirdim.

Pürüzsüz bir efsane

Efsaneler veri görselleştirmelerinde çok yaygındır. Verilerinizin belirli bir yönünü temsil etmek için renkleri kullandığınızda, her renk ne anlama geldiğini açıklamanız gerekir. Bu bir efsanenin içeri girdiği yer.

Bazı grafiklerde, ayrımcı durumlar arasında ayrım yapmak için renk kullanacaksınız (örneğin, farklı ülkeler), bu durumda renklerin çoğu zaman çok farklıdır. Ancak, nicel bir değeri belirtmek için rengi de kullanabilirsiniz.

İşte sıcaklığı dışarıda temsil ediyoruz (bkz. Şekil 2). Renk, düşükten yükseğe çıkan sıcaklığı belirtmek için kademeli olarak değişir. Bunu bir efsane içinde göstermek için, uzun bir dikdörtgen yaratacağız ve soldan sağa gidiş bir degrade ile dolduracağız. Çizgi grafiğimiz için oluşturduğumuz degradeyi yeniden kullanabiliriz, ancak 90 derece çevirebiliriz (yani x2 şimdi çalışır 100% , ziyade y2 ). Genel olarak bir gökkuşağı paleti veri görselleştirmesinde önerilmemesine rağmen, insanlar renkli sıcaklık haritalarını görmek için kullanılır ve örneğimizde kullanmak için dokuz renk seçtim.

Her birini yazmak yerine Dur Eklemek için, tüm renkleri bir veri setine koyabilir ve D3'ün şıklığını kullanabiliriz. veri Süreci daha hızlı yapmak için adım. D3 ile, sonraki zincirleme adımlarındaki veri kümesinin herhangi bir özelliğine isimsiz bir işlevi kullanarak erişmek mümkündür, böylece rengi ayarlamamızı ve sadece iki satırda dengelememizi sağlar.

 SVG.Append ("defs")
.Append ("lineAleRadient")
.ATTR ("id", "Legendgradientmulti")
.ATTR ("x1", "0%"). Attr ("Y1", "0%")
.ATTR ("x2", "% 100"). Attr ("Y2", "0%")
.SelecTall ("Durdur")
.veri([
{Ofset: "0%", Renk: "# 2C7BB6"},
{Ofset: "% 12.5", Renk: "# 00A6CA"},
{Ofset: "% 25", Renk: "# 00ccbc"},
{Ofset: "% 37,5", Renk: "# 90EB9D"},
{Ofset: "% 50", Renk: "# ffff8c"},
{Ofset: "% 62.5", renk: "# f9d057"},
{Ofset: "% 75", renk: "# f29e2e"},
{Ofset: "% 87.5", Renk: "# E76818"},
{Ofset: "% 100", Renk: "# D7191C"}])
.enter (). Eklemek ("Durdur")
.ATTR ("Ofset", İşlev (D) {Dön D.Offset;})
.ATTR ("STOP-RENK", işlev (D) {Dön D.color;}); 

Daha önce olduğu gibi, son adım bir oluşturmaktır. dürüst ve bunu benzersiz degrade kimliğini kullanarak doldurun.

 SVG.Append ("Rect")
.ATTR ("x", 0) .ATTR ("Y", 0)
.ATTR ("genişlik", 500) .ATTR ("yükseklik", 20)
.Style ("Dolgu", "URL (#legendgradientmulti)"); 

Bu efsanelerin grafikleri, muhteşem eserinden sonra yeniden yaratıldı. www.weather-radials.com 2015 yılında New York veya Pekin'deki sıcaklığı göstermektedir. Her gün ortalama sıcaklık renkli bir çizgi ile gösterilir ve bu çizgiler dairesel bir grafik oluşturmak için düzenlenir. Aşağıdaki efsane, her renk ne anlama geldiğini açıklar. Bir grafik, bir renkten diğerine bir gradyan kullanır ve diğer dokuz renkte ilerliyor.

Veri tabanlı gradyanlar

Önceki örneğe benzer şekilde, birden fazla gradyan oluşturabiliriz. Verilerin belirli bir yönüne dayanarak, her veri noktası için benzersiz bir gradyan yapabiliriz. Bu yaklaşımı bir Exoplanet görselleştirme , her gezegenin yıldızın yıldız sınıfına dayanan bir degrade verildiği yerlerde. Her biri merkezdeki yıldız tarafından yakıldığı izlenim bırakmak için ince bir küre etkisi kullandım.

Öyleyse 90'lara geri dönelim ve kendi güneş sistemimizdeki gezegenleri radyal degradelerle 3B görünümlü kürelere temsil eden bir düz çember koleksiyonunu çevirelim (Şekil 4). Gezegenin adını ve çapını içeren küçük bir veri kümesi yarattım. Her biri, her gezegen için benzersiz bir gradyan oluşturmak için kullanacağımız bir renkle genelleştirilecektir.

 var gradientradial = svg.append ("defs")
.SelecTall ("RadialGradient")
.Data (gezegenler)
.enter (). Eklemek ("RadialGradient")
.ATTR ("ID", işlev (D) {iade "gradyanı-" + d.Planet;})
.ATTR ("CX", "% 15")
.ATTR ("CY", "% 50")
.ATTR ("R", "% 85"); 

Kod burada biraz farklıdır: ilk önce degrade bir öğeyi eklemek yerine, şimdi hemen ekliyoruz gezegenler veri kümesi ve sadece sonra giriş Bir degrade öğesi oluşturuyor muyuz (bu durumda) radikalgradient ). Bu şekilde, veri kümesindeki her nokta için bir degrade oluşturulur. Her bir noktanın kimliğini verilere dayanarak benzersiz tutun. İçerik ben Genellikle çalışır, ancak burada gezegen adı daha güvenlidir. Bu, daha sonra doğru gradyanına erişebileceğimizi sağlar.

Radyal bir degrade, doğrusal olana biraz farklıdır. Bunu bir SVG dairesine benzer şekilde yaratıyoruz: Degradenin merkezini, uygulanacağı nesne sınırlarına göre, kullanarak cx ve cy . Bu değerler varsayılan % 50 , bu, nesnenin merkezidir.

Gezegenlerde parlayan bir yıldızın görünümünü bir taraftan simüle etmek için, degradenin merkezini sola doğru hareket ettireceğiz. cx için % 15 . Degradenin yarıçapı (bir degrade durağı 100% bitmelidir) tarafından belirtilir r . Aynı zamanda varsayılan olarak % 50 , ama bizim yüzünden cx Ofset, bu şimdi % 85 Bu yüzden tüm daireyi doldurur.

Renk duraklarını eklemek için gezegen verilerini kullanabiliriz. Parıldayan bir kürenin görünümünü oluşturmak için, renge 0% daha hafif olmalı. Kullanarak d3.rgb (). Daha parlak (k) D3 benim için bu hesaplamayı yapacak kadar ayrı bir renk belirtmek zorunda değilim. Değer k Renginin ne kadar çakmağını istediğimi tanımlar. Etrafında % 50 Datasetteki gerçek rengi ayarladım. Kenarda, biraz daha koyu renkli bir renk istiyorum, gölge görünümünü veriyor. Mantıksal olarak, ayrıca d3.rgb (). Daha koyu (k) kullanabileceğimiz.

 GradientRadial.Append ("Durdur")
.ATTR ("Ofset", "% 0")
.ATTR ("Stop-Color", İşlev (D) {
Dönüş D3.RGB (D.Color) .Bhighter (1); });
GradienTradial.Append ("Durdur")
.ATTR ("ofset", "% 50")
.ATTR ("STOP-RENK", FONKSİYON (D) {DÖNÜ D.COLOR;});
GradienTradial.Append ("Durdur")
.ATTR ("Ofset", "% 100")
.ATTR ("Stop-Color", İşlev (D) {
Dönüş D3.RGB (D.Color) .Darker (2.5); }); 

Bunu çalıştırdıktan sonra HTML'yi inceleyebilseydiniz, Sekiz farklı radyal gradyanlar bulunur. Son, sekiz daireler oluşturmamız gerekiyor, veriler tarafından tanımlandığı gibi bir yarıçap verin ve doğru gradyan ile doldurun.

 svg.selectall (". Gezegenler")
.Data (gezegenler)
.enter (). Eklemek ("daire")
/ * Sınıfı, yeri ve yarıçapı özniteliklerini ayarlayın ... * /
.Style ("Doldur", İşlev (D) {
İade "URL (# Gradient-" + D.Planet + ")"; }); 

Ayrıca kendi radyal gradyanına sahip olan güneşi de ekledim, ama ben ayrıldım cx , cy ve r varsayılan ayarıyla % 50 Güneş gibi görünmesini sağlamak için merkezden dışa doğru parlıyor.

Yasal Uyarı: Tüm kürelerin çapları birbirlerine göre doğru olduğuna rağmen, mesafeler elbette tamamen sahte. Ve Üzgünüm, Satürn'in yüzük yok

Oryantasyonlarla oynamak

Şimdi verilere göre renk yönlerini nasıl ayarlayacağız, ancak daha fazla olanak var. Verilere dayanarak pratik olarak her şeyi ayarlayabiliriz - her degradenin oryantasyonları bile.

Bunu denemek için, marvel sinema evrenindeki avengerler arasındaki işbirliklerini gösteren bir D3 akor diyagramı yapalım (Şekil 5). Altı avengers arasında koşan akorlar, her ikisinin de göründüğü film sayısına göre boyutlandırılır. Bu akorları basit bir doğrusal gradyanla dolduracağız, bir avenginin renginden diğerine geçiş yapacağız.

Bir akor genellikle tam olarak yatay veya dikey değildir. Bu yüzden x1'i ayarlamak zorunda kalacağız, x2 , y1 ve y2 Her bir avenginin dış arkının yerlerine dayanan değerler. Bu veriler orijinal veri setimizde değil, ancak d3'lere verdikten sonra D3.Layout.Chord İşlev, her ARC'nin başlangıç ​​ve bitiş açılarını içeren yeni bir veri kümesini geri alacağız ( D.Source.starttangle ve d.target.endangle ). Bu, degradeleri oluştururken tedarik ettiğimiz veri kümesidir.

Bir akorun bir ucundan diğerine geçen görünmez hattın piksel pozisyonlarını bilmemiz gerekir. Bunlar daha sonra vermek için kullanılır. X1, .., Y2 Her degradenin nitelikleri. Akor diyagramının yarıçapını ve bu pozisyonları geri almak için her bir avenger arkındaki Yağın yarıçapını kullanarak bazı trigonometri uygulayabiliriz. Tam trigonometrik formül aşağıdaki koddan çıkarıldı, ancak içinde bulacaksın Bu makaleye eşlik eden GitHub repo .

Her akor için benzersiz bir kimlik yapmak için, bir akorun her bir ucundaki Avenger'ın indeks değerinin bir dize kombinasyonu oluştururuz. D3'ler D3.Layout.Chord her zaman birini (avengers) kaynak ve diğeri hedef , benzersiz bir çift yapar. Daha sonra, akorları çizerken, doğru gradyanı aramak için aynı tekniği kullanabiliriz.

 var sınıfları = svg.append ("defs"). Seçim ("lineAleRadient")
.Data (Chord.Chords ())
.enter (). Eklemek ("lineAlGradient")
.ATTR ("ID", işlev (D) {iade "GradiDientChord-" + D.Source.
Endeks + "-" + d.target.index; })
.ATTR ("gradientunits", "userspaceonuse")
// bir akorun bir ucunun piksel konumu
.ATTR ("x1", işlev (D, I) {iadesi / * ... Trigonometri
D.Source Değerleri ... * /; })
.ATTR ("Y1", işlev (D, I) {iade / * ... * /})
// bir akorun diğer ucunun piksel konumu
.ATTR ("x2", işlev (D, I) {iade / * ... * /})
.ATTR ("Y2", işlev (D, I) {iade / * ... * /}); 

Her bir avenger kendi indeks numarasıyla tanımlandığından, renk fonksiyonu yapabiliriz, renkler , bu, her bir avenger'ın indeks değeri için rengini döndürür. Bu, iki renk durağını eklerken doğru renge atıfta bulunmayı kolaylaştırır.

 Grads.Append ("Durdur")
.ATTR ("Ofset", "% 0")
.ATTR ("STOP-COLOR", FUNCTION (D) {Dönüş Renkleri (D.Source.index);
});
Grads.Append ("Durdur")
.ATTR ("Ofset", "% 100")
.ATTR ("STOP-RENK", FUNCTION (D) {Dönüş Renkleri (D.Target.index);
}); 

Kalıntılar, akorların doldurma stilini ayarlarken (degrade kimliğini ayarlamak için aynı işlevle) sağdaki Degrade kimliğini aramaktır.

Yuvarlama

Bu öğretici sırasında, veri görselleştirmelerinde SVG gradyanlarını kullanmanın dört farklı yolu baktık, ancak her zaman yapabileceğiniz daha fazla şey var. Degrade animasyonlarıyla, örneğin veri görselleştirmesinin bir bölümünden bir akışını başka bir diğerine simüle edebilirsiniz.

Böylece bir dahaki sefere veri görselleştirme tasarladığınızda, yaratıcılığınızın ücretsiz çalışmasına izin verin. D3.js ile, aracın sınırları olduğunun düşündüğünüzden sınırlandırılmanız gerekmez. Çok az olmayan bir düşünce ve çaba ile en muhteşem şeyleri yapabilirsiniz.

Nadieh'in oturumunu kaçırmayın, SVG, 21-23 Eylül'de Londra'yı üretti. Şimdi kitap K!

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 280; buradan satın al K!