Skip to content

Instantly share code, notes, and snippets.

@BruJu
Created Nov 20, 2019
Embed
What would you like to do?
fresh block
license: mit
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment