A fully interactive, single-page web application that simulates a machine learning sales forecasting pipeline.
This modern dashboard showcases advanced UI/UX design, data visualization, and complex front-end application logic built entirely with HTML, CSS, and Vanilla JavaScript. It is a powerful demonstration of building complex, data-driven interfaces without a backend.
-
Interactive ML Simulation: Experience a realistic, step-by-step simulation of an ML model training, evaluation, and forecasting process with artificial processing delays (
async/await). - Custom Data Input: Input your sales data for the last 7 days to generate a personalized forecast tailored to your business trends.
-
Detailed Results & Interpretation: The analysis provides a comprehensive output, including:
- Simulated XGBoost Model Parameters and performance metrics.
- Key metrics: Mean Absolute Error (MAE) and R-squared (
$R^2$ ). - A dynamic Feature Importance bar chart showing key sales drivers.
- An Actual vs. Predicted line chart to visualize model accuracy.
- 14-Day Forecast: View the future sales forecast presented in a dynamic line chart with a confidence interval and a clear data table.
- Responsive & Themed: Fully responsive design for seamless viewing on desktop, tablet, and mobile. Instantly switch between a sleek Dark/Light Theme for optimal comfort. 🌗
This project is built entirely with front-end technologies, requiring no backend or server-side code.
| Technology | Role | Key Implementations |
|---|---|---|
| HTML5 | Structure | Semantic and accessible markup. |
| CSS3 | Styling & Theme | CSS Variables for theming, Flexbox & CSS Grid for modern, responsive layouts. Subtle transitions and animations. |
| Vanilla JavaScript (ES6+) | Logic & State | Manages DOM, state (userSalesData), and orchestrates the staged simulation using async/await. |
| Chart.js | Data Visualization | Creates beautiful, responsive, and theme-aware animated charts (Line & Bar). |
| Font Awesome | Icons | High-quality icons used throughout the interface. |
- Run the Analysis: Click the "Run Predictive Analysis" button to start the simulation using the default sample data.
- Enter Custom Data (Optional): Click "Enter Custom Data" to open the modal. Input your 7-day sales figures and click "Save & Rerun Analysis".
- View Results: The results are revealed sequentially—Training, Interpretation, and Forecast—to simulate a realistic pipeline.
- Reset: Click "Reset to Sample Data" to clear your custom input and restore the original dataset.
- Toggle Theme: Use the moon/sun icon in the sidebar to switch between light and dark modes at any time.
The core logic revolves around the async function runAnalysis, which controls the entire simulation flow.
- Staged Simulation: Uses
await sleep()to create deliberate, realistic processing delays between steps. - Data Generation: Helper functions (
calculateFeatureImportance,generateSmartForecast) use client-side algorithms and randomization to produce highly realistic and variable data outputs. (Note: No actual ML model is running). - Dynamic Rendering: Sequentially reveals and populates the three main results sections, ensuring a smooth, engaging user experience.
- Theme Awareness: A dedicated
updateAllChartColorsfunction ensures Chart.js visualizations instantly adapt to the Dark/Light theme toggle.
- Powerful Theming: The entire color scheme is driven by CSS Variables defined in
:root. Toggling the theme is simply a matter of adding/removing thebody.dark-themeclass, which overrides these variables. - Professional Polish: Heavy use of Flexbox and CSS Grid for maintainable layouts. Subtle animations on cards and buttons provide polished visual feedback (e.g., button spinner during analysis).
A Note on the Simulation: This is a front-end simulation designed to demonstrate what a real predictive analytics dashboard looks and feels like. The "model training" and "predictions" are generated by client-side JavaScript functions. The purpose is to showcase advanced skills in building complex, interactive, and data-driven user interfaces.