Hugging Face's logo

Spaces:
anzuo
/
deepsite
Running

App Files Community
deepsite / index.html
anzuo's picture
anzuo
Add 3 files
79eb658 verified
raw
history blame contribute delete
52.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Large CSV Analyzer</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropzone {
border: 2px dashed #ccc;
transition: all 0.3s ease;
}
.dropzone.active {
border-color: #4f46e5;
background-color: #f0f7ff;
}
.progress-bar {
transition: width 0.3s ease;
}
.column-selector:hover {
background-color: #f3f4f6;
}
.column-type-selector {
max-width: 80px;
background-color: white;
}
.column-type-selector:focus {
outline: none;
border-color: #4f46e5;
}
.column-selected {
background-color: #e0e7ff;
border-left: 3px solid #4f46e5;
}
.data-table-container {
max-height: 500px;
overflow-y: auto;
}
.chart-container {
height: 400px;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c7d2fe;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a5b4fc;
}
/* Table styling */
.table-wrapper {
overflow-x: auto;
width: 100%;
}
.data-table {
min-width: 100%;
width: auto;
}
.data-table th, .data-table td {
white-space: nowrap;
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.data-table th {
position: sticky;
top: 0;
background-color: #f9fafb;
z-index: 10;
}
.data-table tr:hover {
background-color: #f3f4f6;
}
.row-number {
color: #6b7280;
font-weight: 500;
}
.pagination-btn {
min-width: 2.5rem;
}
.pagination-btn.active {
background-color: #4f46e5;
color: white;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-indigo-700 mb-2">Large CSV Analyzer</h1>
<p class="text-gray-600">Upload CSV files up to 5GB, preview data, and generate insightful visualizations</p>
</div>
<!-- File Upload Section -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<div id="upload-container" class="mb-6">
<div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i>
<h3 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop your CSV file here</h3>
<p class="text-gray-500 mb-4">or</p>
<label for="file-input" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-md cursor-pointer transition duration-200">
Browse Files
</label>
<input id="file-input" type="file" accept=".csv" class="hidden">
</div>
</div>
<div class="mt-4 text-sm text-gray-500">
<p>Supported file types: .csv (max 5GB)</p>
</div>
</div>
<!-- Upload Progress -->
<div id="upload-progress" class="hidden">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-indigo-700" id="filename-display"></span>
<span class="text-sm font-medium text-indigo-700" id="progress-percentage">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<div class="flex justify-between mt-2 text-sm text-gray-500">
<span id="uploaded-size">0 MB</span>
<span id="total-size">0 MB</span>
</div>
<div class="mt-4 flex justify-center">
<button id="cancel-upload" class="text-red-600 hover:text-red-800 font-medium flex items-center">
<i class="fas fa-times-circle mr-2"></i> Cancel Upload
</button>
</div>
</div>
</div>
<!-- Data Preview Section -->
<div id="data-preview" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-800">Data Preview</h2>
<div class="flex gap-2">
<button id="reset-analysis" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
<i class="fas fa-redo-alt mr-2"></i> Reset Analysis
</button>
<button id="load-full-data" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md">
<i class="fas fa-database mr-2"></i> Load Full Dataset
</button>
</div>
</div>
<div class="flex flex-col md:flex-row gap-6">
<!-- Column Selector -->
<div class="w-full md:w-1/4">
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
<h3 class="font-medium text-gray-700 mb-3">Select Columns</h3>
<div class="space-y-2 max-h-96 overflow-y-auto" id="column-list">
<!-- Columns will be added here dynamically -->
</div>
<div class="mt-4">
<button id="analyze-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<i class="fas fa-chart-bar mr-2"></i> Analyze Selected Columns
</button>
</div>
</div>
</div>
<!-- Data Table -->
<div class="w-full md:w-3/4">
<div class="table-wrapper">
<div class="data-table-container border border-gray-200 rounded-lg">
<table class="data-table">
<thead>
<tr id="table-header">
<th class="row-number">#</th>
<!-- Headers will be added here dynamically -->
</tr>
</thead>
<tbody id="table-body">
<!-- Data rows will be added here dynamically -->
</tbody>
</table>
</div>
</div>
<!-- Pagination Controls -->
<div class="flex flex-col sm:flex-row items-center justify-between mt-4">
<div class="text-sm text-gray-500 mb-2 sm:mb-0">
<span id="row-count-display">Showing rows 1-20 of 20</span>
</div>
<div class="flex items-center space-x-1" id="pagination-controls">
<button class="pagination-btn bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="first-page" disabled>
<i class="fas fa-angle-double-left"></i>
</button>
<button class="pagination-btn bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="prev-page" disabled>
<i class="fas fa-angle-left"></i>
</button>
<div class="flex space-x-1" id="page-numbers">
<!-- Page numbers will be added here dynamically -->
</div>
<button class="pagination-btn bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="next-page" disabled>
<i class="fas fa-angle-right"></i>
</button>
<button class="pagination-btn bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="last-page" disabled>
<i class="fas fa-angle-double-right"></i>
</button>
</div>
<div class="flex items-center mt-2 sm:mt-0">
<span class="text-sm text-gray-500 mr-2">Rows per page:</span>
<select id="rows-per-page" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Analysis Results Section -->
<div id="analysis-results" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Analysis Results</h2>
<!-- Statistics Summary -->
<div class="mb-8">
<h3 class="font-medium text-gray-700 mb-3">Summary Statistics</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" id="stats-summary">
<!-- Statistics cards will be added here dynamically -->
</div>
</div>
<!-- Visualization -->
<div class="mb-6">
<h3 class="font-medium text-gray-700 mb-3">Visualization</h3>
<div class="flex flex-wrap gap-4 mb-4">
<select id="chart-type" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option value="bar">Bar Chart</option>
<option value="line">Line Chart</option>
<option value="pie">Pie Chart</option>
<option value="scatter">Scatter Plot</option>
<option value="histogram">Histogram</option>
</select>
<button id="update-chart" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md">
Update Chart
</button>
<button id="export-chart" class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 font-medium py-2 px-4 rounded-md">
<i class="fas fa-download mr-2"></i> Export Image
</button>
</div>
<div class="chart-container bg-gray-50 rounded-lg p-4 border border-gray-200">
<canvas id="analysis-chart"></canvas>
</div>
</div>
</div>
</div>
<script>
// Global variables
let csvData = [];
let fullCsvData = [];
let headers = [];
let selectedColumns = [];
let columnTypes = {}; // Track column data types
let chart = null;
let fileReader = null;
let uploadAbortController = null;
const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunks for large files
let isFullDataLoaded = false;
// Pagination variables
let currentPage = 1;
let rowsPerPage = 20;
let totalPages = 1;
let visiblePages = 5; // Number of visible page buttons
// DOM elements
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('file-input');
const uploadContainer = document.getElementById('upload-container');
const uploadProgress = document.getElementById('upload-progress');
const progressBar = document.getElementById('progress-bar');
const progressPercentage = document.getElementById('progress-percentage');
const uploadedSize = document.getElementById('uploaded-size');
const totalSize = document.getElementById('total-size');
const filenameDisplay = document.getElementById('filename-display');
const cancelUpload = document.getElementById('cancel-upload');
const dataPreview = document.getElementById('data-preview');
const columnList = document.getElementById('column-list');
const tableHeader = document.getElementById('table-header');
const tableBody = document.getElementById('table-body');
const analyzeBtn = document.getElementById('analyze-btn');
const analysisResults = document.getElementById('analysis-results');
const statsSummary = document.getElementById('stats-summary');
const chartCanvas = document.getElementById('analysis-chart');
const chartTypeSelect = document.getElementById('chart-type');
const updateChartBtn = document.getElementById('update-chart');
const exportChartBtn = document.getElementById('export-chart');
const resetAnalysisBtn = document.getElementById('reset-analysis');
const loadFullDataBtn = document.getElementById('load-full-data');
const rowCountDisplay = document.getElementById('row-count-display');
const firstPageBtn = document.getElementById('first-page');
const prevPageBtn = document.getElementById('prev-page');
const nextPageBtn = document.getElementById('next-page');
const lastPageBtn = document.getElementById('last-page');
const pageNumbersContainer = document.getElementById('page-numbers');
const rowsPerPageSelect = document.getElementById('rows-per-page');
// Event listeners
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('active');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('active');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('active');
if (e.dataTransfer.files.length) {
fileInput.files = e.dataTransfer.files;
handleFileUpload(e.dataTransfer.files[0]);
}
});
fileInput.addEventListener('change', () => {
if (fileInput.files.length) {
handleFileUpload(fileInput.files[0]);
}
});
cancelUpload.addEventListener('click', () => {
if (uploadAbortController) {
uploadAbortController.abort();
}
resetUploadUI();
});
analyzeBtn.addEventListener('click', analyzeSelectedColumns);
updateChartBtn.addEventListener('click', updateChart);
exportChartBtn.addEventListener('click', exportChart);
resetAnalysisBtn.addEventListener('click', resetAnalysis);
loadFullDataBtn.addEventListener('click', loadFullDataset);
// Pagination event listeners
firstPageBtn.addEventListener('click', () => goToPage(1));
prevPageBtn.addEventListener('click', () => goToPage(currentPage - 1));
nextPageBtn.addEventListener('click', () => goToPage(currentPage + 1));
lastPageBtn.addEventListener('click', () => goToPage(totalPages));
rowsPerPageSelect.addEventListener('change', (e) => {
rowsPerPage = parseInt(e.target.value);
currentPage = 1;
updatePagination();
renderTablePage();
});
// Functions
function handleFileUpload(file) {
if (!file.name.endsWith('.csv')) {
showError('Please upload a CSV file');
return;
}
// Reset state
isFullDataLoaded = false;
csvData = [];
fullCsvData = [];
headers = [];
selectedColumns = [];
currentPage = 1;
rowsPerPage = 20;
// Show upload progress UI
uploadContainer.classList.add('hidden');
uploadProgress.classList.remove('hidden');
filenameDisplay.textContent = file.name;
totalSize.textContent = formatFileSize(file.size);
// For files larger than 50MB, use chunked reading
if (file.size > 50 * 1024 * 1024) {
uploadLargeFile(file);
} else {
uploadSmallFile(file);
}
}
function uploadSmallFile(file) {
uploadAbortController = new AbortController();
// Simulate upload progress for demo purposes
let uploaded = 0;
const total = file.size;
const interval = setInterval(() => {
uploaded += Math.min(CHUNK_SIZE / 10, total - uploaded);
updateProgress(uploaded, total);
if (uploaded >= total) {
clearInterval(interval);
parseCSVFile(file, true);
}
}, 100);
}
function uploadLargeFile(file) {
uploadAbortController = new AbortController();
// In a real application, you would send chunks to the server
// This is a simulation for the UI
let uploaded = 0;
const total = file.size;
const chunks = Math.ceil(total / CHUNK_SIZE);
const uploadNextChunk = (chunkIndex) => {
if (uploadAbortController.signal.aborted) return;
const start = chunkIndex * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, total);
const chunk = file.slice(start, end);
// Simulate chunk upload delay
setTimeout(() => {
uploaded = end;
updateProgress(uploaded, total);
if (chunkIndex < chunks - 1) {
uploadNextChunk(chunkIndex + 1);
} else {
parseCSVFile(file, true);
}
}, 300);
};
uploadNextChunk(0);
}
function convertValue(value, type) {
if (!value) return value;
switch(type) {
case 'number':
return parseFloat(value) || 0;
case 'date':
return new Date(value);
case 'boolean':
return value.toLowerCase() === 'true' || value === '1';
default:
return value.toString();
}
}
function parseCSVFile(file, isPreview = false) {
fileReader = new FileReader();
fileReader.onload = (e) => {
try {
const results = Papa.parse(e.target.result, {
header: true,
skipEmptyLines: true,
preview: isPreview ? 20 : null // Only parse first 20 rows for preview
});
if (results.errors.length > 0) {
showError('Error parsing CSV: ' + results.errors[0].message);
resetUploadUI();
return;
}
// Initialize column types as string by default
headers.forEach(header => {
columnTypes[header] = 'string';
});
if (isPreview) {
csvData = results.data;
fullCsvData = []; // Will be loaded later if needed
} else {
fullCsvData = results.data;
csvData = fullCsvData.slice(0, 20); // Update preview with full data
isFullDataLoaded = true;
loadFullDataBtn.classList.add('hidden');
}
// Add event listeners for type selectors after DOM is updated
setTimeout(() => {
document.querySelectorAll('.column-type-selector').forEach(select => {
select.addEventListener('change', (e) => {
const column = e.target.dataset.column;
columnTypes[column] = e.target.value;
renderTablePage();
});
});
}, 0);
headers = results.meta.fields;
if (csvData.length === 0) {
showError('CSV file is empty or could not be parsed');
resetUploadUI();
return;
}
displayDataPreview();
} catch (error) {
showError('Error parsing CSV: ' + error.message);
resetUploadUI();
}
};
fileReader.onerror = () => {
showError('Error reading file');
resetUploadUI();
};
fileReader.readAsText(file);
}
function loadFullDataset() {
if (fileInput.files.length === 0) return;
// Show loading state
loadFullDataBtn.disabled = true;
loadFullDataBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Loading...';
// Re-parse the file but this time without the preview limit
parseCSVFile(fileInput.files[0], false);
}
function displayDataPreview() {
// Show data preview section
uploadContainer.classList.remove('hidden');
uploadProgress.classList.add('hidden');
dataPreview.classList.remove('hidden');
// Calculate total pages
const totalRows = isFullDataLoaded ? fullCsvData.length : csvData.length;
totalPages = Math.ceil(totalRows / rowsPerPage);
// Update row count display
updateRowCountDisplay();
// Show/hide load full data button
if (isFullDataLoaded) {
loadFullDataBtn.classList.add('hidden');
} else {
loadFullDataBtn.classList.remove('hidden');
loadFullDataBtn.disabled = false;
loadFullDataBtn.innerHTML = '<i class="fas fa-database mr-2"></i> Load Full Dataset';
}
// Populate column list
columnList.innerHTML = '';
headers.forEach(header => {
const columnItem = document.createElement('div');
columnItem.className = 'column-selector p-2 rounded-md cursor-pointer flex items-center';
columnItem.innerHTML = `
<input type="checkbox" id="col-${header}" class="hidden column-checkbox">
<label for="col-${header}" class="flex items-center w-full cursor-pointer">
<span class="w-5 h-5 inline-block border border-gray-300 rounded mr-2 flex-shrink-0"></span>
<span class="truncate flex-grow">${header}</span>
<select class="column-type-selector text-xs border rounded px-1 py-0.5 ml-2" data-column="${header}">
<option value="string">Text</option>
<option value="number">Number</option>
<option value="date">Date</option>
<option value="boolean">Boolean</option>
</select>
</label>
`;
// Add click event to the checkbox label
const checkboxLabel = columnItem.querySelector('label');
checkboxLabel.addEventListener('click', (e) => {
e.stopPropagation(); // Prevent event bubbling
toggleColumnSelection(header, columnItem);
});
columnList.appendChild(columnItem);
});
// Populate table headers
tableHeader.innerHTML = '<th class="row-number">#</th>'; // Reset with row number column
headers.forEach(header => {
const th = document.createElement('th');
th.className = 'px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
th.textContent = header;
th.dataset.column = header;
tableHeader.appendChild(th);
});
// Set up pagination
updatePagination();
// Render the first page of data
renderTablePage();
}
function renderTablePage() {
// Clear existing table rows
tableBody.innerHTML = '';
// Get the data to display (either full data or preview)
const dataToShow = isFullDataLoaded ? fullCsvData : csvData;
const totalRows = dataToShow.length;
// Calculate start and end index for current page
const startIndex = (currentPage - 1) * rowsPerPage;
const endIndex = Math.min(startIndex + rowsPerPage, totalRows);
// Create rows for the current page
for (let i = startIndex; i < endIndex; i++) {
const row = dataToShow[i];
const tr = document.createElement('tr');
tr.className = i % 2 === 0 ? 'bg-white' : 'bg-gray-50';
// Add row number cell
const rowNumberCell = document.createElement('td');
rowNumberCell.className = 'row-number px-4 py-2 whitespace-nowrap text-sm';
rowNumberCell.textContent = i + 1;
tr.appendChild(rowNumberCell);
// Add data cells
headers.forEach(header => {
const td = document.createElement('td');
td.className = 'px-4 py-2 whitespace-nowrap text-sm text-gray-500';
const value = row[header];
const type = columnTypes[header];
const convertedValue = convertValue(value, type);
if (type === 'date' && convertedValue instanceof Date) {
td.textContent = convertedValue.toLocaleDateString();
} else if (type === 'boolean') {
td.textContent = convertedValue ? '✓' : '✗';
td.style.textAlign = 'center';
} else {
td.textContent = convertedValue || '';
}
tr.appendChild(td);
});
tableBody.appendChild(tr);
}
// Update row count display
updateRowCountDisplay();
}
function updateRowCountDisplay() {
const totalRows = isFullDataLoaded ? fullCsvData.length : csvData.length;
const startRow = (currentPage - 1) * rowsPerPage + 1;
const endRow = Math.min(currentPage * rowsPerPage, totalRows);
rowCountDisplay.textContent = isFullDataLoaded ?
`Showing rows ${startRow}-${endRow} of ${totalRows}` :
`Showing first ${csvData.length} rows of data (${startRow}-${endRow}). Click "Load Full Dataset" to analyze all data.`;
}
function updatePagination() {
const totalRows = isFullDataLoaded ? fullCsvData.length : csvData.length;
totalPages = Math.ceil(totalRows / rowsPerPage);
// Disable/enable pagination buttons
firstPageBtn.disabled = currentPage === 1;
prevPageBtn.disabled = currentPage === 1;
nextPageBtn.disabled = currentPage === totalPages;
lastPageBtn.disabled = currentPage === totalPages;
// Generate page numbers
pageNumbersContainer.innerHTML = '';
// Calculate range of pages to show
let startPage, endPage;
if (totalPages <= visiblePages) {
// Show all pages
startPage = 1;
endPage = totalPages;
} else {
// Calculate start and end pages
const maxPagesBeforeCurrent = Math.floor(visiblePages / 2);
const maxPagesAfterCurrent = Math.ceil(visiblePages / 2) - 1;
if (currentPage <= maxPagesBeforeCurrent) {
// Current page near the start
startPage = 1;
endPage = visiblePages;
} else if (currentPage + maxPagesAfterCurrent >= totalPages) {
// Current page near the end
startPage = totalPages - visiblePages + 1;
endPage = totalPages;
} else {
// Current page somewhere in the middle
startPage = currentPage - maxPagesBeforeCurrent;
endPage = currentPage + maxPagesAfterCurrent;
}
}
// Add page number buttons
for (let i = startPage; i <= endPage; i++) {
const pageBtn = document.createElement('button');
pageBtn.className = `pagination-btn bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium ${i === currentPage ? 'active bg-indigo-600 text-white' : 'text-gray-700 hover:bg-gray-50'}`;
pageBtn.textContent = i;
pageBtn.addEventListener('click', () => goToPage(i));
pageNumbersContainer.appendChild(pageBtn);
}
}
function goToPage(page) {
if (page < 1 || page > totalPages) return;
currentPage = page;
renderTablePage();
updatePagination();
// Scroll to top of table
document.querySelector('.data-table-container').scrollTop = 0;
}
function toggleColumnSelection(columnName, columnElement) {
const index = selectedColumns.indexOf(columnName);
if (index === -1) {
selectedColumns.push(columnName);
columnElement.classList.add('column-selected');
columnElement.querySelector('span:first-child').innerHTML = '<i class="fas fa-check text-indigo-600"></i>';
} else {
selectedColumns.splice(index, 1);
columnElement.classList.remove('column-selected');
columnElement.querySelector('span:first-child').innerHTML = '';
}
// Highlight selected columns in the table
document.querySelectorAll('th[data-column]').forEach(th => {
if (selectedColumns.includes(th.dataset.column)) {
th.classList.add('bg-indigo-50', 'text-indigo-700');
} else {
th.classList.remove('bg-indigo-50', 'text-indigo-700');
}
});
// Enable/disable analyze button
analyzeBtn.disabled = selectedColumns.length === 0;
}
function analyzeSelectedColumns() {
if (selectedColumns.length === 0) return;
// Show analysis results section
analysisResults.classList.remove('hidden');
// Generate statistics
generateStatistics();
// Create initial chart
createChart();
}
function generateStatistics() {
statsSummary.innerHTML = '';
// Use full dataset if loaded, otherwise use preview data
const dataToAnalyze = isFullDataLoaded ? fullCsvData : csvData;
selectedColumns.forEach(column => {
const values = dataToAnalyze.map(row => parseFloat(row[column])).filter(val => !isNaN(val));
if (values.length === 0) {
// Non-numeric column
const uniqueCount = new Set(dataToAnalyze.map(row => row[column])).size;
const card = document.createElement('div');
card.className = 'bg-gray-50 rounded-lg p-4 border border-gray-200';
card.innerHTML = `
<h4 class="font-medium text-gray-700 truncate">${column}</h4>
<div class="mt-2">
<div class="flex justify-between text-sm text-gray-600">
<span>Type:</span>
<span>Categorical</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Unique Values:</span>
<span>${uniqueCount}</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Missing Values:</span>
<span>${dataToAnalyze.filter(row => !row[column]).length}</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Total Rows:</span>
<span>${dataToAnalyze.length}</span>
</div>
</div>
`;
statsSummary.appendChild(card);
} else {
// Numeric column
const sum = values.reduce((a, b) => a + b, 0);
const mean = sum / values.length;
const sorted = [...values].sort((a, b) => a - b);
const median = sorted[Math.floor(sorted.length / 2)];
const min = sorted[0];
const max = sorted[sorted.length - 1];
// Calculate standard deviation
const squaredDiffs = values.map(val => Math.pow(val - mean, 2));
const variance = squaredDiffs.reduce((a, b) => a + b, 0) / values.length;
const stdDev = Math.sqrt(variance);
const card = document.createElement('div');
card.className = 'bg-gray-50 rounded-lg p-4 border border-gray-200';
card.innerHTML = `
<h4 class="font-medium text-gray-700 truncate">${column}</h4>
<div class="mt-2">
<div class="flex justify-between text-sm text-gray-600">
<span>Mean:</span>
<span>${mean.toFixed(2)}</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Median:</span>
<span>${median.toFixed(2)}</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Min/Max:</span>
<span>${min.toFixed(2)} / ${max.toFixed(2)}</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Std Dev:</span>
<span>${stdDev.toFixed(2)}</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Missing Values:</span>
<span>${dataToAnalyze.filter(row => !row[column]).length}</span>
</div>
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>Total Rows:</span>
<span>${dataToAnalyze.length}</span>
</div>
</div>
`;
statsSummary.appendChild(card);
}
});
}
function createChart() {
const ctx = chartCanvas.getContext('2d');
const chartType = chartTypeSelect.value;
if (chart) {
chart.destroy();
}
// Use full dataset if loaded, otherwise use preview data
const dataToAnalyze = isFullDataLoaded ? fullCsvData : csvData;
// Prepare data based on selected columns
const datasets = [];
const labels = Array.from({ length: dataToAnalyze.length }, (_, i) => `Row ${i + 1}`);
selectedColumns.forEach((column, i) => {
const values = dataToAnalyze.map(row => parseFloat(row[column]));
const isNumeric = values.every(v => !isNaN(v));
if (isNumeric) {
datasets.push({
label: column,
data: values,
backgroundColor: getColor(i, 0.7),
borderColor: getColor(i, 1),
borderWidth: 1
});
} else {
// For categorical data, count occurrences
const valueCounts = {};
dataToAnalyze.forEach(row => {
const val = row[column] || 'Missing';
valueCounts[val] = (valueCounts[val] || 0) + 1;
});
// For pie charts, use the categorical data directly
if (chartType === 'pie' || chartType === 'doughnut') {
datasets.push({
label: column,
data: Object.values(valueCounts),
backgroundColor: Object.keys(valueCounts).map((_, i) => getColor(i, 0.7)),
borderColor: Object.keys(valueCounts).map((_, i) => getColor(i, 1)),
borderWidth: 1
});
} else {
// For other charts, show counts by category
datasets.push({
label: column,
data: Object.values(valueCounts),
backgroundColor: getColor(i, 0.7),
borderColor: getColor(i, 1),
borderWidth: 1
});
}
}
});
// Create chart based on type
if (chartType === 'pie' || chartType === 'doughnut') {
// For pie/doughnut, only show first selected column
const firstColumn = selectedColumns[0];
const valueCounts = {};
dataToAnalyze.forEach(row => {
const val = row[firstColumn] || 'Missing';
valueCounts[val] = (valueCounts[val] || 0) + 1;
});
chart = new Chart(ctx, {
type: chartType,
data: {
labels: Object.keys(valueCounts),
datasets: [{
data: Object.values(valueCounts),
backgroundColor: Object.keys(valueCounts).map((_, i) => getColor(i, 0.7)),
borderColor: '#fff',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: `Distribution of ${firstColumn}`
}
}
}
});
} else if (chartType === 'scatter') {
// For scatter plot, need exactly 2 numeric columns
const numericColumns = selectedColumns.filter(col => {
const values = dataToAnalyze.map(row => parseFloat(row[col]));
return values.every(v => !isNaN(v));
});
if (numericColumns.length >= 2) {
const xValues = dataToAnalyze.map(row => parseFloat(row[numericColumns[0]]));
const yValues = dataToAnalyze.map(row => parseFloat(row[numericColumns[1]]));
chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: `${numericColumns[0]} vs ${numericColumns[1]}`,
data: xValues.map((x, i) => ({x, y: yValues[i]})),
backgroundColor: getColor(0, 0.7),
borderColor: getColor(0, 1),
borderWidth: 1,
pointRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: numericColumns[0]
}
},
y: {
title: {
display: true,
text: numericColumns[1]
}
}
},
plugins: {
title: {
display: true,
text: `Scatter Plot: ${numericColumns[0]} vs ${numericColumns[1]}`
}
}
}
});
} else {
showError('Scatter plot requires at least 2 numeric columns');
}
} else if (chartType === 'histogram') {
// For histogram, need at least 1 numeric column
const numericColumns = selectedColumns.filter(col => {
const values = dataToAnalyze.map(row => parseFloat(row[col]));
return values.every(v => !isNaN(v));
});
if (numericColumns.length > 0) {
const column = numericColumns[0];
const values = dataToAnalyze.map(row => parseFloat(row[column]));
// Calculate optimal bin count using Sturges' formula
const binCount = Math.ceil(Math.log2(values.length) + 1);
// Find min and max values
const min = Math.min(...values);
const max = Math.max(...values);
const range = max - min;
const binSize = range / binCount;
// Create bins
const bins = Array(binCount).fill(0);
values.forEach(val => {
const binIndex = Math.min(Math.floor((val - min) / binSize), binCount - 1);
bins[binIndex]++;
});
// Create labels for bins
const binLabels = Array(binCount).fill().map((_, i) => {
const start = min + i * binSize;
const end = min + (i + 1) * binSize;
return `${start.toFixed(2)} - ${end.toFixed(2)}`;
});
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: binLabels,
datasets: [{
label: `Frequency of ${column}`,
data: bins,
backgroundColor: getColor(0, 0.7),
borderColor: getColor(0, 1),
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Frequency'
}
},
x: {
title: {
display: true,
text: column
}
}
},
plugins: {
title: {
display: true,
text: `Histogram of ${column}`
}
}
}
});
} else {
showError('Histogram requires at least 1 numeric column');
}
} else {
// For bar/line charts
chart = new Chart(ctx, {
type: chartType,
data: {
labels: labels.slice(0, 100), // Limit to 100 labels for performance
datasets: datasets.map((dataset, i) => ({
...dataset,
data: dataset.data.slice(0, 100) // Limit to 100 data points for performance
}))
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
},
plugins: {
title: {
display: true,
text: `Analysis of ${selectedColumns.join(', ')}`
},
tooltip: {
mode: 'index',
intersect: false
}
}
}
});
}
}
function updateChart() {
createChart();
}
function exportChart() {
if (!chart) return;
const link = document.createElement('a');
link.download = 'chart.png';
link.href = chartCanvas.toDataURL('image/png');
link.click();
}
function resetAnalysis() {
selectedColumns = [];
analysisResults.classList.add('hidden');
// Reset column selections
document.querySelectorAll('.column-selector').forEach(el => {
el.classList.remove('column-selected');
el.querySelector('span:first-child').innerHTML = '';
});
// Reset table header highlights
document.querySelectorAll('th[data-column]').forEach(th => {
th.classList.remove('bg-indigo-50', 'text-indigo-700');
});
// Disable analyze button
analyzeBtn.disabled = true;
}
function resetUploadUI() {
uploadContainer.classList.remove('hidden');
uploadProgress.classList.add('hidden');
progressBar.style.width = '0%';
progressPercentage.textContent = '0%';
uploadedSize.textContent = '0 MB';
fileInput.value = '';
if (uploadAbortController) {
uploadAbortController.abort();
uploadAbortController = null;
}
}
function updateProgress(uploaded, total) {
const percentage = Math.round((uploaded / total) * 100);
progressBar.style.width = `${percentage}%`;
progressPercentage.textContent = `${percentage}%`;
uploadedSize.textContent = formatFileSize(uploaded);
}
function formatFileSize(bytes) {
if (bytes < 1024) return bytes + ' B';
else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
else return (bytes / 1073741824).toFixed(1) + ' GB';
}
function getColor(index, opacity = 1) {
const colors = [
`rgba(79, 70, 229, ${opacity})`, // indigo
`rgba(220, 38, 38, ${opacity})`, // red
`rgba(5, 150, 105, ${opacity})`, // emerald
`rgba(234, 88, 12, ${opacity})`, // orange
`rgba(124, 58, 237, ${opacity})`, // purple
`rgba(8, 145, 178, ${opacity})`, // cyan
`rgba(202, 138, 4, ${opacity})`, // amber
`rgba(22, 163, 74, ${opacity})`, // green
`rgba(217, 70, 239, ${opacity})`, // pink
`rgba(239, 68, 68, ${opacity})` // rose
];
return colors[index % colors.length];
}
function showError(message) {
alert(message); // In a real app, you'd use a more elegant error display
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=anzuo/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>