JavaScript ve veri görselleştirme eğitimi ile web sayfalarınızı daha etkili hale getirin! Baştan sona öğrenin ve verilerinizi görsel olarak sunun Deneyin!
Veri görselleştirme, büyük veri setlerinin analiz edilip anlaşılmasına yardımcı olan önemli bir araçtır. JavaScript, veri görselleştirme için kullanılan birçok kütüphaneye sahip olması nedeniyle en çok tercih edilen dil haline gelmiştir. Bu makalede, üç popüler JavaScript kütüphanesi olan D3.js, Chart.js ve Highcharts ile ilgili konuların ele alınacağından bahsedilecektir.
D3.js, veri görselleştirme için açık kaynaklı bir JavaScript kütüphanesidir. Basit grafiklerden çok karmaşık veri görselleştirmelere kadar geniş bir yelpazede kullanılabilir. Chart.js, basit ve duyarlı grafikler oluşturmak için açık kaynak kodlu bir JavaScript kütüphanesidir. Sütun, çizgi, pasta ve radar grafiklerinin yanı sıra diğer türlerde grafikler de oluşturabilirsiniz. Highcharts ise zengin özellikleri ve kolay kullanımı ile en popüler yüksek performanslı grafik kütüphanesidir. Yarı saydam öğeleri, canlı değişkenleri ve hatta arka plan resimleri gibi pek çok özellik sağlar.
D3.js Nedir?
D3.js (Data-Driven Documents), veri görselleştirmesi için çok güçlü bir açık kaynaklı JavaScript kütüphanesidir. D3.js, HTML, SVG ve CSS gibi web standartlarını kullanarak zengin ve etkileşimli görseller oluşturmanızı sağlar.
D3.js, dünya genelinde kullanıcılara açık bir şekilde sunulmuştur ve öncelikle web tarayıcılarında çalışır. Veri görselleştirme işleminde çok fazla esneklik sağlar ve en ayrıntılı grafikleri bile görselleştirme olanağı sunar. Bu, D3.js'yi veri görselleştirme için birincil araç haline getirmiştir.
D3.js, verileri doğrudan HTML, SVG ve CSS ile modifiye ederek, web tarayıcısı üzerinde daha fazla kontrol sağlar. Bu özelliği sayesinde, D3.js ile grafikler ve görseller oluşturmak için herhangi bir eklenti veya aracı kullanmanız gerekmez.
Chart.js Nedir?
Chart.js, JavaScript diline dayalı olarak hazırlanmış bir açık kaynak kodlu kütüphanedir. Bu kütüphane, verileri grafiklere dönüştürerek görsel bir şekilde sunmanızı sağlar. Hem basit hem de kullanımı kolay bir arayüz sunan Chart.js, çeşitli grafik türleri için zengin özellikler sunar. Kullanıcıların ihtiyaçlarına yönelik olarak hazırlanmış bu kütüphane, sütun grafikleri, çizgi grafikleri, pasta grafikleri, radar grafikleri ve polar grafikleri oluşturmanıza izin verir.
Bunun yanı sıra Chart.js kullanarak interaktif grafikler oluşturmak da oldukça kolaydır. Grafiklerin animasyonlu bir şekilde görüntülenmesi de mümkündür. Verilerinizi birden çok gösterge ile birleştirebilir ve anahtarlar kullanarak grafiklerinizi özelleştirebilirsiniz. Kullanıcı arayüzünü basit ve anlaşılır tutmaya özen gösteren Chart.js, kullanıcı dostu bir grafik kütüphanesi olarak öne çıkmaktadır.
Chart.js Kullanımı
Chart.js, kullanıcı dostu ve duyarlı grafikler oluşturmak için kullanılabilecek bir açık kaynak kodlu JavaScript kütüphanesidir. Basit verileri sütun, çizgi, pasta veya radar grafiklerine dönüştürmek çok kolaydır.
Bunun için, Chart.js kütüphanesini projenize dahil etmeniz ve kullanmaya hazır hale getirmeniz gerekiyor. Sonrasında, çizmek istediğiniz grafiğin türüne ve hangi verileri görselleştirmek istediğinize karar vermeniz gerekiyor.
Örneğin, yükselen bir veri kümesini görselleştirmek için sütun grafiği kullanmak mantıklı olabilir. Verileriniz daha keskin bir trend çizgisi gösterdiğinde ise, bir çizgi grafiği daha uygun olabilir. Pasta grafikleri verilerin yüzde dağılımını vurgularken, radar grafikleri birden fazla değişkeni aynı anda göstermek için kullanılabilir.
Bu grafik türlerini oluşturmak için data öğesini kullanarak verilerinizi özelleştirebilirsiniz. Ayrıca, oluşturmak istediğiniz grafikler için değişiklik yapmanız gereken stil ve şablonları kullanarak görünümünü ayarlayabilirsiniz.
Bu kütüphane birkaç farklı özellikle birlikte gelir. Örneğin, interaktif grafikler oluşturmak için animasyon özelliklerini kullanabilirsiniz. Bunun yanı sıra, grazterliğiniz arttıkça ve grafiğinizde daha fazla değişiklik yapmak istediğinizde ilave özellikler de sunulabilmektedir.
Chart.js'in düzgün bir şekilde çalışması için ilgili JavaScript dosyalarının sayfanıza dahil edilmesi gerekir. Bu nedenle, sayfanızın en üstü veya altına birkaç satır kod eklemeniz gerekebilir. Ama eğer kullanması ücretsiz, basit bir kütüphane ise, projenizde görselleştirme yapmak için ideal bir araçtır.
Chart.js ile Sütun Grafikleri Oluşturma
Sütun grafikleri, verilerin dikey çubuklar kullanılarak görselleştirilmesinde kullanılan grafik türlerindendir. Chart.js ile sütun grafikleri oluşturmak oldukça kolaydır. Bu kütüphane, veri kümenizi alır, işler ve sizin için grafik oluşturur.
Chart.js sütun grafikleri, tekli veya çift sütunlar olarak oluşturulabilir. Tekli sütun grafikleri, her bir veri noktası için yapılırken, çift sütun grafikleri verileri ikili çiftler halinde gruplar ve ayrıştırır.
Chart.js sütun grafikleri oluştururken kullanabileceğiniz birçok özellik bulunmaktadır. Grafiklerde renk, etiket ve arka plan rengi gibi özelleştirmeler yapılır. Ayrıca sütun genişliği, boşlukları ve grafiklerin Y ve X eksenlerindeki konumları değiştirilebilir.
Aşağıdaki örnekte bir sütun grafik oluşturulmuştur. Grafikte, bir hava durumu uygulamasında kullanılan bir veri kümesi kullanılmıştır. Bu veri kümesinde, belirli bir gün için ani sıcaklık değişimleri gösterilmiştir.
| Gün | Sıcaklık (°C) |
|---|---|
| Pazartesi | 18 |
| Salı | 20 |
| Çarşamba | 25 |
| Perşembe | 16 |
| Cuma | 21 |
| Cumartesi | 23 |
| Pazar | 19 |
Bu veri kümesi kullanılarak sütun grafik oluşturulmuştur. Grafikte her bir sütun, belirli bir gün için bir sıcaklık değerini temsil eder. Özellikle Çarşamba günü sıcaklık en yüksek değere ulaşmıştır. Bu şekilde veri anlaşılır ve kolayca yorumlanabilir hale gelir.
Chart.js kütüphanesi, sütun grafiklerinde kullanımı kolay özellikleriyle verilerinizin daha anlamlı ve görünür olmasını sağlar.
Chart.js ile Çizgi Grafikleri Oluşturma
Chart.js ile çizgi grafikleri oluşturmak oldukça kolaydır. Öncelikle, Chart.js kütüphanesini sayfamıza dahil etmeliyiz. Bu adımı gerçekleştirdikten sonra verilerimizi hazırlamalıyız. Hazırlanan verilerin Chart.js tarafından anlaşılması için belirli bir formata uygun olması gerekmektedir. Daha sonra, HTML içinde canvas elementi oluşturmalı ve bu elemente ID vermelisiniz.
| HTML Kodu | Açıklama |
| <canvas id="myChart"></canvas> | Canvas elementi oluşturulması |
Verilerimizi hazırladıktan sonra, Chart.js tarafından sağlanan seçenekler kullanılarak çizgi grafikleri oluşturulabilir. Bunlar arasında, eksen etiketleri, renkler, çizgi stil ve sınırları gibi grafikleri özelleştirmek için birçok seçenek bulunur.
Örneğin, aşağıdaki kod parçası verilerin bağlantılı çizgi grafiklerine dönüştürülmesini sağlar:
| JavaScript Kodu | Açıklama |
| var ctx = document.getElementById('myChart').getContext('2d'); | Canvas elementinin çekirdek Grafik İşleme Birimi'ne bağlanması sağlanır |
| var myChart = new Chart(ctx, { | Chart.js kullanarak yeni bir grafik oluşturulur |
| type: 'line', | Çizgi grafik tipi belirlenir |
| data: { | Grafik verileri belirlenir |
| labels: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'], | Eksen etiketleri belirlenir |
| datasets: [{ | Grafik veri seti belirlenir |
| label: '2021 Satışları', | Grafik başlığı belirlenir |
| {Çizgi Stili} | Grafik çizgi stili belirlenir |
| data: [45, 32, 55, 12, 10, 22], | Grafik verileri belirlenir |
| borderWidth: 2, | Grafik sınır kalınlığı belirlenir |
| backgroundColor: 'rgba(255, 99, 132, 0.2)', | Grafik arka plan rengi belirlenir |
| borderColor: 'rgba(255, 99, 132, 1)'}] | Grafik sınır rengi belirlenir |
| ] | Grafik veri seti sonlandırılır |
| }, | Grafik veri objesi sonlandırılır |
| options: { | Grafik opsiyonları belirlenir |
| scales: { | Grafik eksenleri özelleştirilir |
| yAxes: [{ | Grafik y eksen özellikleri belirlenir |
| ticks: { | Grafik y eksenindeki etiketler belirlenir |
| beginAtZero: true | Grafik y ekseninin minimum değeri belirlenir |
| }}] | Grafik y eksen özellikleri sonlandırılır |
| }} | Grafik opsiyonları sonlandırılır |
| }); | Grafik oluşturma işlemi tamamlanır |
Sonuç olarak HTML dosyasında, "myChart" ID'sine sahip canvas içinde bağlantılı çizgi grafikleri gösteriliyor olacaktır.
D3.js Kullanımı
D3.js (Data Driven Documents) açık kaynaklı bir JavaScript kütüphanesidir ve veri görselleştirme için kullanılan en popüler araçlardan biridir. D3.js, verilerinizi özelleştirmek ve farklı grafikler oluşturmak için çok esnek bir yapıya sahiptir. Bu nedenle, özel grafikler oluşturmak için D3.js'yi kullanmak, veri görselleştirme için daha fazla esneklik sağlar.
D3.js ile oluşturulmuş grafikler, HTML, CSS ve SVG dahil olmak üzere web standartlarını kullanır. Bu sayede, geliştiriciler kolayca özelleştirilebilen, ölçeklenebilir ve etkileşimli grafikler oluşturabilirler. D3.js, özellikle büyük ve karmaşık veri setleri için idealdir ve istenilen özelliklere sahip özel grafikler oluşturmanıza olanak tanır.
D3.js ile birçok özel grafik oluşturabilirsiniz. Örneğin, ağaç grafikleri, hiyerarşik verilerin görselleştirilmesinde kullanılabilir ve D3.js ile kolayca oluşturulabilir. Ayrıca, coğrafi bilgileri içeren veri kümeleri için interaktif haritalar oluşturmak için de kullanılabilirsiniz. D3.js, özellikle veri görselleştirmeye yönelik özel gereksinimleri olan kuruluşlar ve geliştiriciler için ideal bir araçtır.
D3.js ile Ağaç Grafikleri Oluşturma
D3.js çevresindeki açık kaynaklı ekosistem, hiyerarşik verileri görselleştirmek için kullanabileceğiniz birkaç araç sunar. Bunlardan biri de ağaç grafikleri oluşturma yeteneği ile D3.js kütüphanesidir. Ağaç grafikleri, düğümlerin belirli bir yönteme göre yerleştirildiği ve her düğümün bir ebeveyne ve bir veya daha fazla çocuğa sahip olduğu hiyerarşik bir şekli temsil eder. Bu, organizasyon şemaları, dosya sistemleri ve tümleştirilmiş veriler gibi uygulamalarda faydalıdır.
D3.js'in temel prensiplerine aşina olduğunuzda, ağaç yapısını oluşturmak oldukça basittir. İlk önce, HTML sayfanıza SVG elemanını ekleyerek başlayın. Düğümler, çizgi ve/konular ile birleştirilen bu SVG elemanı içine yerleştirilir. Daha sonra d3.hierarchy() fonksiyonu ile veri setinizin hiyerarşisini oluşturun. Daha sonra bu hiyerarşiyi kullanarak, verileri düğümlere çevirin ve bunların düğüm ve kenar özelliklerini ayarlayın. Son olarak, ağacı çizmek için d3.tree() fonksiyonunu kullanın ve SVG elemanınızın içine yerleştirin.
D3.js ile Haritalar Oluşturma
D3.js, veri görselleştirmesi için kullanışlı bir açık kaynaklı JavaScript kütüphanesidir. D3.js ile kullanıcılar coğrafi veri kümesini kullanarak interaktif haritalar oluşturma imkanına sahip olurlar. Bu haritalar, kullanıcıların yere göre bir veri kümesinin anlaşılmasına yardımcı olabilir. Bunun yanı sıra D3.js, harita projeksiyonları sunarak, kullanıcıların gerçek zamanlı verileri takip etmesine olanak tanır.
Bir coğrafi harita oluşturmak için D3.js kullanarak kullanıcının coğrafi veriler hakkında bilgi sahibi olması gerekiyor. Harita oluşturma süreci, veri kümesinin harita özellikleriyle uyumlu hale getirilmesiyle başlıyor. D3.js, iyi bir harita yapısı oluşturmak için gereken araçları sağlar.
Haritalar sıfırdan oluşturulabileceği gibi bir veri kaynağından da yüklenerek oluşturulabilir. D3.js, haritaların özelleştirilebilirliğini arttırmak için SVG (Scalable Vector Graphics) özelliklerini kullanır. Bu sayede, kullanıcılar renk paletleri, ögelerin konumları, boyutları gibi detayları özelleştirebilirler.
Highcharts Nedir?
Highcharts bir JavaScript kütüphanesidir. Çok sayıda özelliği ve kolay kullanımı sayesinde oldukça popüler bir yüksek performanslı grafik kütüphanesi olarak bilinir. Oldukça esnek bir yapıya sahip olan Highcharts, özel grafikler oluşturmak için tasarlanmıştır. Ancak, zamanla çeşitli grafik türlerini desteklemeye başlamıştır. Highcharts, sıradan bir web sayfasına birçok çizgi grafiği, pasta grafiği ve hatta harita eklemeyi mümkün kılar.
Birçok kullanıcı, Highcharts için hazırlanmış birçok kaynak ve örnekler sayesinde herhangi bir kodlama deneyimi olmadan bile kolay bir şekilde grafikler oluşturabilir. Highcharts, verileri görselleştirmek için başarılı ve etkileyici yollar sunar. Kullanıcılar, fonksiyonel grafikleri, zoom işlevlerini, verileri düzenleme özelliklerini ve birçok animasyonlu grafik türünü kullanabilirler. Yükleme ve kullanma işlemi oldukça basittir.
Highcharts'ın en sevilen özelliklerinden biri, birkaç tıklamayla görsel grafikleri - veri hikayeleri - oluşturabilmenizdir. Highcharts, birçok farklı görselleştirme özelliği sunar, bu nedenle kullanıcılar grafiğinin görünümünü doğru hale getirmek için kolayca ayarlayabilirler. Yığınlanmış sütun grafikleri, farklı sütunlar bir arada görüntülenir ve toplamı gösterir. Bu özellik, bir veri kümesini analiz etmek veya farklı veri setlerindeki değişimleri karşılaştırmak için oldukça yararlıdır.
Highcharts, veri görselleştirme için oldukça popüler bir araçtır. Basit ve etkili grafikler oluşturmanın yanı sıra, kullanıcıların benzersiz özelliklere sahip karmaşık grafikler yapmalarına da izin verir. Highcharts'ın geniş özellik yelpazesine olan talep, yıllar içinde onu veri görselleştirme alanında lider konuma getirmiştir.
Highcharts Kullanımı
Highcharts, kullanıcı dostu arayüzü ve zengin özellikleri sayesinde popüler bir yüksek performanslı grafik kütüphanesi haline gelmiştir. Başlangıçta özel grafikler oluşturmak için tasarlanan Highcharts, zaman içinde çeşitli grafik türlerini desteklemeye başlamıştır.
Highcharts'ın sunduğu grafik türleri arasında sütun, çizgi, pasta, alan, nokta, bubble grafikleri ve daha birçok özellik bulunmaktadır. Kütüphanenin JavaScript tabanlı olması, farklı platformlarda ve cihazlarda sorunsuz çalışabilmesini sağlar. Highcharts'ın responsive tasarımı sayesinde grafikler farklı cihazlarda şık ve okunaklı bir şekilde görüntülenebilir.
Bunun yanında Highcharts, verilerin canlı olarak güncellenmesini ve interaktif grafikler oluşturulmasını da destekler. Örneğin, grafikteki bir noktaya tıklayarak bağlı verilere ulaşmak mümkündür. Highcharts kütüphanesi, birden fazla grafik kullanarak bir gösterge paneli oluşturmak gibi büyük projelerde de kullanılabilir.
Highcharts ile Yığınlanmış Sütun Grafikleri Oluşturma
Highcharts, özellikle yığınlanmış sütun grafikleri gibi grafik türlerinde etkileyici bir performans sergiler. Bu grafik türü, her bir sütunun dikey olarak yığınlanmasıyla oluşur. Bu şekilde, farklı sütunların bir arada görüntülenmesi ve toplamı gösterilir.
Yığınlanmış sütun grafikleri, genellikle kategorik verilerin karşılaştırmasında kullanılır. Örneğin, Aylara göre Satışlar gibi bir veri kümesinde, her bir sütun farklı bir ayı temsil edebilirken, her bir renk de farklı bir kategoriyi. Bu sayede, veriler kolayca okunabilir ve karşılaştırılabilir hale gelir.
Highcharts kullanarak yığınlanmış sütun grafikleri oluşturmak oldukça kolaydır. Veri kümesini ve grafik tipini belirledikten sonra, özellikle sütunların yığılıp yığılmayacağını belirlemek gereklidir. Bunun için, yığılmış sütun grafiklerinde "stacked" özelliği kullanılır.
Aşağıdaki örnek, Highcharts ile yığınlanmış sütun grafikleri oluşturmanın nasıl yapıldığını açıklamaktadır:
| Ay | Ürün A | Ürün B |
|---|---|---|
| Ocak | 300 | 200 |
| Şubat | 350 | 250 |
| Mart | 400 | 300 |
Yukarıdaki tablo, Ocak, Şubat ve Mart aylarında Ürün A ve B'nin elde ettiği satışları göstermektedir. Bu veri kümesini yığınlanmış sütun grafikleri ile görselleştirdiğimizde, sonuç aşağıdaki gibi görünecektir:
Highcharts.chart('grafik', { chart: { type: 'column' }, title: { text: 'Ürün Satışları' }, xAxis: { categories: ['Ocak', 'Şubat', 'Mart'] }, yAxis: { min: 0, title: { text: 'Satışlar' } }, plotOptions: { column: { stacking: 'normal' } }, series: [{ name: 'Ürün A', data: [300, 350, 400], stack: '1' }, { name: 'Ürün B', data: [200, 250, 300], stack: '1' }] });Bu kod, yığılmış sütun grafiklerini oluşturmak için kullanılan basit bir örnektir. Grafik türü "column" olarak belirtiliyor ve "stacking" özelliği "normal" olarak ayarlanıyor. Ayrıca, "stack" özelliği ile hangi sütunların yığılacağı belirtiliyor.