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.92em;">
En 2024, les habitudes de marche des utilisateurs ont été influencées par des facteurs saisonniers, académiques et sociaux.
</p>
<p style="font-size: 0.92em;">
<strong>Corentin</strong> a enregistré un pic en décembre, dépassant les 10 000 pas, probablement en raison des préparatifs des fêtes. <strong>Anis</strong> a maintenu une activité régulière entre 6 500 et 9 000 pas, avec des variations accrues en fin d'année, similaires à celles de Corentin, liées aux fêtes et à son emploi du temps.
</p>
<p style="font-size: 0.92em;">
<strong>Maya</strong>, proche de l'université, a eu un rythme compris entre 3 000 et 7 500 pas, mais a connu une baisse en fin d'année en raison du stress des examens. <strong>Amira</strong> a montré une activité réduite, notamment en novembre, pendant ses révisions.
</p>
<p style="font-size: 0.92em;">
Les tendances montrent une diminution générale de l'activité en hiver, particulièrement chez <strong>Maya</strong> et <strong>Amira</strong>, tandis que <strong>Corentin</strong> et <strong>Anis</strong> ont montré un pic d'activité en décembre, influencé par les fêtes.
</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: 0.92em;">
Cette visualisation met en évidence la relation entre la <strong>distance</strong> parcourue et les calories brûlées pour chaque utilisateur, offrant un aperçu des tendances dans leurs habitudes physiques.
</p>
<p style="font-size: 0.92em;">
<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.
</p>
<p style="font-size: 0.92em;">
<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.
</p>
<p style="font-size: 0.92em;">
<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.
</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">
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é.
</p>
<p style="font-size: 0.92em;">
<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.
</p>
<p style="font-size: 0.92em;">
<strong>Corentin</strong> suit avec un effort plus équilibré, atteignant un pic de 300 calories en avril et décembre.
</p>
<p style="font-size: 0.92em;">
<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.
</p>
<p style="font-size: 0.92em;">
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: m;">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="sleepPrevYear" class="btn btn-success"> < </button>
<span id="sleepCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
<button id="sleepNextYear" class="btn btn-success"> > </button>
<div id="sleep-visualization" style="position: relative;"></div>
</div>
<!-- Texte à droite -->
<div id="analysis-content-sleep" class="col-md-6 order-md-2" data-aos="fade-left">
En 2024, <strong>Amira</strong> se distingue comme la meilleure dormeuse, maintenant une moyenne de 6 heures de sommeil par nuit, même en période de stress comme les examens.
</p>
<p style="font-size: 0.95em;">
<strong>Anis</strong>, quant à lui, affiche une constance exemplaire avec un rythme stable et régulier tout au long de l'année, reflétant une bonne gestion de son emploi du temps.
</p>
<p style="font-size: 0.95em;">
À l'opposé, <strong>Maya</strong> enregistre les durées de sommeil les plus faibles, atteignant un minimum de 0,70 heure en décembre, probablement en raison de la pression académique.
</p>
<p style="font-size: 0.95em;">
<strong>Corentin</strong>, de son côté, présente un sommeil plus variable, oscillant selon les mois sans réelle régularité.
</p>
<p style="font-size: 0.95em;">
Cette analyse met en évidence des différences marquées dans les habitudes de sommeil, offrant des pistes d’amélioration adaptées aux besoins de chaque membre.
</p>
</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 style="font-size: 0.92em;">
<strong>Amira</strong> montre une régularité remarquable, privilégiant un sommeil de qualité et des niveaux modérés d’activité physique. Elle réussit ainsi à maintenir un bon équilibre entre repos et exercice, même pendant les périodes d'examen.
</p>
<p style="font-size: 0.92em;">
À l'inverse, <strong>Maya</strong>, la moins dormeuse du groupe, combine un faible sommeil avec une activité physique élevée, probablement en raison de son <strong>emploi du temps chargé</strong>, que ce soit pour ses études ou un travail, et utilise la <strong>marche pour ses déplacements quotidiens</strong>.
</p>
<p style="font-size: 0.92em;">
<strong>Anis</strong> alterne entre des <strong>pics d'activité intenses</strong>, dépassant parfois <strong>20 000 pas</strong>, et des périodes de repos. Ces fluctuations peuvent être liées à des <strong>voyages</strong> ou des <strong>activités spécifiques</strong> comme des entraînements ou des événements.
</p>
<p style="font-size: 0.92em;">
<strong>Corentin</strong>, de son côté, présente un <strong>équilibre variable</strong> avec une <strong>activité physique modérée</strong> et un <strong>sommeil fluctuant</strong>, souvent en lien avec des événements ponctuels comme un <strong>voyage académique</strong>, reflétant une adaptation à un <strong>emploi du temps structuré</strong>.
</p>
</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 -->
<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 style="font-size: 0.92em;">
Anis adopte un mode de vie équilibré, alternant entre des périodes de forte activité physique et des phases de récupération. Les données montrent des pics de distance parcourue, notamment entre les semaines <strong>W39 et W43 de 2023</strong>, atteignant souvent plus de <strong>40 km par semaine</strong>, probablement en lien avec des voyages ou des événements sportifs.
</p>
<p style="font-size: 0.92em;">
Ces périodes intenses sont suivies de semaines plus calmes, comme en <strong>W1 et W2 de 2024</strong>, où les distances parcourues diminuent à moins de <strong>10 km</strong>, accompagnées d'une augmentation du temps de sommeil pour favoriser la récupération.
</p>
<p style="font-size: 0.92em;">
Anis maintient un sommeil stable, oscillant entre <strong>6 et 8 heures par nuit</strong>, même lors des semaines les plus actives. Cette capacité à équilibrer efforts et repos reflète une gestion réfléchie de son énergie et un rythme de vie discipliné.
</p>
</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 style="font-size: 0.92em;">
Maya affiche une activité physique modérée tout au long de l'année, avec des variations notables entre les semaines. Ses pics d'activité sont observés entre les semaines <strong>W26 et W29 de 2023</strong>, où elle parcourt environ <strong>50 km par semaine</strong>, suggérant une période particulièrement active, probablement liée à des obligations académiques ou professionnelles nécessitant de fréquents déplacements.
</p>
<p style="font-size: 0.92em;">
Cependant, son activité physique diminue de manière significative en fin d'année, notamment autour de <strong>W51 et W52</strong>, où elle parcourt moins de <strong>10 km par semaine</strong>. Cela pourrait être expliqué par des périodes de repos ou de révisions intensives pour des examens.
</p>
<p style="font-size: 0.92em;">
Concernant le sommeil, Maya maintient une durée de sommeil relativement faible tout au long de l'année, oscillant entre <strong>3 et 5 heures par nuit</strong>. Cette tendance peut être attribuée à un emploi du temps chargé et un équilibre difficile entre les études et le repos. Cependant, lors des semaines où son activité physique est réduite, une légère amélioration de la durée de sommeil est visible, indiquant une tentative de récupération.
</p>
</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 style="font-size: 0.92em;">
Corentin présente une activité physique notablement variée au fil des semaines, avec des pics marquants en <strong>W3 de 2024</strong>, où il atteint <strong>100 km en une semaine</strong>, probablement en raison d'un événement ou d'un défi spécifique, tel qu'un projet académique impliquant des déplacements ou une participation à une activité sportive intense.
</p>
<p style="font-size: 0.92em;">
En revanche, son activité physique diminue considérablement lors des périodes plus calmes, comme <strong>W51 et W52 de 2023</strong>, où il parcourt moins de <strong>20 km</strong>, possiblement en lien avec des vacances ou des pauses festives.
</p>
<p style="font-size: 0.92em;">
En ce qui concerne son sommeil, Corentin affiche une durée relativement stable tout au long de l'année, oscillant entre <strong>4 et 6 heures par nuit</strong>. Ses périodes d'activité physique intense, comme en <strong>W3 de 2024</strong>, semblent toutefois affecter légèrement son temps de repos, ce qui pourrait indiquer une priorisation de ses objectifs académiques ou personnels sur le sommeil. En revanche, ses semaines de faible activité coïncident avec des nuits un peu plus longues, suggérant des efforts pour rattraper le repos perdu.
</p>
</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 style="font-size: 0.92em;">
Amira affiche une activité relativement modérée tout au long de l’année, avec des périodes d’effort physique notables comme en <strong>W52 de 2023</strong> et <strong>W8 de 2024</strong>, où elle atteint des distances proches de <strong>30 km par semaine</strong>. Ces pics d'activité peuvent être liés à des événements ponctuels, comme des voyages, des promenades prolongées ou des défis personnels. Cependant, sa moyenne hebdomadaire reste généralement inférieure à celle de certains autres membres du groupe.
</p>
<p style="font-size: 0.92em;">
Concernant le sommeil, Amira se distingue par une constance remarquable, avec des durées de repos généralement supérieures à <strong>6 heures par nuit</strong>. Ce niveau élevé de repos suggère une bonne gestion de son équilibre entre vie personnelle et académique. Les périodes de faible activité physique, comme en <strong>W36 et W48 de 2023</strong>, semblent coïncider avec des phases de repos accru, indiquant une priorisation de son bien-être.
</p>
<p style="font-size: 0.92em;">
Ces tendances soulignent son aptitude à maintenir un mode de vie équilibré, même lors de semaines plus exigeantes.
</p>
<div class="container">
<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/ -->
<br>
Cours Data visualisation <a href="https://lyondataviz.github.io/teaching/lyon1-m2/2024/">Data Viz 2024-2025</a>
<br>
Université Claude Bernard Lyon 1 <a href="https://www.univ-lyon1.fr/">UCBL</a>, Master 2 <a href="http://master-info.univ-lyon1.fr/DS/"> Data Science</a>
<br>
Contactez nous:
<a href="mailto:maya.boudjebbour@etu.univ-lyon1.fr">BOUDJEBBOUR Maya</a>,
<a href="mailto:amira.rabehi@etu.univ-lyon1.fr">RABEHRI Amira</a>,
<a href="mailto:anis.azizi@etu.univ-lyon1.fr">AZIZI Anis</a>,
<a href="mailto:corentin.bohelay@etu.univ-lyon1.fr">BOHELAY Corentin</a>
<br>
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
<div class="copyright">
© Copyright <strong><span>Health Inseight</span></strong>. All Rights Reserved
</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 type="module" src="../static/js/main.js"></script>