pierreelliott/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from aurelient's block: TP2 Dataviz 2019-2020

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
		<style type="text/css">
      .mini text {
        font: 9px sans-serif;
      }

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

      .color1 {
        fill: darkgreen;
        fill-opacity: .7;
        stroke-width: 6;
      }

      .color2 {
        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; //5 jours * 24h * 10
		</script>
		<script type="text/javascript">
			w = window.innerWidth,
			h = 120,
			height = nbEtudiants * 2 + 5,
      textOffset = 70,
      topOffset = 10;

			// scales
      var x = d3.scaleLinear().range([0, w - textOffset - 10]).domain([0, timeEnd]);
      var y = d3.scaleLinear().range([0, h - topOffset]).domain([0, nbEtudiants + 1]);

			// chart
			var g = d3.select("body")
			      .append("svg")
			      .attr("width", w)
			      .attr("height", h)
			      .attr("class", "chart");

      drawHorizontalLine(0, w, 1, "lightgrey");

    g.selectAll("text").data(prenoms).enter().append("text")
      .text(function(d) { return d; })
      .attr("x", 0)
      .attr("y", function(d, i) { return topOffset + y(i) + height; })
      .style("font-size", 12)
    	.style("text-anchor", "right")
      .style("font-family", "monospace");

      // draw rectangles per item
    g.selectAll("rect").data(items).enter().append("rect")
    	.attr("x", function(d, i) { return textOffset + x(d.start); })
    	.attr("y", function(d) { return topOffset + y(d.id); })
    	.attr("height", height)
			.attr("width", (d, i) => { return x(d.end - d.start) } )
      .attr("class", (d, i) => { return d.id === 0 ? "color0" : d.id === 1 ? "color1" : "color2"; })
    // color change on hovering rectangles
    	.on("mouseover", function(d) {
        var elem = d3.select(this);
      	console.warn(!elem.attr("clicked"));
//       	if(!elem.attr("clicked")) {
        	elem.style("fill", d3.rgb(elem.style("fill")).darker(0.5));
//         }
    	})
    	.on("mouseout", function(d) {
        var elem = d3.select(this);
      	console.warn(!elem.attr("clicked"));
//       	if(!elem.attr("clicked")) {
        	elem.style("fill", d3.rgb(elem.style("fill")).brighter(0.5));
//         }
    	})
    	.on("click", function(d) {
      // FIXME Doesn't work as intended -> Should freeze rect color
      	var elem = d3.select(this);
      	console.warn("Clicked!", !elem.attr("clicked"));
        elem.attr("clicked", !elem.attr("clicked"));
    	});

    var jours = items.filter(elem => elem.id === 0).map(elem => elem.jour);

    jours.forEach((jour, i) => {
      drawVerticalLine(x(timeEnd/5*i) + textOffset, 1, h - y(1) - height/2, "lightgrey")
    })

    jours.map((d, i) => {
      g.append("text")
      .text(d)
    	.attr("x",  textOffset + x(timeEnd/5 * i))
    	.attr("y", topOffset + height/2 + y(nbEtudiants))
      .style("font-size", 12)
    	.style("text-anchor", "right")
      .style("font-family", "monospace");
    });

      function drawLine(x1, y1, x2, y2, color = "black", style = "stroke") {
        g.append("line").style(style, color)
      	.attr("x1", x1).attr("y1", y1)
      	.attr("x2", x2).attr("y2", y2);
      }

      function drawHorizontalLine(x1, x2, y, color = "black", style = "stroke") {
        drawLine(x1, y, x2, y, color, style);
      }

      function drawVerticalLine(x, y1, y2, color = "black", style = "stroke") {
        drawLine(x, y1, x, y2, color, style);
      }

		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style type="text/css">
	.mini text {
	font: 9px sans-serif;
	}

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

	.color1 {
	fill: darkgreen;
	fill-opacity: .7;
	stroke-width: 6;
	}

	.color2 {
	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; //5 jours * 24h * 10
	</script>
	<script type="text/javascript">
	w = window.innerWidth,
	h = 120,
	height = nbEtudiants * 2 + 5,
	textOffset = 70,
	topOffset = 10;

	// scales
	var x = d3.scaleLinear().range([0, w - textOffset - 10]).domain([0, timeEnd]);
	var y = d3.scaleLinear().range([0, h - topOffset]).domain([0, nbEtudiants + 1]);

	// chart
	var g = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	.attr("class", "chart");

	drawHorizontalLine(0, w, 1, "lightgrey");

	g.selectAll("text").data(prenoms).enter().append("text")
	.text(function(d) { return d; })
	.attr("x", 0)
	.attr("y", function(d, i) { return topOffset + y(i) + height; })
	.style("font-size", 12)
	.style("text-anchor", "right")
	.style("font-family", "monospace");

	// draw rectangles per item
	g.selectAll("rect").data(items).enter().append("rect")
	.attr("x", function(d, i) { return textOffset + x(d.start); })
	.attr("y", function(d) { return topOffset + y(d.id); })
	.attr("height", height)
	.attr("width", (d, i) => { return x(d.end - d.start) } )
	.attr("class", (d, i) => { return d.id === 0 ? "color0" : d.id === 1 ? "color1" : "color2"; })
	// color change on hovering rectangles
	.on("mouseover", function(d) {
	var elem = d3.select(this);
	console.warn(!elem.attr("clicked"));
	// if(!elem.attr("clicked")) {
	elem.style("fill", d3.rgb(elem.style("fill")).darker(0.5));
	// }
	})
	.on("mouseout", function(d) {
	var elem = d3.select(this);
	console.warn(!elem.attr("clicked"));
	// if(!elem.attr("clicked")) {
	elem.style("fill", d3.rgb(elem.style("fill")).brighter(0.5));
	// }
	})
	.on("click", function(d) {
	// FIXME Doesn't work as intended -> Should freeze rect color
	var elem = d3.select(this);
	console.warn("Clicked!", !elem.attr("clicked"));
	elem.attr("clicked", !elem.attr("clicked"));
	});

	var jours = items.filter(elem => elem.id === 0).map(elem => elem.jour);

	jours.forEach((jour, i) => {
	drawVerticalLine(x(timeEnd/5*i) + textOffset, 1, h - y(1) - height/2, "lightgrey")
	})

	jours.map((d, i) => {
	g.append("text")
	.text(d)
	.attr("x", textOffset + x(timeEnd/5 * i))
	.attr("y", topOffset + height/2 + y(nbEtudiants))
	.style("font-size", 12)
	.style("text-anchor", "right")
	.style("font-family", "monospace");
	});

	function drawLine(x1, y1, x2, y2, color = "black", style = "stroke") {
	g.append("line").style(style, color)
	.attr("x1", x1).attr("y1", y1)
	.attr("x2", x2).attr("y2", y2);
	}

	function drawHorizontalLine(x1, x2, y, color = "black", style = "stroke") {
	drawLine(x1, y, x2, y, color, style);
	}

	function drawVerticalLine(x, y1, y2, color = "black", style = "stroke") {
	drawLine(x, y1, x, y2, color, style);
	}

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