Built with blockbuilder.org
Created
November 27, 2019 16:28
-
-
Save aurelient/f6901806e5fd71328d1e0ff125f3b31b to your computer and use it in GitHub Desktop.
Correction TP2 2019
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment