This project, developed for the **Data Visualization course (2024/2025)**, aims to analyze and compare personal data collected via the Health app on iPhones to better understand the physical activity, sleep, and wellness habits of group members. Using interactive visualizations and in-depth analyses, the project addresses the following questions:
- How does physical activity vary among group members?
- How do sleep cycles differ among group members?
- Do activity levels influence sleep quality?
- How do health behaviors evolve over a week or month?
Through intuitive visualizations and meaningful insights, this project identifies trends and highlights behaviors to provide a deeper understanding of health patterns, while showcasing advanced data visualization techniques and storytelling skills as part of the course objectives.
---
## Project development progress
### Data preparation and preprocessing
-**XML to CSV Conversion**: Extracted and transformed data from complex XML files into CSV format using Python scripts, addressing challenges like:
- Variability in XML structures.
- Encoding issues (UTF-8, ISO-8859-1).
- Large file sizes requiring batch processing.
-**CSV Cleaning and Merging**: Developed a script to clean and merge CSV data from all group members, extracting only the relevant information for analysis.
-**CSV to JSON Conversion**: Transformed the final dataset into JSON format for seamless integration with D3.js visualizations.
---
### Visualizations
1.**Sleep Visualization**
- Developed a bar chart to display sleep hours per member across different years.
- Added interactivity to allow users to click on bars for detailed monthly views.
2.**Sleep vs. Steps Visualization**
- Combined bar and line charts to visualize the correlation between steps and sleep hours for 2024.
- Included three axes (time, steps, and sleep hours).
3.**Animated Scatter Plot**
- Displays the relationship between steps, sleep, and calories with week-by-week animation.
- Features include:
- Slider and Play/Pause buttons.
- Tooltips for details (steps, sleep, calories).
- Linear regression line for trend analysis.
4.**Radial Distance Chart**
- Represents weekly distances and sleep hours in a radial format.
- Added a dropdown for user selection and gradient legends for sleep duration.
5.**Calories and Distance Visualization**
- Developed a bubble chart and an area chart to visualize calories burned and distances covered across years.
---
### Website integration
- Centralized visualizations into a unified site structure.
- Managed script conflicts by isolating visualization-specific functions and variables.
- Harmonized CSS styles to ensure a consistent design across all visualizations.
- Coordinated shared interactions (e.g., sliders, dropdowns) to avoid interferences.
---
## Technical details
### Tools and Technologies
-**Frontend**:
- HTML, CSS, JavaScript, D3.js for interactive visualizations.
- Responsive web design for seamless experience across devices.
-**Backend**:
- Python for data preprocessing and transformation.
-**Data Sources**:
- Health data collected from iPhone Health app (steps, sleep, distance, calories).
### File structure
```
├── index.html # Main website file
├── static/
│ ├── js/
│ │ ├── main.js # Core application logic
│ │
│ ├── css/
│ │ ├── styles.css # Styles for the website and visualizations
