analyze example and provide a improvement interactive example
<example>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Analysis Process Visualization</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .component {
            width: 48%;
            height: 200px;
            margin-bottom: 20px;
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
            position: relative;
            overflow: auto;
        }
        .component h3 {
            margin-top: 0;
            text-align: center;
        }
        #raw-data { background-color: #f0f0f0; }
        #cleaned-data { background-color: #e6f3ff; }
        #analysis { background-color: #e6ffe6; }
        #visualization { background-color: #fff0e6; }
        #info {
            clear: both;
            margin-top: 20px;
            font-weight: bold;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Data Analysis Process Visualization</h1>
    <button onclick="startAnalysis()">Start Analysis</button>
    <div class="container">
        <div id="raw-data" class="component">
            <h3>Raw Data</h3>
            <div class="content"></div>
        </div>
        <div id="cleaned-data" class="component">
            <h3>Cleaned Data</h3>
            <div class="content"></div>
        </div>
        <div id="analysis" class="component">
            <h3>Analysis</h3>
            <div class="content"></div>
        </div>
        <div id="visualization" class="component">
            <h3>Visualization</h3>
            <canvas id="chart"></canvas>
        </div>
    </div>
    <div id="info"></div>

    <script>
        const rawData = [
            { date: '2023-01-01', product: 'Widget A', sales: 100, price: 50 },
            { date: '2023-01-02', product: 'Widget B', sales: 150, price: 60 },
            { date: '2023-01-03', product: 'Widget A', sales: 120, price: 50 },
            { date: '2023-01-04', product: 'Widget C', sales: 80, price: 40 },
            { date: '2023-01-05', product: 'Widget B', sales: 200, price: 60 },
            { date: '2023-01-06', product: 'Widget C', sales: 90, price: 40 },
            { date: '2023-01-07', product: 'Widget A', sales: 110, price: 50 },
        ];

        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        function updateInfo(message) {
            document.getElementById('info').textContent = message;
        }

        function displayTable(elementId, data) {
            const table = document.createElement('table');
            const headers = Object.keys(data[0]);
            
            // Create header row
            const headerRow = table.insertRow();
            headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                headerRow.appendChild(th);
            });

            // Create data rows
            data.forEach(row => {
                const dataRow = table.insertRow();
                headers.forEach(header => {
                    const cell = dataRow.insertCell();
                    cell.textContent = row[header];
                });
            });

            document.querySelector(`#${elementId} .content`).innerHTML = '';
            document.querySelector(`#${elementId} .content`).appendChild(table);
        }

        async function startAnalysis() {
            // Load Raw Data
            updateInfo("Loading raw data...");
            displayTable('raw-data', rawData);
            await sleep(2000);

            // Clean Data
            updateInfo("Cleaning data...");
            const cleanedData = rawData.map(row => ({
                ...row,
                revenue: row.sales * row.price
            }));
            displayTable('cleaned-data', cleanedData);
            await sleep(2000);

            // Analyze Data
            updateInfo("Analyzing data...");
            const analysis = {
                totalSales: cleanedData.reduce((sum, row) => sum + row.sales, 0),
                totalRevenue: cleanedData.reduce((sum, row) => sum + row.revenue, 0),
                averagePrice: cleanedData.reduce((sum, row) => sum + row.price, 0) / cleanedData.length
            };
            document.querySelector('#analysis .content').innerHTML = `
                <p>Total Sales: ${analysis.totalSales}</p>
                <p>Total Revenue: $${analysis.totalRevenue.toFixed(2)}</p>
                <p>Average Price: $${analysis.averagePrice.toFixed(2)}</p>
            `;
            await sleep(2000);

            // Visualize Data
            updateInfo("Generating visualization...");
            const ctx = document.getElementById('chart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: cleanedData.map(row => row.date),
                    datasets: [{
                        label: 'Sales',
                        data: cleanedData.map(row => row.sales),
                        backgroundColor: 'rgba(75, 192, 192, 0.6)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            await sleep(2000);

            updateInfo("Analysis completed!");
        }
    </script>
</body>
</html>