Skip to content
Snippets Groups Projects
Commit dd85d349 authored by BOUDJEBBOUR MAYA p2312048's avatar BOUDJEBBOUR MAYA p2312048
Browse files

Ajout Visu comparaison de sommeil

parent 8b02db1a
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Visu/index.html 0 → 100644
+ 40
− 0
View file @ dd85d349
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analyse des Cycles de Sommeil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Comparaison des Cycles de Sommeil</h1>
<!-- Sélecteur d'année -->
<label for="yearSelect">Choisissez l'année:</label>
<select id="yearSelect">
<option value="2024">2024</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<!-- Vous pouvez ajouter d'autres années si nécessaire -->
</select>
<!-- Sélecteur de membre -->
<label for="memberSelect">Choisissez un membre:</label>
<select id="memberSelect">
<option value="all">Tous les membres</option>
<option value="Anis">Anis</option>
<option value="Maya">Maya</option>
<option value="Corentin">Corentin</option>
<option value="Amira">Amira</option>
</select>
<!-- Espace pour le graphique -->
<svg id="chart"></svg>
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Visu/script.js 0 → 100644
+ 149
− 0
View file @ dd85d349
d3.json("sleep_combined_clean.json").then(function(data) {
// Fonction pour filtrer les mois en fonction de l'année sélectionnée
function getMonthsForYear(year) {
return d3.timeMonths(new Date(year + "-01-01"), new Date(year + "-12-31"));
}
// Parsing des dates et tri des données par mois
data.forEach(d => {
d.date = d3.timeParse("%Y-%m-%d")(d.date);
d.month = d3.timeMonth(d.date); // Utilisation de d3.timeMonth pour grouper par mois
});
// Création du groupe pour chaque membre
var members = ["Anis", "Maya", "Corentin", "Amira"];
// Fonction de mise à jour du graphique en fonction de l'année et du membre sélectionné
function updateChart(selectedYear, selectedMember) {
const monthsForYear = getMonthsForYear(selectedYear);
// Filtrage des données par mois
var groupedData = d3.group(data, d => d.month); // Utilisation de d3.group pour le groupement par mois
// Transformation des données en format plus approprié pour la visualisation
var nestedData = monthsForYear.map(month => {
const valuesForMonth = groupedData.get(month) || []; // Données filtrées pour le mois
return {
month: month,
values: members.map(member => {
const memberData = valuesForMonth.filter(d => d[member] !== null);
const avgValue = memberData.length > 0 ? d3.mean(memberData, v => v[member]) : 0;
return {
member: member,
value: avgValue // Valeur calculée pour ce membre
};
})
};
});
// Dimensions du graphique
var width = 800, height = 400;
var margin = {top: 20, right: 30, bottom: 60, left: 60}; // Ajuster les marges pour les axes
// Création de l'échelle des X et Y
var x = d3.scaleBand()
.domain(monthsForYear) // Utiliser les mois de l'année sélectionnée
.range([margin.left, width - margin.right])
.padding(0.1);
var y = d3.scaleLinear()
.domain([0, d3.max(nestedData, d => d3.max(d.values, v => v.value))])
.nice()
.range([height - margin.bottom, margin.top]);
// Création de l'échelle des couleurs pour chaque membre
var color = d3.scaleOrdinal()
.domain(members)
.range(["#ff6347", "#4682b4", "#32cd32", "#ff1493"]); // Couleurs différentes pour chaque membre
// Création du SVG pour le graphique
var svg = d3.select("#chart")
.attr("width", width)
.attr("height", height);
// Nettoyer le SVG avant de redessiner
svg.selectAll("*").remove();
// Ajouter l'axe X
svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%B"))) // Affichage des mois
.selectAll("text")
.style("text-anchor", "middle")
.style("font-size", "12px")
.attr("transform", "rotate(-45)")
.attr("dx", "-0.8em")
.attr("dy", "0.15em");
// Ajouter l'axe Y
svg.append("g")
.attr("transform", "translate(" + margin.left + ",0)")
.call(d3.axisLeft(y));
// Créer le tooltip
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background-color", "rgba(0, 0, 0, 0.7)")
.style("color", "white")
.style("padding", "5px")
.style("border-radius", "5px")
.style("pointer-events", "none");
// Dessiner les barres pour chaque mois et chaque membre
svg.append("g")
.selectAll("g")
.data(nestedData)
.enter().append("g")
.attr("transform", d => "translate(" + x(d.month) + ",0)")
.selectAll("rect")
.data(d => {
if (selectedMember === "all") {
return d.values; // Affiche tous les membres
} else {
return d.values.filter(v => v.member === selectedMember); // Affiche seulement le membre sélectionné
}
})
.enter().append("rect")
.attr("x", (d, i) => i * (x.bandwidth() / 4)) // Chaque membre reçoit une portion de la bande
.attr("y", d => y(d.value))
.attr("width", x.bandwidth() / 4) // Largeur des barres
.attr("height", d => height - margin.bottom - y(d.value))
.attr("fill", d => color(d.member))
.append("title")
.text(d => d.member + ": " + d.value.toFixed(2) + " heures")
.on("mouseover", function(event, d) {
// Afficher le tooltip lors du survol
tooltip.style("visibility", "visible")
.text(d.member + ": " + d.value.toFixed(2) + " heures");
})
.on("mousemove", function(event) {
// Déplacer le tooltip avec la souris
tooltip.style("top", (event.pageY + 5) + "px")
.style("left", (event.pageX + 5) + "px");
})
.on("mouseout", function() {
// Cacher le tooltip lorsqu'on arrête de survoler
tooltip.style("visibility", "hidden");
});
}
// Initialiser avec 2024 et tous les membres
updateChart(2024, "all");
// Mettre à jour le graphique lorsque l'utilisateur change l'année ou le membre
d3.select("#yearSelect").on("change", function() {
const selectedYear = this.value;
const selectedMember = d3.select("#memberSelect").node().value;
updateChart(selectedYear, selectedMember); // Redessiner le graphique avec la nouvelle année
});
// Mettre à jour le graphique lorsque l'utilisateur change la sélection du membre
d3.select("#memberSelect").on("change", function() {
const selectedMember = this.value;
const selectedYear = d3.select("#yearSelect").node().value;
updateChart(selectedYear, selectedMember); // Redessiner le graphique avec le membre sélectionné
});
});
Visu/sleep_combined_clean.json 0 → 100644
+ 1
− 0
View file @ dd85d349
This diff is collapsed.
Visu/style.css 0 → 100644
+ 35
− 0
View file @ dd85d349
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
width: 80%;
margin: 0 auto;
padding-top: 20px;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
#chart {
width: 100%;
height: 500px;
}
.tooltip {
position: absolute;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
border-radius: 5px;
pointer-events: none;
font-size: 14px;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment