An educational dashboard for visualizing Monte Carlo simulations of stock prices using real data from Yahoo Finance.
- Real-time Stock Data: Fetches current stock prices and calculates drift and volatility from Yahoo Finance
- Interactive Controls:
- Enter any stock ticker
- Override initial price, drift, and volatility with manual input
- Clear and edit all input fields (values reset to stock data if left empty)
- Adjust simulation parameters with sliders or direct input
- All values automatically round to 2 decimal places
- Educational Tooltips: Hover over any variable to see detailed explanations
- Comprehensive Statistics: View mean, percentiles, probability of profit, and more
- Interactive Chart Visualization:
- Click chart to expand into full-screen modal view
- Scroll or pinch to zoom in/out on the chart
- Click and drag to pan when zoomed in
- Sharp linear lines (no curves) for clear path visualization
- Reset zoom button when zoomed
- Displays up to 100 simulation paths for optimal performance
- Average path highlighted in red
- Export Functionality: Download simulation results and statistics as PDF
- React 18
- Vite
- Tailwind CSS
- Recharts (for charting)
- html2canvas & jsPDF (for export)
- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser to the URL shown in the terminal (typically http://localhost:5173)
- Enter a stock ticker (e.g., AAPL, MSFT, GOOGL) and click "Load Stock Data"
- The system will automatically fetch the current price and calculate drift and volatility
- Adjust simulation parameters using the sliders or input fields:
- You can manually override drift, volatility, and initial price
- Clear any field to reset it to the stock data value
- All values are automatically rounded to 2 decimal places
- Adjust trading days and number of simulations (minimum: 1 trading day, 100 simulations)
- Hover over any variable name to see its definition
- View the simulation results in the interactive chart:
- Click the chart to expand it into a full-screen modal
- Scroll or use trackpad pinch to zoom in/out
- When zoomed, click and drag to pan around the chart
- Click "Reset Zoom" to return to the full view
- View comprehensive statistics displayed below the chart
- Export the results as a PDF report
The Yahoo Finance API may have CORS restrictions in some browsers. If you encounter CORS errors:
- Development: Use a browser extension that disables CORS (not recommended for production)
- Production: Set up a backend proxy server to fetch the data
- Alternative: Use a CORS proxy service (not recommended for sensitive data)
For a production deployment, it's recommended to create a backend API endpoint that fetches the Yahoo Finance data and serves it to the frontend.