Skip to content

Instantly share code, notes, and snippets.

@aurelient

aurelient/.block

Last active November 14, 2019 00:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aurelient/0d6f5cc4607279fe01e7ea048d2cb046 to your computer and use it in GitHub Desktop.
Save aurelient/0d6f5cc4607279fe01e7ea048d2cb046 to your computer and use it in GitHub Desktop.
Download ZIP
TP2 Dataviz 2019-2020
Raw
.block
license: mit
Raw
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;
// TODO scales
// chart
var chart = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("class", "chart");
// TODO draw 1 lane per student
// TODO draw 1 line per day
// TODO draw rectangles per item
// TODO color change on hovering rectangles
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment