No numeric data available for statistics.

`; return; } let tableHTML = ``; const stats = ['Statistic', ...numericHeaders]; stats.forEach(header => { tableHTML += ``; }); tableHTML += ``; const rows = ['Count', 'Mean', 'Median', 'Min', 'Max', 'Std. Dev.']; rows.forEach(statName => { tableHTML += ``; numericHeaders.forEach(header => { const columnData = currentData.map(d => d[header]).filter(v => typeof v === 'number'); let statValue = 'N/A'; if (columnData.length > 0) { switch(statName) { case 'Count': statValue = columnData.length; break; case 'Mean': const sum = columnData.reduce((a, b) => a + b, 0); statValue = (sum / columnData.length).toFixed(2); break; case 'Median': const sorted = [...columnData].sort((a,b) => a - b); const mid = Math.floor(sorted.length / 2); statValue = sorted.length % 2 !== 0 ? sorted[mid] : ((sorted[mid - 1] + sorted[mid]) / 2).toFixed(2); break; case 'Min': statValue = Math.min(...columnData).toFixed(2); break; case 'Max': statValue = Math.max(...columnData).toFixed(2); break; case 'Std. Dev.': const mean = columnData.reduce((a, b) => a + b, 0) / columnData.length; const variance = columnData.map(x => Math.pow(x - mean, 2)).reduce((a,b) => a + b, 0) / columnData.length; statValue = Math.sqrt(variance).toFixed(2); break; } } tableHTML += ``; }); tableHTML += ``; }); tableHTML += `

${header}
${statName}	${statValue}

`; summaryStatsEl.innerHTML = tableHTML; } /** * Main function to trigger data processing and visualization updates. */ window.updateDataAndVisualize = function() { const parsed = parseCSV(dataInputEl.value); if (parsed.data.length === 0) { alert('No data to analyze. Please enter data in the specified CSV format.'); return; } currentData = parsed.data; headers = parsed.headers; populateSelectors(); updateHistogram(); updateScatterPlot(); updateSummaryStatistics(); // Switch to dashboard tab to show results changeTab('dashboard'); } /** * Handles switching between tabs. * @param {string} tabName - The name of the tab to switch to ('dashboard' or 'dataConfig'). */ window.changeTab = function(tabName) { activeTab = tabName; Object.keys(tabButtons).forEach(key => { const isCurrent = key === tabName; tabButtons[key].classList.toggle('active', isCurrent); tabContents[key].style.display = isCurrent ? 'block' : 'none'; }); updateNavButtons(); } /** * Updates the visibility and state of Previous/Next buttons. */ function updateNavButtons() { navButtons.prev.style.visibility = (activeTab === 'dashboard') ? 'hidden' : 'visible'; navButtons.next.style.visibility = (activeTab === 'dataConfig') ? 'hidden' : 'visible'; } /** * Handles navigation using the Previous/Next buttons. * @param {string} direction - 'prev' or 'next'. */ window.navigateTabs = function(direction) { if (direction === 'next' && activeTab === 'dashboard') { changeTab('dataConfig'); } else if (direction === 'prev' && activeTab === 'dataConfig') { changeTab('dashboard'); } } /** * Generates and downloads a PDF of the dashboard content. */ window.downloadPDF = function() { const { jsPDF } = window.jspdf; const dashboardContent = document.getElementById('dashboard-content'); const downloadBtn = document.getElementById('download-pdf-btn'); if (!dashboardContent) { console.error('Dashboard content element not found!'); return; } // Temporarily hide the button to not include it in the PDF downloadBtn.style.visibility = 'hidden'; html2canvas(dashboardContent, { scale: 2, // Increase scale for better resolution useCORS: true, backgroundColor: '#ffffff' }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [canvas.width, canvas.height] }); pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height); pdf.save('data_visualization_dashboard.pdf'); // Show the button again downloadBtn.style.visibility = 'visible'; }).catch(err => { console.error("PDF generation failed:", err); // Ensure button is visible even if there's an error downloadBtn.style.visibility = 'visible'; }); } // --- EVENT LISTENERS --- histogramVarEl.addEventListener('change', updateHistogram); scatterXEl.addEventListener('change', updateScatterPlot); scatterYEl.addEventListener('change', updateScatterPlot); // --- INITIALIZATION --- function initializeTool() { dataInputEl.value = sampleData; updateDataAndVisualize(); changeTab('dashboard'); // Start on the dashboard tab } initializeTool(); });