D3.js ile İnteraktif Grafikler Oluşturma

Adı : D3.js ile İnteraktif Grafikler Oluşturma

D3.js, medya ve interaktif grafikleri oluşturmak için kullanılabilecek güçlü bir JavaScript kütüphanesidir. Bu kütüphane, HTML, CSS ve SVG teknolojilerinin birleşik gücünü kullanarak, zekice oluşturulmuş grafikler, animasyonlar ve interaktif kullanıcı deneyimleri oluşturmanıza izin verir.

Başlamak için öncelikle, D3.js'yi projenize eklemeniz gerekmektedir. D3’yü proje klasörünün içeriği içerisinde veya bir uzak sunucudan ekleyebilirsiniz. Ardından, basit bir bar grafiği oluşturmaya başlayalım.

```javascript
// Veriler
var data = [30, 86, 168, 281, 303, 365];
// SVG platformu oluşturmak
var svg = d3.select(\"body\")
.append(\"svg\")
.attr(\"width\", 500)
.attr(\"height\", 500)
.style(\"background-color\", \"#e6e6e6\");

// Grup oluşturma
var bar = svg.selectAll(\"rect\")
.data(data)
.enter()
.append(\"rect\")
.attr(\"fill\", \"#00a2ff\")
.attr(\"width\", 40)
.attr(\"height\", function(d) {
return d;
})
.attr(\"x\", function(d, i) {
return i * 60 + 25;
})
.attr(\"y\", function(d) {
return 500 - d;
});

// Metin ekleme
var text = svg.selectAll(\"text\")
.data(data)
.enter()
.append(\"text\")
.text(function(d) {
return d;
})
.attr(\"x\", function(d, i) {
return i * 60 + 25;
})
.attr(\"y\", function(d) {
return 500 - d - 5;
})
.attr(\"font-family\", \"sans-serif\")
.attr(\"font-size\", \"12px\")
.attr(\"fill\", \"white\")
.attr(\"text-anchor\", \"middle\");
```

Bu kod, 6 adet veri elemanı üzerinden basit bir bar grafiği oluşturmaktadır. Kütüphanedeki d3.select(\"body\") yöntemini kullanarak SVG platformu oluşturup, daha sonra data dizisi ile grafik elemanlarını yönetiyoruz.

Görüldüğü gibi, her bir dikdörtgen öğesi ve metni bu verileri veri dizisinde tanımlanan değerlere göre boyutlandırır ve düzenler. Kodu çalıştırdığınızda, siz değişiklikler yapabilirsiniz ve grafiği güncelleyebilirsiniz.

Şimdi, öykü anlatımını daha da ilginç hale getirmek için biraz daha karmaşık bir örnek inceleyelim. Bu örnekte, \"Steam\" video oyunu mağazası için bir dağıtım grafiği oluşturacağız. Bu grafik, Steam'de en çok satılan oyun türlerini gösterir.

```javascript
// Veriler
var dataset = {
\"fps\": 70,
\"rol\": 22,
\"strateji\": 58,
\"macera\": 35,
\"sosyal\": 15,
\"simulasyon\": 45,
\"spor\": 60,
\"araba\": 23,
\"odev\": 1,
\"rpg\": 54,
\"korku\": 10,
\"indie\": 17,
\"coklu-oyuncu\": 43,
};

// SVG platformu oluşturma
var svg = d3.select(\"body\")
.append(\"svg\")
.attr(\"width\", 500)
.attr(\"height\", 500)
.style(\"background-color\", \"#ecf0f1\");

// Grup oluşturma
var g = svg.selectAll(\"g\")
.data(d3.entries(dataset))
.enter()
.append(\"g\")
.attr(\"transform\", function(d, i) {
return \"translate(0,\" + i * 25 + \")\";
});

// Alt grup oluşturma
var rects = g.append(\"rect\")
.attr(\"width\", function(d) {
return d.value * 3;
})
.attr(\"height\", 20)
.attr(\"fill\", \"#f1c40f\");

// Metin ekleme
var text = g.append(\"text\")
.text(function(d) {
return d.key + \": \" + d.value;
})
.attr(\"x\", 10)
.attr(\"y\", 15)
.attr(\"font-family\", \"sans-serif\")
.attr(\"font-size\", \"14px\")
.attr(\"fill\", \"black\");
```

Bu örnekte, dataset adlı nesne kullanıldı. Bu nesne, Steam video oyun mağazasındaki oyun türlerine ilişkin verilere sahiptir. Bu veriler, Steam'deki en popüler oyun türlerini gösterir ve biz bunları bir dağıtım grafiği olarak göstermek istiyoruz.

Daha sonra, SVG platformu oluşturulur ve verilere dayalı bir grup oluşturulur. Bu grup, öğeleri grafiğin farklı sıralarına yerleştirmek için bir dönüşüm içerir. Alt grup, dikdörtgenler gibi temsil edilen görsel öğeleri oluşturmak için kullanılır. Bu örnekte, her veri noktası için öğelerin dikdörtgenlerinin genişliği, yüksekliği ve dolgu rengi ayarlandı. Son olarak, metin de eklendi.

D3.js kullanarak öykü anlatımını güçlendirmek için birçok yol vardır. D3.js ile rasgele grafikleri oluşturabilir, Google Sheets’ten API verileri alarak grafikler yapabilir ya da basit metin grafiklerini daha alakalı hale getirebilirsiniz.

Sık sorulan sorular:

- D3.js nasıl indirilir?
D3.js, https://d3js.org adresinden indirilebilir ya da bir işlemci kullanıyorsanız eklemek istediğiniz projenin react js, vue js ya da angularjs gibi dosyalarınıza bilinen paket yöneticisi iki npm veya yarn paket yöneticisi kullanarak indirebilirsiniz.

- D3.js'nin güncel sürümü nedir?
D3.js'nin güncel sürümü 7.7.0 sürümüdür.

- D3.js hangi grafik türlerini destekler?
D3.js, bar grafiği, dağıtım grafiği, pasta grafiği, Benford kanununa göre grafiği, yıldız grafiği gibi birçok grafik türünü destekler.

- Senkron olarak nasıl grafik oluşturabilirim?
Grafikler yerine verileri indirerek çalışırken, bazı verilerin geç gelmesi gibi hallerinde grafikler belirgin bir şekiilde oluşmazlar. Bunu çözmek için, grafiklerinizin istenmeyen yerlerde olduğunu düşündüğünüz kısmını opacity:'0' değeri ile değiştirin, verilerin tamamı geldiğinde ise tüm grafikleri tek seferde göstermek için opacity:'1' değerine yüksek bir hızda güncelleyin.

- D3.js'yi öğrenmek için başka bir kaynağa ihtiyacım var mı?
D3.js’nin belgeleri oldukça kapsamlıdır, ancak öğrenme sürecinizi hızlandırmak için çeşitli öğreticiler, video dersleri ve çevrimiçi kaynaklar arayabilirsiniz."