OrangeDepth°

Visit OrangeDepth to explore the website

Hello there! 👋

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.

🚀 Features

• 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.

📱 Mobile Preview

📋 How It Works

• 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.

🎨 Styling

• 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.

🛠 Built With

• : 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.

🦴 Additional Tools/Libraries

• 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.

🌐 Media and Attribution

• Background videos are sourced from Pexels.
• All images, icons, and logos were generated using OpenAI's DALL-E 3.

🏃🏼 How to Run

To launch OrangeDepth° locally, follow these steps:

cd OrangeDepth/
npm install
npm run dev

Screenshots/videos

orangeVid1.1.mov

scatterVideo.mp4