Turkish Tutorial About D3 - General features

Hello friends, I have been researching on large data analysis and social media usage. I compared it with D3.js library. I saw in this library, there is a lot of work to do in the field of data analysis and visualization. I realized how easy and fast I learned it with a few codes, in this first post I will be entering D3 under the heading of choices, transitions, dynamic features.

İmagesource

Öncelikle D3.js, verilere dayanarak belgeleri işlemek, düzenlemek için kullanılan bir JavaScript kütüphanesidir. HTML kullanarak verilerimizi hayata geçirmemize yardımcı olur. Tescilli bir çerçeve ile kendinizi bağlayan güçlü bir görsel bileşenine sahip. DOM manipülasyonu için zengin bir veri tabanı vererek modern tarayıcıya tüm yeteneklerini sunar.

En son sürümü (4.12.0) buradan indirebilirsiniz: d3.zip

Son sürüme rahatça bağlanmak için bu parçacığı kopyalayınız:
<script src="https://d3js.org/d3.v4.min.js"></script>

D3, verilere dayalı belgelerin verimli bir şekilde manipüle edilmesini sağlıyor. HTML, SVG ve CSS gibi web standartlarının tüm özelliklerini ortaya koyan olağanüstü bir esneklik sağlar. D3, son derece hızlıdır, büyük veri kümelerini ve etkileşim ve animasyon için aşırı dinamik davranışlar sergilemektedir. D3'ün işlevsel hali, resmi ve topluluk tarafından geliştirilen çeşitli modüller kodun yeniden kullanılmasını sağlar.

Seçimler

W3C DOM API kullanarak belgeleri değiştirmek sizce de sıkıcı değil mi? Yöntem adları ayrıntılı ve zorunlu yaklaşım, el ile yenileme ve geçici durumun muhasebesi gerektirir.
Mesela, paragraf elemanlarına ait metin rengini değiştirmek için:

var paragraphs = document.getElementsByTagName("p");
 for (var i = 0; i < paragraphs.length; i++) {
 var paragraph = paragraphs.item(i);
 paragraph.style.setProperty("color", "white", null); 
}

Yukarıda ki döngüyü şu şekilde de yazabilirsiniz:

d3.selectAll("p").style("color", "white");

Seçiciler W3C Selectors API tarafından tanımlanan ve yerel olarak modern tarayıcılar tarafından desteklenen bir manipülasyondur. Yukarıdaki örnekler düğüm adınlarına göre seçilirler. Elemanlar, sınırlama, nitelik değerleri, sınıf ve kimlik ve benzeri çeşitli önekler kullanarakta seçilebilir.

D3, düğümleri değiştirmeye yönelik bir çok yöntem sunar. Bunlardan bir kaç tanesi şu şekildedir;
-Öznitelikleri veya stilleri ayarlama
-Olay dinleyicileri kaydetme
-Düğüm ekleme, kaldırma veya sıralama
-HTML veya metin içeriğini değiştirme

Dinamik Özellikler

-Paragrafları rastgele renklendirmek isterseniz eğer:

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

-Çift ve tek düğümlerde ki gri tonlarını değiştirmek için:

d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

Veriler bir dizi değer olarak belirtilir ve her değer, seçim işlevlerine birinci argüman (d) olarak aktarılır. Varsayılan dizine göre birleşimle, veri dizilimindeki ilk öğe seçimin ilk düğümüne, ikinci öğe ikinci düğüme geçilir ve bu şekilde devam eder.

-Bir dizi sayıyı paragraf öğelerine bağladıktan sonra, bu numaralar ile dinamik yazı tipi boyutlarını hesaplamak için:

d3.selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

D3, önceden bağlanmış verileri almış olacaktır.

Girin ve Çıkın

D3'ün giriş ve çıkış seçeneklerini kullanarak, gelen veriler için yeni düğümler oluşturabilir ve artık gerekli olmayan giden düğümleri kaldırabilirsiniz. Veri yerine düğüm sayısı azsa, ek veri öğeleri, girme seçimini oluşturur; bu girişi seçim girişine ekleyerek oluşturabilirsiniz.

d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

• Ortak bir model, ilk seçimi üç kısma böler: güncellemek üzere değiştirilecek düğümler, eklenecek düğümler ve çıkarılacak düğümler.

Update…
var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });

Enter…
p.enter().append("p")
    .text(function(d) { return d; });

Exit…
p.exit().remove();

Bu üç kısmı ayrı ayrı ele alarak, hangi düğümlerde hangi işlemlerin gerçekleşeceğini kesin olarak belirleyebilirsiniz. Bu, performansı artırır ve geçişler üzerinde daha fazla kontrol sağlar. D3, kullanıcı etkileşimine, zaman içindeki animasyona veya hatta bir üçüncü tarafın eş zamanlı bildirimine tepki olarak mevcut bir belgeyi değiştirmenize izin verir.

Geçişler
-Geçişler zamanla stilleri ve nitelikleri aşamalı olarak gösterir.
-Tırmanma, esnek, kübik ve doğrusal gibi kolaylaştırıcı fonksiyonlar yardımıyla kontrol edilebilir.
-Ara değer hesaplama araçları, dizeler içine gömülü sayılar ve sayılar (yazı tipi boyutları, yol verileri vb.) ve bileşik değerler gibi ilkelleri destekler.
-Karmaşık özellikleri ve veri yapılarını desteklemek için D3'ün ara değer hesaplama aracı ile kayıt defterinizi bile genişletebilirsiniz.

• Sayfanın arka planını siyaha döndürmek için:

d3.select("body").transition()
    .style("background-color", "black");

• Sembol haritasındaki daireleri yeniden boyutlandırmak için:

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

D3, yükü azaltır ve yüksek kare hızında daha fazla grafik karmaşıklığı sağlar. D3 ayrıca olaylar yoluyla karmaşık geçişlerin sıralanması için izin verir.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---