Newer
Older
<!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>
BOUDJEBBOUR MAYA p2312048
committed
<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>
</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>
</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>
</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 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>
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
</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>
<section id="radial-distance-chart-Anis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation pour Anis -->
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<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>
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 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>