BruJu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE 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 = 960,
			h = 100,
			height = nbEtudiants * 12 + 50;
		var m = [20, 15, 15, 120], //top right bottom left
			w = 960 - m[1] - m[3],
			h = 500 - m[0] - m[2],
			miniHeight = nbEtudiants * 12 + 50,
			mainHeight = h - miniHeight - 50;

		var x = d3.scaleLinear()
				.domain([timeBegin, timeEnd])
				.range([0, w]);
		var y1 = d3.scaleLinear()
				.domain([0, nbEtudiants])
				.range([0, mainHeight]);
		var y2 = d3.scaleLinear()
				.domain([0, nbEtudiants])
				.range([0, miniHeight]);

		//Chart
		var chart = d3.select("body")
					.append("svg")
					.attr("width", w + m[1] + m[3])
					.attr("height", h + m[0] + m[2])
					.attr("class", "chart");

		chart.append("defs").append("clipPath")
			.attr("id", "clip")
			.append("rect")
			.attr("width", w)
			.attr("height", mainHeight);

		var main = chart.append("g")
					.attr("transform", "translate(" + m[3] + "," + m[0] + ")")
					.attr("width", w)
					.attr("height", mainHeight)
					.attr("class", "main");

		var mini = chart.append("g")
					.attr("transform", "translate(" + m[3] + "," + (mainHeight + m[0]) + ")")
					.attr("width", w)
					.attr("height", miniHeight)
					.attr("class", "mini");

		//Scale for X axes
		const xScale = d3.scaleBand()
    		.range([0, w])
    		.domain(items.map((s) => s.jour))
    		.padding(0.2)

    chart.append('g')
	    .attr('transform', `translate(${m[3]}, ${miniHeight + 20})`)
	    .call(d3.axisBottom(xScale));

		//main lanes and texts
		main.append("g").selectAll(".laneLines")
			.data(items)
			.enter().append("line")
			.attr("x1", m[1])
			.attr("y1", function(d) {return y2(d.id);})
			.attr("x2", w)
			.attr("y2", function(d) {return y2(d.id);})
			.attr("stroke", "lightgray");

		main.append("g").selectAll(".laneText")
			.data(prenoms)
			.enter().append("text")
			.text(function(d) {return d;})
			.attr("x", -m[1])
			.attr("y", function(d, i) {return y2(i + .5);})
			.attr("dy", ".5ex")
			.attr("text-anchor", "end")
			.attr("class", "laneText");

		//main item rects
		main.append("g").selectAll("mainItems")
			.data(items)
			.enter().append("rect")
			.attr("class", function(d) {return "color" + d.id;})
			.attr("x", function(d) {return x(d.start);})
			.attr("y", function(d) {return y2(d.id + .5) - 5;})
			.attr("width", function(d) {return x(d.end - d.start);})
			.attr("height", 10)
			.on("mouseover", function(d, i) {
      			d3.select(this).style("opacity", 0.2);
				console.log(d3.select(this))
				})
			.on("mouseout", function(d) {
				d3.select(this).transition().duration(500).style("opacity", 1 );
				});;

		</script>
	</body>
</html>
	<!DOCTYPE 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 = 960,
	h = 100,
	height = nbEtudiants * 12 + 50;
	var m = [20, 15, 15, 120], //top right bottom left
	w = 960 - m[1] - m[3],
	h = 500 - m[0] - m[2],
	miniHeight = nbEtudiants * 12 + 50,
	mainHeight = h - miniHeight - 50;

	var x = d3.scaleLinear()
	.domain([timeBegin, timeEnd])
	.range([0, w]);
	var y1 = d3.scaleLinear()
	.domain([0, nbEtudiants])
	.range([0, mainHeight]);
	var y2 = d3.scaleLinear()
	.domain([0, nbEtudiants])
	.range([0, miniHeight]);

	//Chart
	var chart = d3.select("body")
	.append("svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.attr("class", "chart");

	chart.append("defs").append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", w)
	.attr("height", mainHeight);

	var main = chart.append("g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")")
	.attr("width", w)
	.attr("height", mainHeight)
	.attr("class", "main");

	var mini = chart.append("g")
	.attr("transform", "translate(" + m[3] + "," + (mainHeight + m[0]) + ")")
	.attr("width", w)
	.attr("height", miniHeight)
	.attr("class", "mini");

	//Scale for X axes
	const xScale = d3.scaleBand()
	.range([0, w])
	.domain(items.map((s) => s.jour))
	.padding(0.2)

	chart.append('g')
	.attr('transform', `translate(${m[3]}, ${miniHeight + 20})`)
	.call(d3.axisBottom(xScale));

	//main lanes and texts
	main.append("g").selectAll(".laneLines")
	.data(items)
	.enter().append("line")
	.attr("x1", m[1])
	.attr("y1", function(d) {return y2(d.id);})
	.attr("x2", w)
	.attr("y2", function(d) {return y2(d.id);})
	.attr("stroke", "lightgray");

	main.append("g").selectAll(".laneText")
	.data(prenoms)
	.enter().append("text")
	.text(function(d) {return d;})
	.attr("x", -m[1])
	.attr("y", function(d, i) {return y2(i + .5);})
	.attr("dy", ".5ex")
	.attr("text-anchor", "end")
	.attr("class", "laneText");

	//main item rects
	main.append("g").selectAll("mainItems")
	.data(items)
	.enter().append("rect")
	.attr("class", function(d) {return "color" + d.id;})
	.attr("x", function(d) {return x(d.start);})
	.attr("y", function(d) {return y2(d.id + .5) - 5;})
	.attr("width", function(d) {return x(d.end - d.start);})
	.attr("height", 10)
	.on("mouseover", function(d, i) {
	d3.select(this).style("opacity", 0.2);
	console.log(d3.select(this))
	})
	.on("mouseout", function(d) {
	d3.select(this).transition().duration(500).style("opacity", 1 );
	});;

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