D3.js Nedir, Ne Değildir?

D3 (Data-Driven Documents) veri odaklı belgeler anlamına gelir.

D3.js web üzerinden erişilebilen, ayrıntılı veri görselleştirmesi için gereken ihtiyacı doldurmak için oluşturuldu. Kütüphanenin sağlam tasarımı nedeniyle, grafik yapmaktan daha fazlasını yapar. Ve bu iyi bir şey çünkü veri görselleştirme artık pasta grafiklerine ve çizgi grafiklere dayanmıyor. Artık haritalar, etkileşimli diyagramlar, veri panoları, raporlar ve web’de gördüğünüz diğer her şeyle bütünleştirilen diğer araçlar ve içerikler anlamına geliyor.

D3.js’nin yaratıcısı daha önceki bir veri görselleştirme kütüphanesi olan ’in geliştirilmesine yardımcı oldu ve aynı zamanda hafif bir formda vektör ve tilemapping yeteneği sağlayan bir JavaScript kütüphanesi olan ’i geliştirdi. Bu yaptığı işler, modern standartlara ve modern tarayıcılara odaklanan D3.js’in oluşturulmasını sağlayacaktı. Internet Explorer 6’da yayınlanmamasına rağmen, modern tarayıcılarda standartların yaygınlaştırılması, web geliştiricilerin tarayıcıda kesintisiz olarak dinamik ve etkileşimli içerik sunmalarına olanak sağlamıştır.

D3.js yüksek performans sağlar ve web standartlarına ve HTML’in özünde bulunan Belge Nesne Modeli’ne (DOM) bağlıdır. D3, geliştiricilere verileri kullanarak zengin etkileşimli ve animasyonlu içerik oluşturma ve bu içeriği mevcut web sayfası öğelerine bağlama yeteneği sağlar. Size yüksek performanslı veri panoları ve gelişmiş veri görselleştirmesi oluşturma ve geleneksel web içeriğini dinamik olarak güncelleme araçları sağlar.

Ancak D3, geliştiricilerin kolayca kullanabileceği bir kütüphane değil. Çünkü genellikle basit bir grafik kütüphanesi olmasını beklerler. Diğer grafik kitaplıkları kullanmaktan çok daha uzun bir süreçtir, ancak D3 ile herhangi bir kısıtınız olmaz. Diğer grafik kitaplıkları elverişli olarak çizgi grafikler ve pasta grafikler oluşturmanıza izin veriyor olsa da, bundan daha fazlasını yapmak istediğinizde tıkanırsınız.

Aşağıda örnek bir çizgi grafiği kodu var.

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v4.js"></script>

<div id="chart"></div>

<script>
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("#chart")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",

  // When reading the csv, I must format variables:
  d => {
    return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  },

  function(data) {
    // Add X axis
    var x = d3.scaleTime()
      .domain(d3.extent(data, d => d.date; ))
      .range([ 0, width ]);
    
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(data, d => +d.value)])
      .range([ height, 0 ]);
    
    svg.append("g")
      .call(d3.axisLeft(y));

    // Add the line
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(d => x(d.date))
        .y(d => y(d.value))
      )
})
</script>

NextJS Grafik Kütüphaneleri

Last updated 5 years ago

Was this helpful?

D3 (Data-Driven Documents) veri odaklı belgeler anlamına gelir.

Aşağıda örnek bir çizgi grafiği kodu var.

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v4.js"></script>

<div id="chart"></div>

<script>
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("#chart")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",

  // When reading the csv, I must format variables:
  d => {
    return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
  },

  function(data) {
    // Add X axis
    var x = d3.scaleTime()
      .domain(d3.extent(data, d => d.date; ))
      .range([ 0, width ]);
    
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(data, d => +d.value)])
      .range([ height, 0 ]);
    
    svg.append("g")
      .call(d3.axisLeft(y));

    // Add the line
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(d => x(d.date))
        .y(d => y(d.value))
      )
})
</script>