Turkish Tutorial About D3 - General features

in #utopian-io6 years ago

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

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @aysunekmekci I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • This is your first accepted contribution here in Utopian. Welcome!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Hidden in Utopian as it is plagiarized piece of work.

You can contact us on Discord.
[utopian-moderator]

Coin Marketplace

STEEM 0.28
TRX 0.12
JST 0.034
BTC 63463.10
ETH 3243.17
USDT 1.00
SBD 4.45