on
D3.js Nedir Ne Değildir
D3 (Data-Driven Documents) veri odaklı belgeler anlamına gelir. Yıllardır geliştiriciler etkileşimli panolar, internet uygulamaları ve dinamik olarak yönlendirilen içerik gibi veri odaklı dokümanlar oluşturuyorlar.
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çerik anlamına geliyor.
D3.js’nin yaratıcısı Mike Bostock daha önceki bir veri görselleştirme kütüphanesi olan Protovis’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 Polymaps’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.
<!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>