Correction TP2 2019

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
		.chart {
			shape-rendering: crispEdges;
		}

.mini text {
			font: 9px sans-serif;	
		}

.miniItem0 {
			fill: darksalmon;
			stroke-width: 6;	
		}

.miniItem1 {
			fill: darkolivegreen;
			fill-opacity: .7;
			stroke-width: 6;	
		}

.miniItem2 {
			fill: slategray;
			fill-opacity: .7;
			stroke-width: 6;	
		}

</style>
	</head>
	<body>
		<script type="text/javascript">
		//data
		var prenoms = ["Etudiant1","Etudiant2","Etudiant3"],
			nbEtudiants = prenoms.length,
			items = [
          {"id": 0, "jour": "lundi", "start": 0, "end": 70},
					{"id": 0, "jour": "mardi", "start": 230, "end": 350},
					{"id": 0, "jour": "mercredi", "start": 485, "end": 600},
					{"id": 0, "jour": "jeudi", "start": 670, "end": 800},
					{"id": 0, "jour": "vendredi", "start": 880, "end": 1000},
					{"id": 1, "jour": "lundi", "start": 0, "end": 120},
					{"id": 1, "jour": "mardi", "start": 250, "end": 400},
					{"id": 1, "jour": "mercredi", "start": 500, "end": 600},
					{"id": 1, "jour": "jeudi", "start": 700, "end": 850},
					{"id": 1, "jour": "vendredi", "start": 1000, "end": 1110},
					{"id": 2, "jour": "lundi", "start": 0, "end": 60},
					{"id": 2, "jour": "mardi", "start": 230, "end": 400},
					{"id": 2, "jour": "mercredi", "start": 440, "end": 600},
					{"id": 2, "jour": "jeudi", "start": 690, "end": 800},
					{"id": 2, "jour": "vendredi", "start": 920, "end": 1200}
      ]
			timeBegin = 0,
			timeEnd = 1200;
		</script>
		<script type="text/javascript">
			w = 960,
			h = 120,
			height = nbEtudiants * 12 + 60;

// On cree nos deux echelles
    // En x la dimension est le temps, entre timeBegin (0) et timeEnd (1200)
    // On aurait pu calculer cela à partir de la valeur "start" la plus faible et la valeur "end" la plus haute.
		let x = d3.scaleLinear()
				.domain([timeBegin, timeEnd])
				.range([0, w]);
		let y = d3.scaleLinear()
				.domain([0, nbEtudiants])
				.range([0, height]);

//on cree l'élément svg dans le html
		let chart = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h)
					.attr("class", "chart");	
      
		// On positionne les lignes horizontales (optionnel)
//		chart.append("g").selectAll(".laneLines")
//			.data(prenoms)
//			.enter().append("line")
//			.attr("x1", 15)
//			.attr("y1", function(d,i) {return y(i+1);})
//			.attr("x2", w)
//			.attr("y2", function(d,i) {return y(i+1);})
//			.attr("stroke", "lightgray");

// On positionne les noms des étudiants
		chart.append("g").selectAll(".laneText")
			.data(prenoms)
			.enter().append("text")	
			.text(function(d) {return d;}) 
			.attr("x", 65)
			.attr("y", function(d, i) {return y(i + .5);})
			.attr("dy", ".5ex")
			.attr("text-anchor", "end") 
			.attr("class", "laneText");

// On dessine les rectangles
		chart.append("g").selectAll("miniItems")
			.data(items)
			.enter().append("rect")
			.attr("class", function(d) {return "miniItem" + d.id;})
			.attr("x", function(d) {return x(d.start) + 70;})
			.attr("y", function(d) {return y(d.id + .5) - 5;})
			.attr("width", function(d) {return x(d.end - d.start);})
			.attr("height", 10)
    	// on colore en rouge en cas de hover, avec une transition rapide
    	.on("mouseover", function(d, i) {
      	d3.select(this).transition().duration(200).style("fill", "red");      
    	})
    	// en sortant de l'élément on remet le style à 0. 
    	// Le style déjà défini dans le CSS sera appliqué
      .on("mouseout", function(d, i) {
      	d3.select(this).style("fill", "");      
    	});
      
		// On crée la légende horizontale 
		let minilabels = chart.append("g").selectAll(".labels")
			.data(items)
    
    // On affiche et positionne les jours de la semaine
		minilabels.enter()
    	// on utilise filter() pour ne traiter que les 5 premiers jours
    	// et ne pas afficher 15 fois les jours de la semaine.
      .filter(function(d) { if (d.id==0) return d}) 
      .append("text")
			.text(function(d) { return d.jour;})
	    .attr("x", function(d,i) {return x(timeEnd/5*i) + 70;})
      .attr("y", function(d) {return h-10;})
			.attr("dy", ".5ex");

// On affiche et positionne les lignes verticales
		minilabels.enter().append("line")
    	// on utilise filter pour n'affiche les jours de la semaine qu'une seule fois
      .filter(function(d) { if (d.id==0) return d}) 
      .attr("x1", function(d,i) {return x(timeEnd/5*i) + 70;})
			.attr("y1", function(d) {return 0})
	    .attr("x2", function(d,i) {return x(timeEnd/5*i) + 70;})
			.attr("y2", function(d) {return h-20})
			.attr("stroke", "lightgray");

</script>
	</body>
</html>

https://d3js.org/d3.v4.min.js