RSK World - Traffic Flow Dataset - Project Files Browser | RSK World

index.html

<!DOCTYPE html>
<!--
Project: Traffic Flow Dataset
Website: https://rskworld.in
Contact: help@rskworld.in, support@rskworld.in
Phone: +91 93305 39277
Founder: Molla Sameer
Designer & Tester: Rima Khatun
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Traffic Flow Dataset - RSK World</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .content {
            padding: 40px;
        }

        .info-section {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
        }

        .info-section h2 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 1.8em;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .feature-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-left: 4px solid #667eea;
        }

        .feature-card h3 {
            color: #764ba2;
            margin-bottom: 10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .stat-card h3 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .stat-card p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .filter-section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            margin: 30px 0;
        }

        .filter-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
        }

        .filter-group label {
            margin-bottom: 8px;
            font-weight: 600;
            color: #667eea;
        }

        .filter-group select,
        .filter-group input {
            padding: 10px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .filter-group select:focus,
        .filter-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .search-box {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            margin-bottom: 15px;
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            margin: 5px;
            border: none;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .btn-secondary {
            background: #6c757d;
        }

        .btn-small {
            padding: 8px 20px;
            font-size: 0.9em;
        }

        .chart-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .chart-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
        }

        .data-table {
            overflow-x: auto;
            margin: 30px 0;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        th {
            background: #667eea;
            color: white;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            position: relative;
        }

        th:hover {
            background: #5568d3;
        }

        th.sorted-asc::after {
            content: ' ▲';
            font-size: 0.8em;
        }

        th.sorted-desc::after {
            content: ' ▼';
            font-size: 0.8em;
        }

        tr:hover {
            background: #f5f5f5;
        }

        .download-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            text-align: center;
            border-radius: 15px;
            margin: 30px 0;
        }

        .footer {
            background: #2c3e50;
            color: white;
            padding: 30px;
            text-align: center;
        }

        .footer a {
            color: #667eea;
            text-decoration: none;
        }

        .tech-badge {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            margin: 5px;
            font-size: 0.9em;
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.85em;
            font-weight: 600;
        }

        .badge-low {
            background: #4CAF50;
            color: white;
        }

        .badge-medium {
            background: #FF9800;
            color: white;
        }

        .badge-high {
            background: #F44336;
            color: white;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #667eea;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-traffic-light"></i> Traffic Flow Dataset</h1>
            <p>Urban traffic flow data for traffic prediction and smart city applications</p>
        </div>

        <div class="content">
            <!-- Statistics Dashboard -->
            <div class="stats-grid" id="statsGrid">
                <div class="stat-card">
                    <h3 id="totalRecords">0</h3>
                    <p><i class="fas fa-database"></i> Total Records</p>
                </div>
                <div class="stat-card">
                    <h3 id="avgVehicles">0</h3>
                    <p><i class="fas fa-car"></i> Avg Vehicles</p>
                </div>
                <div class="stat-card">
                    <h3 id="avgSpeed">0</h3>
                    <p><i class="fas fa-tachometer-alt"></i> Avg Speed (km/h)</p>
                </div>
                <div class="stat-card">
                    <h3 id="totalLocations">0</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Locations</p>
                </div>
            </div>

            <!-- Filter Section -->
            <div class="filter-section">
                <h2 style="color: #667eea; margin-bottom: 20px;"><i class="fas fa-filter"></i> Advanced Filters</h2>
                <input type="text" id="searchInput" class="search-box" placeholder="🔍 Search by location, congestion level, or road type...">
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Location</label>
                        <select id="locationFilter">
                            <option value="">All Locations</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Congestion Level</label>
                        <select id="congestionFilter">
                            <option value="">All Levels</option>
                            <option value="Low">Low</option>
                            <option value="Medium">Medium</option>
                            <option value="High">High</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Road Type</label>
                        <select id="roadTypeFilter">
                            <option value="">All Types</option>
                            <option value="Urban">Urban</option>
                            <option value="Highway">Highway</option>
                            <option value="Suburban">Suburban</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Date Range</label>
                        <input type="date" id="dateFilter">
                    </div>
                </div>
                <button class="btn btn-secondary btn-small" onclick="resetFilters()"><i class="fas fa-redo"></i> Reset Filters</button>
                <button class="btn btn-small" onclick="exportFilteredData()"><i class="fas fa-download"></i> Export Filtered Data</button>
            </div>

            <!-- Charts Grid -->
            <div class="chart-grid">
                <div class="chart-container">
                    <h2 style="color: #667eea; margin-bottom: 20px;">Traffic Flow Over Time</h2>
                    <canvas id="trafficChart"></canvas>
                </div>
                <div class="chart-container">
                    <h2 style="color: #667eea; margin-bottom: 20px;">Speed Analysis</h2>
                    <canvas id="speedChart"></canvas>
                </div>
                <div class="chart-container">
                    <h2 style="color: #667eea; margin-bottom: 20px;">Vehicle Count by Location</h2>
                    <canvas id="locationChart"></canvas>
                </div>
                <div class="chart-container">
                    <h2 style="color: #667eea; margin-bottom: 20px;">Congestion Distribution</h2>
                    <canvas id="congestionChart"></canvas>
                </div>
            </div>

            <!-- Data Table -->
            <div class="data-table">
                <h2 style="color: #667eea; margin: 20px; padding-top: 20px;">Data Table <span id="recordCount"></span></h2>
                <table id="dataTable">
                    <thead>
                        <tr>
                            <th onclick="sortTable(0)">Timestamp <i class="fas fa-sort"></i></th>
                            <th onclick="sortTable(1)">Location <i class="fas fa-sort"></i></th>
                            <th onclick="sortTable(2)">Vehicle Count <i class="fas fa-sort"></i></th>
                            <th onclick="sortTable(3)">Avg Speed (km/h) <i class="fas fa-sort"></i></th>
                            <th onclick="sortTable(4)">Congestion Level <i class="fas fa-sort"></i></th>
                            <th onclick="sortTable(5)">Road Type <i class="fas fa-sort"></i></th>
                            <th onclick="sortTable(6)">Direction <i class="fas fa-sort"></i></th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr><td colspan="7" class="loading">Loading data...</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- Info Section -->
            <div class="info-section">
                <h2>About This Dataset</h2>
                <p>This dataset includes traffic flow measurements with vehicle counts, average speeds, congestion levels, and temporal patterns. Perfect for traffic prediction, congestion forecasting, and intelligent transportation systems.</p>
                
                <div class="features">
                    <div class="feature-card">
                        <h3>🚗 Vehicle Counts</h3>
                        <p>Detailed vehicle count data across multiple time periods</p>
                    </div>
                    <div class="feature-card">
                        <h3>⚡ Speed Measurements</h3>
                        <p>Average speed data for traffic flow analysis</p>
                    </div>
                    <div class="feature-card">
                        <h3>🚦 Congestion Patterns</h3>
                        <p>Traffic congestion level indicators and patterns</p>
                    </div>
                    <div class="feature-card">
                        <h3>📍 Multiple Locations</h3>
                        <p>Data collected from various traffic monitoring points</p>
                    </div>
                    <div class="feature-card">
                        <h3>📊 Time Series Format</h3>
                        <p>Structured time series data for analysis</p>
                    </div>
                    <div class="feature-card">
                        <h3>🔍 Advanced Filtering</h3>
                        <p>Filter by location, congestion, date, and more</p>
                    </div>
                </div>
            </div>

            <div class="info-section">
                <h2>Technologies</h2>
                <div>
                    <span class="tech-badge">CSV</span>
                    <span class="tech-badge">JSON</span>
                    <span class="tech-badge">Pandas</span>
                    <span class="tech-badge">Time Series</span>
                    <span class="tech-badge">Python</span>
                    <span class="tech-badge">Data Visualization</span>
                    <span class="tech-badge">Chart.js</span>
                    <span class="tech-badge">JavaScript</span>
                </div>
                <p style="margin-top: 20px;"><strong>Difficulty Level:</strong> Intermediate</p>
                <p><strong>Category:</strong> Time Series Data</p>
            </div>

            <div class="download-section">
                <h2>Download Dataset</h2>
                <p>Get the complete traffic flow dataset in CSV and JSON formats</p>
                <a href="traffic-flow.zip" class="btn">Download Dataset (ZIP)</a>
                <a href="traffic_flow_data.csv" class="btn">Download CSV</a>
                <a href="traffic_flow_data.json" class="btn">Download JSON</a>
            </div>
        </div>

        <div class="footer">
            <p>&copy; 2026 RSK World - Free Programming Resources & Source Code</p>
            <p>Founded by Molla Sameer | Designer & Tester: Rima Khatun</p>
            <p>
                <a href="https://rskworld.in">Website</a> | 
                <a href="mailto:help@rskworld.in">Email</a> | 
                <a href="tel:+919330539277">Phone: +91 93305 39277</a>
            </p>
        </div>
    </div>

    <script>
        let allData = [];
        let filteredData = [];
        let sortColumn = -1;
        let sortDirection = 1;
        let charts = {};

        // Load data from JSON file
        async function loadData() {
            try {
                const response = await fetch('traffic_flow_data.json');
                allData = await response.json();
                filteredData = [...allData];
                populateFilters();
                updateStatistics();
                renderTable();
                renderCharts();
            } catch (error) {
                console.error('Error loading data:', error);
                document.getElementById('tableBody').innerHTML = '<tr><td colspan="7" class="no-data">Error loading data. Please ensure traffic_flow_data.json is available.</td></tr>';
            }
        }

        function populateFilters() {
            const locations = [...new Set(allData.map(d => d.location))];
            const locationFilter = document.getElementById('locationFilter');
            locations.forEach(loc => {
                const option = document.createElement('option');
                option.value = loc;
                option.textContent = loc;
                locationFilter.appendChild(option);
            });
        }

        function updateStatistics() {
            const stats = {
                total: filteredData.length,
                avgVehicles: filteredData.length > 0 ? (filteredData.reduce((sum, d) => sum + d.vehicle_count, 0) / filteredData.length).toFixed(1) : 0,
                avgSpeed: filteredData.length > 0 ? (filteredData.reduce((sum, d) => sum + d.avg_speed_kmh, 0) / filteredData.length).toFixed(1) : 0,
                locations: new Set(filteredData.map(d => d.location)).size
            };

            document.getElementById('totalRecords').textContent = stats.total;
            document.getElementById('avgVehicles').textContent = stats.avgVehicles;
            document.getElementById('avgSpeed').textContent = stats.avgSpeed;
            document.getElementById('totalLocations').textContent = stats.locations;
            document.getElementById('recordCount').textContent = `(${stats.total} records)`;
        }

        function applyFilters() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const location = document.getElementById('locationFilter').value;
            const congestion = document.getElementById('congestionFilter').value;
            const roadType = document.getElementById('roadTypeFilter').value;
            const dateFilter = document.getElementById('dateFilter').value;

            filteredData = allData.filter(item => {
                const matchesSearch = !searchTerm || 
                    item.location.toLowerCase().includes(searchTerm) ||
                    item.congestion_level.toLowerCase().includes(searchTerm) ||
                    item.road_type.toLowerCase().includes(searchTerm);
                
                const matchesLocation = !location || item.location === location;
                const matchesCongestion = !congestion || item.congestion_level === congestion;
                const matchesRoadType = !roadType || item.road_type === roadType;
                const matchesDate = !dateFilter || item.timestamp.startsWith(dateFilter);

                return matchesSearch && matchesLocation && matchesCongestion && matchesRoadType && matchesDate;
            });

            updateStatistics();
            renderTable();
            renderCharts();
        }

        function resetFilters() {
            document.getElementById('searchInput').value = '';
            document.getElementById('locationFilter').value = '';
            document.getElementById('congestionFilter').value = '';
            document.getElementById('roadTypeFilter').value = '';
            document.getElementById('dateFilter').value = '';
            filteredData = [...allData];
            updateStatistics();
            renderTable();
            renderCharts();
        }

        function sortTable(columnIndex) {
            if (sortColumn === columnIndex) {
                sortDirection *= -1;
            } else {
                sortColumn = columnIndex;
                sortDirection = 1;
            }

            filteredData.sort((a, b) => {
                let aVal, bVal;
                switch(columnIndex) {
                    case 0: aVal = a.timestamp; bVal = b.timestamp; break;
                    case 1: aVal = a.location; bVal = b.location; break;
                    case 2: aVal = a.vehicle_count; bVal = b.vehicle_count; break;
                    case 3: aVal = a.avg_speed_kmh; bVal = b.avg_speed_kmh; break;
                    case 4: aVal = a.congestion_level; bVal = b.congestion_level; break;
                    case 5: aVal = a.road_type; bVal = b.road_type; break;
                    case 6: aVal = a.direction; bVal = b.direction; break;
                    default: return 0;
                }

                if (typeof aVal === 'string') {
                    return aVal.localeCompare(bVal) * sortDirection;
                }
                return (aVal - bVal) * sortDirection;
            });

            // Update header indicators
            document.querySelectorAll('th').forEach((th, idx) => {
                th.classList.remove('sorted-asc', 'sorted-desc');
                if (idx === columnIndex) {
                    th.classList.add(sortDirection === 1 ? 'sorted-asc' : 'sorted-desc');
                }
            });

            renderTable();
        }

        function renderTable() {
            const tbody = document.getElementById('tableBody');
            if (filteredData.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" class="no-data">No data matches the current filters</td></tr>';
                return;
            }

            tbody.innerHTML = filteredData.slice(0, 100).map(item => {
                const badgeClass = item.congestion_level === 'Low' ? 'badge-low' : 
                                  item.congestion_level === 'Medium' ? 'badge-medium' : 'badge-high';
                return `
                    <tr>
                        <td>${item.timestamp}</td>
                        <td>${item.location}</td>
                        <td>${item.vehicle_count}</td>
                        <td>${item.avg_speed_kmh}</td>
                        <td><span class="badge ${badgeClass}">${item.congestion_level}</span></td>
                        <td>${item.road_type}</td>
                        <td>${item.direction}</td>
                    </tr>
                `;
            }).join('');

            if (filteredData.length > 100) {
                tbody.innerHTML += `<tr><td colspan="7" style="text-align: center; padding: 20px; color: #667eea;">Showing first 100 of ${filteredData.length} records. Use filters to narrow down results.</td></tr>`;
            }
        }

        function renderCharts() {
            if (filteredData.length === 0) return;

            // Prepare data
            const sortedData = [...filteredData].sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
            const timeLabels = sortedData.map(d => new Date(d.timestamp).toLocaleString());
            const vehicleCounts = sortedData.map(d => d.vehicle_count);
            const speeds = sortedData.map(d => d.avg_speed_kmh);

            // Location data
            const locationStats = {};
            filteredData.forEach(d => {
                if (!locationStats[d.location]) {
                    locationStats[d.location] = { total: 0, count: 0 };
                }
                locationStats[d.location].total += d.vehicle_count;
                locationStats[d.location].count++;
            });
            const locationLabels = Object.keys(locationStats);
            const locationAvgs = locationLabels.map(loc => locationStats[loc].total / locationStats[loc].count);

            // Congestion data
            const congestionCounts = {};
            filteredData.forEach(d => {
                congestionCounts[d.congestion_level] = (congestionCounts[d.congestion_level] || 0) + 1;
            });

            // Destroy existing charts
            Object.values(charts).forEach(chart => {
                if (chart) chart.destroy();
            });

            // Traffic Flow Chart
            const ctx1 = document.getElementById('trafficChart').getContext('2d');
            charts.traffic = new Chart(ctx1, {
                type: 'line',
                data: {
                    labels: timeLabels.length > 50 ? timeLabels.filter((_, i) => i % Math.ceil(timeLabels.length / 50) === 0) : timeLabels,
                    datasets: [{
                        label: 'Vehicle Count',
                        data: vehicleCounts.length > 50 ? vehicleCounts.filter((_, i) => i % Math.ceil(vehicleCounts.length / 50) === 0) : vehicleCounts,
                        borderColor: 'rgb(102, 126, 234)',
                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: { display: true, text: 'Vehicle Count Over Time' },
                        legend: { display: false }
                    },
                    scales: {
                        y: { beginAtZero: true },
                        x: { ticks: { maxRotation: 45, minRotation: 45 } }
                    }
                }
            });

            // Speed Chart
            const ctx2 = document.getElementById('speedChart').getContext('2d');
            charts.speed = new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: timeLabels.length > 50 ? timeLabels.filter((_, i) => i % Math.ceil(timeLabels.length / 50) === 0) : timeLabels,
                    datasets: [{
                        label: 'Average Speed (km/h)',
                        data: speeds.length > 50 ? speeds.filter((_, i) => i % Math.ceil(speeds.length / 50) === 0) : speeds,
                        backgroundColor: 'rgba(118, 75, 162, 0.8)',
                        borderColor: 'rgb(118, 75, 162)',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: { display: true, text: 'Average Speed by Time' },
                        legend: { display: false }
                    },
                    scales: {
                        y: { beginAtZero: true },
                        x: { ticks: { maxRotation: 45, minRotation: 45 } }
                    }
                }
            });

            // Location Chart
            const ctx3 = document.getElementById('locationChart').getContext('2d');
            charts.location = new Chart(ctx3, {
                type: 'bar',
                data: {
                    labels: locationLabels,
                    datasets: [{
                        label: 'Average Vehicle Count',
                        data: locationAvgs,
                        backgroundColor: 'rgba(102, 126, 234, 0.8)',
                        borderColor: 'rgb(102, 126, 234)',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: { display: true, text: 'Average Vehicle Count by Location' },
                        legend: { display: false }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // Congestion Chart
            const ctx4 = document.getElementById('congestionChart').getContext('2d');
            const congestionColors = {
                'Low': '#4CAF50',
                'Medium': '#FF9800',
                'High': '#F44336'
            };
            charts.congestion = new Chart(ctx4, {
                type: 'pie',
                data: {
                    labels: Object.keys(congestionCounts),
                    datasets: [{
                        data: Object.values(congestionCounts),
                        backgroundColor: Object.keys(congestionCounts).map(level => congestionColors[level] || '#9E9E9E'),
                        borderWidth: 2,
                        borderColor: '#fff'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: { display: true, text: 'Congestion Level Distribution' },
                        legend: { position: 'bottom' }
                    }
                }
            });
        }

        function exportFilteredData() {
            const csv = [
                ['timestamp', 'location', 'vehicle_count', 'avg_speed_kmh', 'congestion_level', 'road_type', 'direction'],
                ...filteredData.map(item => [
                    item.timestamp,
                    item.location,
                    item.vehicle_count,
                    item.avg_speed_kmh,
                    item.congestion_level,
                    item.road_type,
                    item.direction
                ])
            ].map(row => row.join(',')).join('\n');

            const blob = new Blob([csv], { type: 'text/csv' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `traffic_flow_filtered_${new Date().toISOString().split('T')[0]}.csv`;
            a.click();
            window.URL.revokeObjectURL(url);
        }

        // Event listeners
        document.getElementById('searchInput').addEventListener('input', applyFilters);
        document.getElementById('locationFilter').addEventListener('change', applyFilters);
        document.getElementById('congestionFilter').addEventListener('change', applyFilters);
        document.getElementById('roadTypeFilter').addEventListener('change', applyFilters);
        document.getElementById('dateFilter').addEventListener('change', applyFilters);

        // Load data on page load
        loadData();
    </script>
</body>
</html>

830 lines•31.3 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size