Veri Görselleştirme

Bu projede, JavaScript ve popüler bir grafik kütüphanesi olan Chart.js kullanarak verileri görselleştirmeyi öğreneceğiz. Farklı grafik türleri (çubuk, çizgi, pasta vb.) oluşturacak, verileri dinamik olarak yükleyecek ve grafiklere etkileşimli özellikler ekleyeceğiz. Bu proje, karmaşık verileri anlaşılır ve etkileyici grafiklere dönüştürme becerisi kazandıracak.

Proje Detayları

Adım Adım Geliştirme

Bu bölümde, veri görselleştirme uygulamasını adım adım nasıl geliştirebileceğinizi öğreneceksiniz. Her adımda, ilgili kod parçalarını ve açıklamalarını bulacaksınız.

Adım 1: Proje Yapısını Oluşturma

İlk olarak, projemiz için gerekli dosyaları oluşturalım:

  • index.html - Ana HTML dosyası
  • style.css - CSS stil dosyası
  • script.js - JavaScript kod dosyası
  • data.json - Örnek veri dosyası (isteğe bağlı)
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veri Görselleştirme</title>
    <link rel="stylesheet" href="style.css">
    <!-- Chart.js Kütüphanesi -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <h1>Veri Görselleştirme Projesi</h1>
        
        <div class="chart-container">
            <div class="chart-controls">
                <button class="chart-btn" data-chart-type="bar">Çubuk Grafik</button>
                <button class="chart-btn" data-chart-type="line">Çizgi Grafik</button>
                <button class="chart-btn" data-chart-type="pie">Pasta Grafik</button>
                <button class="chart-btn" data-chart-type="radar">Radar Grafik</button>
            </div>
            <div class="chart-area">
                <canvas id="myChart"></canvas>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Adım 2: Temel CSS Stillerini Ekleme

Grafik konteyneri ve butonlar için temel CSS stillerini ekleyelim:

style.css
/* Genel Stiller */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
}

/* Grafik Konteyneri */
.chart-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Grafik Kontrolleri */
.chart-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.chart-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.chart-btn:hover {
    background-color: #2980b9;
}

.chart-btn.active {
    background-color: #e74c3c;
}

/* Grafik Alanı */
.chart-area {
    position: relative;
    height: 400px;
    width: 100%;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .chart-area {
        height: 300px;
    }
    .chart-container {
        padding: 20px;
    }
}

Adım 3: İlk Grafiği Oluşturma (Çubuk Grafik)

Şimdi, Chart.js kullanarak ilk grafiğimizi oluşturalım. Başlangıçta bir çubuk grafik göstereceğiz:

script.js
// DOM elementlerini seçme
const ctx = document.getElementById('myChart').getContext('2d');
const chartButtons = document.querySelectorAll('.chart-btn');

// Grafik örneğini tutacak değişken
let myChart;

// Örnek veri seti
const sampleData = {
    labels: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'],
    datasets: [{
        label: 'Aylık Satışlar (TL)',
        data: [12000, 19000, 15000, 21000, 18000, 25000],
        backgroundColor: [
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
            'rgba(255, 159, 64, 0.6)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
};

// Grafik oluşturma fonksiyonu
function createChart(type, data, options = {}) {
    // Eğer mevcut bir grafik varsa, önce onu yok et
    if (myChart) {
        myChart.destroy();
    }
    
    // Yeni grafik oluştur
    myChart = new Chart(ctx, {
        type: type, // Grafik türü (bar, line, pie, radar vb.)
        data: data, // Grafik verisi
        options: {
            responsive: true, // Responsive tasarım
            maintainAspectRatio: false, // En boy oranını koruma
            plugins: {
                legend: {
                    position: 'top', // Açıklama konumu
                },
                title: {
                    display: true,
                    text: `${type.charAt(0).toUpperCase() + type.slice(1)} Grafik Örneği` // Grafik başlığı
                }
            },
            scales: {
                y: {
                    beginAtZero: true // Y ekseni sıfırdan başlasın
                }
            },
            ...options // Ekstra seçenekler
        }
    });
}

// Sayfa yüklendiğinde varsayılan çubuk grafiği oluştur
document.addEventListener('DOMContentLoaded', () => {
    createChart('bar', sampleData);
    // Varsayılan butonu aktif yap
    document.querySelector('.chart-btn[data-chart-type="bar"]').classList.add('active');
});

// Grafik türü değiştirme butonları için olay dinleyicileri
chartButtons.forEach(button => {
    button.addEventListener('click', () => {
        // Aktif butonu güncelle
        chartButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        
        // Seçilen grafik türünü al
        const chartType = button.getAttribute('data-chart-type');
        
        // Seçilen türe göre grafiği yeniden oluştur
        createChart(chartType, sampleData);
    });
});

Adım 4: Farklı Grafik Türlerini Ekleme

Şimdi, diğer grafik türleri (çizgi, pasta, radar) için gerekli ayarlamaları yapalım. createChart fonksiyonu zaten farklı türleri destekliyor, ancak bazı türler için veri yapısı veya seçenekler farklı olabilir.

script.js (güncellenmiş)
// ... (önceki kodlar) ...

// Grafik oluşturma fonksiyonu (güncellenmiş)
function createChart(type, data, options = {}) {
    if (myChart) {
        myChart.destroy();
    }
    
    // Grafik türüne özel seçenekler
    let chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: `${type.charAt(0).toUpperCase() + type.slice(1)} Grafik Örneği`
            },
            tooltip: {
                enabled: true
            }
        },
        ...options // Dışarıdan gelen ek seçenekler
    };
    
    // Çubuk ve çizgi grafikler için eksenler
    if (type === 'bar' || type === 'line') {
        chartOptions.scales = {
            y: {
                beginAtZero: true
            }
        };
    }
    
    // Radar grafik için özel ölçek ayarları
    if (type === 'radar') {
        chartOptions.scales = {
            r: {
                angleLines: {
                    display: false
                },
                suggestedMin: 0,
                suggestedMax: Math.max(...data.datasets[0].data) + 5000 // Veriye göre max değer ayarla
            }
        };
    }
    
    // Pasta ve doughnut grafikler için eksenleri kaldır
    if (type === 'pie' || type === 'doughnut') {
        chartOptions.scales = {}; // Eksenleri kaldır
    }
    
    myChart = new Chart(ctx, {
        type: type,
        data: data,
        options: chartOptions
    });
}

// ... (olay dinleyicileri) ...

// Grafik türü değiştirme butonları için olay dinleyicileri (güncellenmiş)
chartButtons.forEach(button => {
    button.addEventListener('click', () => {
        chartButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        
        const chartType = button.getAttribute('data-chart-type');
        
        // Farklı grafik türleri için veri setini uyarlayabiliriz
        // Örneğin, çizgi grafik için dolgu rengini kaldırabiliriz
        let currentData = JSON.parse(JSON.stringify(sampleData)); // Veriyi kopyala
        
        if (chartType === 'line') {
            currentData.datasets[0].backgroundColor = 'rgba(54, 162, 235, 0.2)'; // Alan rengi
            currentData.datasets[0].borderColor = 'rgba(54, 162, 235, 1)'; // Çizgi rengi
            currentData.datasets[0].tension = 0.1; // Çizgi eğimi
        }
        
        createChart(chartType, currentData);
    });
});

// Sayfa yüklendiğinde varsayılan çubuk grafiği oluştur
document.addEventListener('DOMContentLoaded', () => {
    createChart('bar', sampleData);
    document.querySelector('.chart-btn[data-chart-type="bar"]').classList.add('active');
});

Adım 5: Dinamik Veri Yükleme (İsteğe Bağlı)

Grafikleri statik veri yerine dinamik olarak (örneğin bir API'den veya JSON dosyasından) yükleyebilirsiniz:

data.json
{
  "labels": ["Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"],
  "datasets": [
    {
      "label": "Haftalık Ziyaretçi Sayısı",
      "data": [150, 230, 180, 210, 250, 300, 280],
      "backgroundColor": "rgba(75, 192, 192, 0.6)",
      "borderColor": "rgba(75, 192, 192, 1)",
      "borderWidth": 1
    }
  ]
}
script.js (dinamik veri yükleme)
// ... (önceki kodlar) ...

// Veriyi dinamik olarak yükleme fonksiyonu
async function loadChartData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Veri yüklenirken hata oluştu:', error);
        // Hata durumunda varsayılan veriyi kullan
        return sampleData; 
    }
}

// Sayfa yüklendiğinde dinamik veriyi yükle ve grafiği oluştur
document.addEventListener('DOMContentLoaded', async () => {
    const dynamicData = await loadChartData('data.json'); // JSON dosyasının yolu
    createChart('bar', dynamicData);
    document.querySelector('.chart-btn[data-chart-type="bar"]').classList.add('active');
    
    // Buton olay dinleyicilerini de dinamik veriyle çalışacak şekilde güncelle
    chartButtons.forEach(button => {
        button.addEventListener('click', async () => {
            chartButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            
            const chartType = button.getAttribute('data-chart-type');
            const currentData = await loadChartData('data.json'); // Her tıklamada veriyi tekrar yükle (isteğe bağlı)
            
            // Gerekirse veri setini türüne göre ayarla
            if (chartType === 'line') {
                currentData.datasets[0].backgroundColor = 'rgba(54, 162, 235, 0.2)';
                currentData.datasets[0].borderColor = 'rgba(54, 162, 235, 1)';
                currentData.datasets[0].tension = 0.1;
            }
            
            createChart(chartType, currentData);
        });
    });
});

Adım 6: Uygulamayı Test Etme

Şimdi uygulamanızı test etme zamanı! Aşağıdaki adımları izleyin:

  1. Tüm dosyaları (index.html, style.css, script.js, data.json) aynı klasöre kaydedin.
  2. HTML dosyasını bir web tarayıcısında açın.
  3. Varsayılan çubuk grafiğin doğru şekilde göründüğünü kontrol edin.
  4. Farklı grafik türü butonlarına tıklayarak grafiklerin değiştiğini gözlemleyin.
  5. Grafiklerin üzerine gelerek (hover) araç ipuçlarının (tooltips) çalıştığını doğrulayın.
  6. Dinamik veri yükleme adımını uyguladıysanız, data.json dosyasındaki verilerin grafiğe yansıdığını kontrol edin.
  7. Farklı ekran boyutlarında responsive tasarımı test edin.

İpucu: Chart.js'in resmi dokümantasyonunu inceleyerek daha fazla grafik türü, özelleştirme seçeneği ve gelişmiş özellik hakkında bilgi edinebilirsiniz.

Projeyi Geliştirme

Temel veri görselleştirme uygulamasını başarıyla oluşturduktan sonra, aşağıdaki özelliklerle projenizi geliştirebilirsiniz:

1. Grafik Özelleştirme Seçenekleri

Kullanıcıların grafiklerin renklerini, yazı tiplerini, eksen aralıklarını vb. değiştirebileceği kontroller ekleyin.

2. Çoklu Veri Setleri

Aynı grafikte birden fazla veri setini (örneğin, farklı ürünlerin satışları) karşılaştırmalı olarak gösterin.

3. Gerçek Zamanlı Veri Güncelleme

WebSocket veya Server-Sent Events (SSE) kullanarak grafikleri gerçek zamanlı olarak güncelleyin.

4. Grafik Verilerini Dışa Aktarma

Kullanıcıların grafik verilerini CSV veya JSON formatında indirebilmesini sağlayın.

5. Farklı Grafik Kütüphaneleri

D3.js, Plotly.js veya ApexCharts gibi diğer popüler JavaScript grafik kütüphanelerini deneyin.

6. Veri Filtreleme ve Sıralama

Kullanıcıların grafikte gösterilen verileri filtrelemesine veya sıralamasına olanak tanıyın.

Geliştirme Zorlukları

Veri görselleştirme uygulamanızı daha da geliştirmek için aşağıdaki zorlukları deneyebilirsiniz:

  1. Harita Grafikleri: Coğrafi verileri görselleştirmek için harita grafikleri (örneğin, Leaflet.js ile entegrasyon) ekleyin.
  2. Animasyonlu Geçişler: Farklı grafik türleri veya veri setleri arasında yumuşak animasyonlu geçişler sağlayın.
  3. Kullanıcı Etkileşimi ile Veri Detayları: Grafikteki bir veri noktasına tıklandığında daha detaylı bilgilerin gösterildiği bir panel açın.
  4. Büyük Veri Setleri ile Performans: Çok büyük veri setlerini (binlerce veya milyonlarca nokta) performans sorunu yaşamadan görselleştirmek için optimizasyon teknikleri uygulayın (örneğin, veri örnekleme).

Sonuç ve Öğrenilen Dersler

Bu projede, JavaScript ve Chart.js kullanarak verileri etkili bir şekilde görselleştirdik. Bu süreçte şunları öğrendik:

  • Chart.js kütüphanesinin temellerini ve kullanımını
  • Farklı grafik türlerini oluşturmayı ve özelleştirmeyi
  • Verileri grafiklere uygun formatta hazırlamayı
  • Grafiklere başlık, etiket ve açıklama eklemeyi
  • Grafiklere etkileşimli özellikler katmayı
  • Dinamik verilerle grafikleri güncellemeyi
  • Veri görselleştirmenin önemini ve temel prensiplerini

Bu proje, verileri anlaşılır ve görsel olarak çekici hale getirme becerisi kazandırmıştır. Öğrendiğiniz teknikleri kullanarak, çeşitli veri setlerini analiz edebilir, anlamlı içgörüler elde edebilir ve bu içgörüleri etkili bir şekilde sunabilirsiniz.