Visit OrangeDepth to explore the website
Welcome to OrangeDepth°, where citrus meets data mastery. This innovative web application is crafted with Vue.js to offer a seamless and interactive experience for data enthusiasts and citrus lovers alike.
- Multiple Chart Types: Explore data with bar, doughnut, and scatter charts.
- Interactive Data Visualizations: Click and interact with the charts, offering a dynamic user experience similar to professional data analysis tools.
- Responsive Design: Optimized for both desktop and mobile devices, ensuring accessibility and ease of use from anywhere.
- Local Storage Integration: Data configurations and settings are preserved between sessions, ensuring a consistent experience.
- Animations and Interactivity: Smooth transitions and responsive interactions enhance the user experience.
- Chart Navigation: Switch between various types of charts using the navigation menu to explore different datasets.
- Interactive Elements: Hover over data points to see detailed information; click elements to drill down into deeper analysis.
- Dynamic Data Loading: Data is dynamically loaded and rendered as you interact with the application.
- The application features a modern and clean design that emphasizes readability and user interaction.
- Active data points and chart segments are highlighted to help users focus on important details.
- Custom-designed UI components are tailored specifically for data interaction.
: Powers the reactive and interactive user interfaces.
: Provides a fast development environment and optimized build tooling.
: Enhances CSS with more powerful styling capabilities.
: Offers type safety for reliable code.
- AG-Grid: Provides a high-performance grid system that is both customizable and extensible.
- Chart.js: Enables the creation of dynamic and animated charts with ease.
- PrimeVue: Supplies a rich set of UI components tailored for Vue applications.
- VueUse Motion: Offers a robust solution for managing animations and transitions within Vue.
- Vue Router: Manages navigation within the application.
- Background videos are sourced from Pexels.
- All images, icons, and logos were generated using OpenAI's DALL-E 3.
To launch OrangeDepth° locally, follow these steps:
cd OrangeDepth/
npm install
npm run dev
orangeVid1.1.mov
scatterVideo.mp4
![image](https://private-user-images.githubusercontent.com/27707434/322211863-1efc2e86-55be-48bf-be41-e04c8a3d9b27.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNjk2MzksIm5iZiI6MTcxOTA2OTMzOSwicGF0aCI6Ii8yNzcwNzQzNC8zMjIyMTE4NjMtMWVmYzJlODYtNTViZS00OGJmLWJlNDEtZTA0YzhhM2Q5YjI3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDE1MTUzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE2ZGYxZTEyNjAxODgyNjc1NWJmMDgyMTBmOGNkYjRlNWQxNzNmNGYzMDFiZjJjZjlmNWMxNDFiNzc4YmE0YmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.CNJ7AoszlUYWnO8QrM-hSXMQZyMaTds1LHBsSn18C30)
![image](https://private-user-images.githubusercontent.com/27707434/322211890-a15c7410-65f6-4d29-875e-6553713e3323.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwNjk2MzksIm5iZiI6MTcxOTA2OTMzOSwicGF0aCI6Ii8yNzcwNzQzNC8zMjIyMTE4OTAtYTE1Yzc0MTAtNjVmNi00ZDI5LTg3NWUtNjU1MzcxM2UzMzIzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDE1MTUzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRmZmRmODhhNGZiYjQ0ZjM0MTg3ZTc5ZjQ1YmFhNDBlN2I3MTNiOTYzNzk4ZjQ2NTFjNzFhNDRhOWQ5YTVjMjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.3em7x-zM9eWyn_FtH-M97bV39yO9G6qEiQdArxNlRHM)