<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Data Viz 2024-2025</title>
<meta content="" name="description">
<meta content="" name="keywords">
<link href="../static/img/logo.png" rel="icon">
<link href="../static/img/logo.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="../static/vendor/aos/aos.css" rel="stylesheet">
<link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="../static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../static/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="../static/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="../static/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../static/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Bootslander
* Template URL: https://bootstrapmade.com/bootslander-free-bootstrap-landing-page-template/
* Updated: Mar 17 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center header-transparent">
<div class="container d-flex align-items-center justify-content-between">
<div class=" logo d-flex align-items-center">
<!-- Logo Image -->
<a href="/" class="logo me-3">
<img src="../static/img/logo.png" alt="Green Impact logo" class="img-fluid">
</a>
<!-- Titre -->
<h1><a href="/"><span>Health Insight</span></a></h1>
</div>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="./index.html">Accueil</a></li>
<li><a class="nav-link scrollto" href="./information.html">Informations</a></li>
<li><a class="nav-link scrollto" href="#team">Équipe</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 pt-5 pt-lg-0 order-2 order-lg-1 d-flex align-items-center">
<div data-aos="zoom-out">
<h1>Nos données santé racontent une histoire : découvrez comment nos habitudes façonnent notre bien-être !
</h1>
</div>
</div>
<div class="col-lg-4 order-1 order-lg-2 hero-img" data-aos="zoom-out" data-aos-delay="300">
<img src="../static/img/Fitness tracker-rafiki.png" class="img-fluid animated" alt="">
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= Details Section ======= -->
<section id="steps-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Texte à gauche -->
<div class="col-md-6" data-aos="fade-right">
<h3>Analyse des Pas des Utilisateurs</h3>
<p>
Cette visualisation illustre les données sur le nombre de pas effectués par les utilisateurs
chaque mois au cours des années. Utilisez le slider ci-dessous pour explorer les données
par année et découvrir les tendances individuelles de chaque utilisateur.
</p>
<ul>
<li><i class="bi bi-check"></i> Analyse par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison des pas entre utilisateurs.</li>
<li><i class="bi bi-check"></i> Visualisation interactive avec un slider.</li>
</ul>
</div>
<!-- Visualisation à droite -->
<div class="col-md-6">
<div class="d-flex justify-content-between align-items-center my-3" id="steps-buttons-container">
<button id="stepsPrevYear" class="btn btn-outline-dark" disabled><</button>
<span id="stepsCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="stepsNextYear" class="btn btn-outline-dark">></button>
</div>
<div id="steps-visualization" style="position: relative;"></div>
</div>
</div>
</div>
</section>
<section id="distance-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation à gauche -->
<div class="col-md-6 order-md-1">
<div id="distance-buttons-container" class="d-flex justify-content-between align-items-center">
<button id="distancePrevYear" class="btn btn-outline-dark" disabled><</button>
<span id="distanceCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="distanceNextYear" class="btn btn-outline-dark">></button>
</div>
<div id="distance-visualization" style="position: relative;"></div>
<div id="distance-slider-container" style="margin-top: 20px;"></div>
</div>
<!-- Texte à droite -->
<div class="col-md-6 order-md-2" data-aos="fade-left">
<h3>Analyse de la Distance Parcourue</h3>
<p>
Découvrez comment la distance parcourue est liée aux calories brûlées pour chaque utilisateur.
Utilisez le slider pour explorer les données par année et comparez les performances des différents
membres.
</p>
<ul>
<li><i class="bi bi-check"></i> Relation distance-calories par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison des membres.</li>
<li><i class="bi bi-check"></i> Visualisation interactive avec bulles et tooltip.</li>
</ul>
</div>
</div>
</div>
</section>
<section id="calories-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Texte à gauche -->
<div class="col-md-6" data-aos="fade-right">
<h3>Analyse des Calories Brûlées</h3>
<p>
Cette visualisation explore les calories brûlées par chaque utilisateur au fil des mois.
Utilisez le slider pour naviguer entre les années et analyser les tendances des différents membres.
</p>
<ul>
<li><i class="bi bi-check"></i> Analyse des calories par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison des utilisateurs.</li>
<li><i class="bi bi-check"></i> Visualisation interactive avec des aires.</li>
</ul>
</div>
<!-- Visualisation à droite -->
<div class="col-md-6">
<div class="d-flex justify-content-between align-items-center my-3" id="calories-buttons-container">
<button id="caloriesPrevYear" class="btn btn-outline-dark" disabled><</button>
<span id="caloriesCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="caloriesNextYear" class="btn btn-outline-dark">></button>
</div>
<div id="calories-visualization" style="position: relative;"></div>
</div>
</div>
</div>
</section>
<section id="sleep-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation à gauche -->
<div class="col-md-6 order-md-1">
<div class="d-flex justify-content-between align-items-center">
<button id="prevYear" class="btn btn-outline-dark"> < </button>
<span id="currentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="nextYear" class="btn btn-outline-dark"> > </button>
</div>
<div id="sleep-visualization" style="position: relative;"></div>
</div>
<!-- Texte à droite -->
<div class="col-md-6 order-md-2" data-aos="fade-left">
<h3>Analyse des Heures de Sommeil</h3>
<p>
Cette visualisation met en évidence les heures de sommeil moyennes par mois pour chaque utilisateur.
Utilisez le slider pour explorer les données par année et visualiser les tendances individuelles.
</p>
<ul>
<li><i class="bi bi-check"></i> Analyse des heures de sommeil moyen par mois et par année.</li>
<li><i class="bi bi-check"></i> Comparaison entre utilisateurs.</li>
<li><i class="bi bi-check"></i> Détails interactifs par jour pour un mois donné.</li>
</ul>
</div>
</div>
</div>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="detail-visualization"></div>
</div>
</div>
</section>
<section id="sleep-activity-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Texte à gauche -->
<div class="col-md-6" data-aos="fade-right">
<h3>Analyse du Sommeil et de l'Activité</h3>
<p>
Cette visualisation interactive présente la relation entre les pas effectués,
les heures de sommeil et les calories brûlées par semaine.
Utilisez le slider pour explorer les données semaine par semaine.
</p>
<ul>
<li><i class="bi bi-check"></i> Relation entre les pas, le sommeil et les calories brûlées.</li>
<li><i class="bi bi-check"></i> Comparaison hebdomadaire pour chaque utilisateur.</li>
<li><i class="bi bi-check"></i> Régression et tendances visuelles.</li>
</ul>
</div>
<!-- Visualisation à droite -->
<div class="col-md-6">
<div id="sleep-activity-visualization" style="position: relative;"></div>
<div class="slider-container-sleep-activity d-flex align-items-center mt-3">
<div class="slider-label">Date: <span id="date-label">2023-W39</span></div>
<input type="range" id="date-slider" class="slider mx-2" min="0" max="10" step="1" style="flex-grow: 1;">
<button id="play-button" class="btn btn-primary">Play</button>
</div>
</div>
</div>
</div>
</section>
<section id="radial-distance-chart-Anis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation pour Anis -->
<div class="col-md-6 order-md-1">
<div id="chart-Anis" class="d-flex justify-content-center align-items-center"></div>
</div>
<!-- Texte explicatif -->
<div class="col-md-6 order-md-2" data-aos="fade-left">
<h3>Analyse Radiale : Distance & Sommeil (Anis)</h3>
<p>
Cette visualisation met en évidence la durée de sommeil moyenne en fonction de la distance parcourue chaque semaine pour <strong>Anis</strong>.
</p>
<ul>
<li><i class="bi bi-check"></i> Durée de sommeil moyenne par semaine.</li>
<li><i class="bi bi-check"></i> Distance totale parcourue chaque semaine.</li>
<li><i class="bi bi-check"></i> Visualisation intuitive et interactive en graphique radial.</li>
</ul>
</div>
</div>
</div>
</section>
<section id="radial-distance-chart-Maya" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation pour Maya -->
<div class="col-md-6 order-md-1">
<div id="chart-Maya" class="d-flex justify-content-center align-items-center"></div>
</div>
<!-- Texte explicatif -->
<div class="col-md-6 order-md-2" data-aos="fade-left">
<h3>Analyse Radiale : Distance & Sommeil (Maya)</h3>
<p>
Cette visualisation met en évidence la durée de sommeil moyenne en fonction de la distance parcourue chaque semaine pour <strong>Maya</strong>.
</p>
<ul>
<li><i class="bi bi-check"></i> Durée de sommeil moyenne par semaine.</li>
<li><i class="bi bi-check"></i> Distance totale parcourue chaque semaine.</li>
<li><i class="bi bi-check"></i> Visualisation intuitive et interactive en graphique radial.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Répétez pour Corentin et Amira -->
<section id="radial-distance-chart-Corentin" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation pour Corentin -->
<div class="col-md-6 order-md-1">
<div id="chart-Corentin" class="d-flex justify-content-center align-items-center"></div>
</div>
<div class="col-md-6 order-md-2" data-aos="fade-left">
<h3>Analyse Radiale : Distance & Sommeil (Corentin)</h3>
<p>
Cette visualisation met en évidence la durée de sommeil moyenne en fonction de la distance parcourue chaque semaine pour <strong>Corentin</strong>.
</p>
<ul>
<li><i class="bi bi-check"></i> Durée de sommeil moyenne par semaine.</li>
<li><i class="bi bi-check"></i> Distance totale parcourue chaque semaine.</li>
<li><i class="bi bi-check"></i> Visualisation intuitive et interactive en graphique radial.</li>
</ul>
</div>
</div>
</div>
</section>
<section id="radial-distance-chart-Amira" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation pour Amira -->
<div class="col-md-6 order-md-1">
<div id="chart-Amira" class="d-flex justify-content-center align-items-center"></div>
</div>
<div class="col-md-6 order-md-2" data-aos="fade-left">
<h3>Analyse Radiale : Distance & Sommeil (Amira)</h3>
<p>
Cette visualisation met en évidence la durée de sommeil moyenne en fonction de la distance parcourue chaque semaine pour <strong>Amira</strong>.
</p>
<ul>
<li><i class="bi bi-check"></i> Durée de sommeil moyenne par semaine.</li>
<li><i class="bi bi-check"></i> Distance totale parcourue chaque semaine.</li>
<li><i class="bi bi-check"></i> Visualisation intuitive et interactive en graphique radial.</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<div class="container">
<div class="copyright">
© Copyright <strong><span>Health Inseight</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/bootslander-free-bootstrap-landing-page-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="../static/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="../static/vendor/aos/aos.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../static/vendor/glightbox/js/glightbox.min.js"></script>
<script src="../static/vendor/swiper/swiper-bundle.min.js"></script>
<script src="../static/vendor/php-email-form/validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Template Main JS File -->
<script src="../static/js/main.js"></script>
</body>
</html>