Adobe Edge Code'u D3.js ile birlikte kullanan bu eğitim, HTML'de otomatik veri görselleştirmeye nasıl başlayacağınızı gösterecektir. Design Council’ın tasarım endüstrisi araştırma programından alınan verilerle bir halka grafik oluşturacağız.
D3.js kullanarak veri görselleştirmeleri oluşturmaya nasıl başlayacağınız konusunda size bazı ipuçları vereceğim. Verilerden D3 ile oluşturulan SVG grafikleri oluşturacaksınız. Grafiklerinizi etkileşimli hale getirmenin yanı sıra grafikleri bir HTML düzenine nasıl yerleştireceğinizi de inceleyeceğiz.
01 D3.js geliştiricisi Mike Bostock tarafından sunulan harika bir kaynak kod olan mbostock bloklarında bulunan bir pasta grafik örneğiyle başlayacağız. D3js.org'daki kod örneklerinde aradığıma benzer görünümlü bir grafik buldum. Bazı kullanışlı ipuçları sağladığı için kitaplığın girişini okumaya değer.
02 Şimdi bazı veriler ekleyeceğiz. Burada The Design Council’in web sitesinin araştırma bölümünden bazılarını kullanıyorum. Rakamlar, 2009'dan beri Birleşik Krallık'taki serbest tasarımcılarla ilgilidir. İlk veri seti "İngiliz serbest çalışan tasarımcılar nereye dayanıyor?"
03 Değişkeni kaldırarak bazı özel renkler ekleyeceğim:
renk = d3.scale.category20 (),
ve ekliyor:
// Özel Renkler Ekleyin
var color = d3.scale.ordinal ()
.range (["# EC0677", "# EA2F91", "# E25AA1", "# 6b486b",
"# 926593", "# C793C9", "# DBC6D2"]);
Göreceğiniz gibi halka grafik örneği yalnızca "val" veri kümesi için etiketler sağlıyor. Hem "val" hem de "ad" verilerini göstermek istiyorum. Bu nedenle, bu kodu kullanarak ad verilerini göstermek için yeni bir işlev ekledim:
// Pozisyonu hesapla
var rotate = d3.svg.arc (). innerRadius (r + 0) .outerRadius (r + 110);
// Daha büyük yaylara, yay merkezine çevrilmiş ve döndürülmüş bir etiket ekleyin.
arcs.append ("svg: text")
.attr (işlev (d) {dönüş d.endAngle - d.startAngle> .2;})
.attr ("dy", ".35em")
.style ("fi ll", "gri")
.style ("yazı tipi", "normal 10px Arial")
.attr ("metin bağlantısı", "orta")
.attr ("transform", function (d) {return "translate (" + rotate.centroid (d) + ") döndür (" + açı (d) +
“)”; })
.text (function (d) {return d.data.name;});
// Radyandan dereceye dönüştürerek yayın etiket açısını hesaplar.
function angle (d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
döndürmek a> 90? a - 180: a;
}
04 Burada HTML düzenimi genişlettim ve aynı zamanda grafiğimin kodunu kopyalayan bir kopya grafik oluşturdum. Her bir grafik daha sonra aşağıdaki kod kullanılarak bir "div" öğesine eklenir:
var vis = d3.select ("# pasta").
append ("svg: svg")
Ardından, İngiltere'deki serbest çalışanların ne kadar süredir çalıştığını göstermek için ikinci tablodaki veri kümesini güncelledim:
var data = [
{ad: "12 aydan az", değer: 11},
{ad: "1–3 yıl", değer: 31},
{ad: "4–6 yaş", değer: 25},
{ad: "7-10 yaş", değer: 14},
{ad: "11-15 yaş", değer: 6},
{ad: "artı 15 yıl", değer: 14}
];
05 Son olarak, halka grafiğimin her bir segmentine bir rollover efekti ekledim. Bunu yapmak için önce grafiğe yeni bir değişken eklememiz gerekir:
arcOver = d3.svg.arc (). İç Yarıçap (60) Dış Yarıçap (r + 15); // Yarıçapı ayarla
Bu, üzerine gelme efekti için yeni bir iç ve dış yarıçap belirler. Daha sonra halka segmentlerine bir "mouseover" ve "mouseout" fonksiyonu eklemeliyiz. Bunu yapmak için şunu ekleyin:
.on ("mouseover", function (d) {// Fareyi Üzerinden Kaldırma efektini çağırın.
d3.select (bu) .select ("yol"). geçiş ()
.duration (400)
.attr ("d", arcOver);
})
.on ("mouseout", function (d) {
d3.select (bu) .select ("yol"). geçiş ()
.duration (600)
.attr ("d", ark);
});
Farklı efektler elde etmek için yarıçap değerlerini süre değerleriyle birlikte denemekten çekinmeyin.
Kardeş sitemiz Creative Bloq'da en iyi 35 JavaScript örneğini keşfedin.
