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 id="analysis-content-steps" class="col-md-6" data-aos="fade-right">
<p style="font-size: 0.90em;">En 2024, les habitudes de marche des utilisateurs ont montré des comportements variés influencés par les saisons, les examens et les fêtes. <strong>Corentin</strong> a enregistré un pic notable en décembre, atteignant plus de 10 000 pas, probablement dû aux préparatifs des fêtes de fin d'année, offrant ainsi un boost temporaire à son activité physique. <strong>Anis</strong>, de son côté, a affiché une marche régulière tout au long de l'année, oscillant entre 6 500 et 9 000 pas, avec des variations accrues en fin d'année, semblables à celles de Corentin, probablement liées aux fêtes et aux changements dans son emploi du temps. <strong>Maya</strong>, vivant près de l'université, a maintenu un rythme compris entre 3 000 et 7 500 pas, mais a connu une baisse significative en fin d'année, probablement en raison du stress des examens et des périodes intensives de révisions. <strong>Amira</strong>, elle aussi proche de l'université, a affiché une activité réduite tout au long de l'année, particulièrement en novembre, période où les révisions l'ont retenue chez elle. Les tendances communes de 2024 montrent une diminution de l'activité en hiver, particulièrement chez Amira et Maya, affectées par le stress des examens. En revanche, Corentin et Anis ont montré une activité accrue en décembre, influencée par les fêtes de fin d'année. Ces dynamiques soulignent l'impact des facteurs sociaux, académiques et saisonniers sur les habitudes de marche des utilisateurs.</p>
</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-success" disabled><</button>
<span id="stepsCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="stepsNextYear" class="btn btn-success">></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-success" disabled><</button>
<span id="distanceCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="distanceNextYear" class="btn btn-success">></button>
<div id="distance-visualization" style="position: relative;"></div>
<div id="distance-slider-container" style="margin-top: 20px;"></div>
</div>
<!-- Texte à droite -->
<div id="analysis-content-distanceCalories" class="col-md-6 order-md-2" data-aos="fade-left">
<h3>Analyse de la Distance Parcourue en fonction des calories brulées</h3>
<p style="font-size: 1.0em;">Cette visualisation met en évidence la relation entre la distance parcourue et les calories brûlées pour chaque utilisateur, offrant un aperçu des tendances dans leurs habitudes physiques. <strong>Anis</strong> se distingue comme celui qui marche le plus et brûle le plus de calories, atteignant un pic de 484 calories brûlées en mai après avoir parcouru 6,73 km. En décembre, il reste régulier, avec 6,58 km parcourus et 474 calories brûlées. <strong>Corentin</strong> suit de près, avec une activité soutenue, notamment en décembre, mais ses performances restent en deçà de celles d'Anis. <strong>Maya</strong> et <strong>Amira</strong> affichent une activité plus modérée, bien qu'elles connaissent une hausse notable en décembre, probablement en raison des préparatifs des fêtes de fin d'année. En revanche, les mois de faible activité ne montrent pas de tendance claire, chaque utilisateur ayant des variations uniques, reflétant des contraintes et habitudes personnelles.</p>
</div>
</section>
<section id="calories-analysis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Texte à gauche -->
<div id="analysis-content-calories" class="col-md-6" data-aos="fade-right">
<p style="font-size: 1.0em;">Le graphique illustre les calories brûlées chaque mois par les membres du groupe en 2024, mettant en évidence des variations intéressantes dans leurs niveaux d'activité. <strong>Anis</strong> est clairement le leader en matière de calories brûlées, atteignant un pic de 480 calories en mai grâce à ses activités physiques variées, telles que la marche et le vélo. <strong>Corentin</strong> suit avec un effort plus équilibré, atteignant un pic de 300 calories en avril et décembre. <strong>Maya</strong> et <strong>Amira</strong> brûlent globalement moins de calories, avec Maya étant légèrement plus active que Amira, dont la dépense calorique est généralement faible, mais avec un pic exceptionnel de 150 calories en septembre. Ces résultats illustrent des dynamiques individuelles distinctes : Anis est le plus actif, Amira est plus sédentaire, Maya maintient une constance régulière, et Corentin affiche des efforts notables lors de certains mois.</p>
</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-success" disabled><</button>
<span id="caloriesCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="caloriesNextYear" class="btn btn-success">></button>
<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-success"> < </button>
<span id="currentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="nextYear" class="btn btn-success"> > </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>
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
</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 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="form-range mx-2" min="0" max="10" step="1" style="flex-grow: 1; color: green;">
<button id="play-button" class="btn btn-success">Play</button>
<div id="sleep-activity-visualization" style="position: relative;"></div>
<section id="radial-distance-chart-Anis" class="details">
<div class="container">
<div class="row align-items-center">
<!-- Visualisation pour Anis -->
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
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
<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>