Public
Edited
Jan 22, 2023
TP2 - Observable Plot
...
Contexte de travail
Nous démarrons d'un échantillon des données présenté dans l'énoncé du travail.
Chacune des lignes du jeu de données est une séance programmée pour un groupe de TD ou un cours. Le jeu de données couvre un semestre de cours d'une matière divisée en 3 AF.
Origine des données
Les données ont été fournies par sous forme de fichier csv.
raw = FileAttachment("edt-matiere.csv").csv()
Inputs.table(raw)
d3.group(raw, d => d["Code Cours"])
d3.group(raw, d => d["Groupe(s)"])
date_min_max = {
return [d3.min(data, d=>d.Date), d3.max(data, d=>d.Date)]
}
data = {
let pDate = d3.timeParse("%m/%d/%Y");
let mDate = d3.timeFormat("%m"); // mois de l'annee
let wDate = d3.timeFormat("%V"); // semaine de l'annee
let jDate = d3.timeFormat("%j"); // jour de l'année
return raw.map(d => {
d.Date = pDate(d["Date"])
let h_df = d["Heure"].split("-")
d.h_debut = h_df[0].trim()
d.h_fin = h_df[1].trim()
d["Num séance"] = +d["Num séance"]
d.Week = wDate(d.Date)
d.JourAnnee = jDate(d.Date)
d.Month = mDate(d.Date)
return d
})
}
Plot.plot({
inset: 0,
grid: true,
x:{
nice: true,
type: "linear",
domain: [
d3.min(alldatacumul2, d=>d.groupedBy),
d3.max(alldatacumul2, d=>d.groupedBy)
],
// ticks: radios.ticks,
ticks: d3.min([alldatacumul2.length*2, 30]),
label: radios == null ? "Jour" : radios.name,
},
y:{
line: true,
nice: true,
},
marks:[
Plot.ruleY([0]),
Plot.ruleX([date_min_max[0]]),
Plot.line(alldatacumul2, {x: "groupedBy", y: "C"})
],
height: 500,
width : 800,
marginLeft: 100,
})
alldatacumul2 = {
let v = radios == null ? "JourAnnee" : radios.v;
return datacumul(datamap_cumul(data, v), "Cumul_scs", "C")
}
Petite Annexe de l'exercice
J'avais procédé au début en sommant les numéros de séance sans regroupements par éléments de date.
J'aimerai garder ce Plot car il est différent de ceux qu'on peut voir plus haut, j'utilise également le formatage UTC (par jour) de l'échelle temporelle.
Inputs.table(alldatacumul)
Plot.plot({
grid: true,
x: {nice: true},
inset: 2,
facet: {
data: alldatacumul,
y: select_facette_1,
marginRight: 130
},
marks:[
Plot.ruleY([0]),
Plot.ruleX([date_min_max[0]]),
Plot.line(alldatacumul, {x: "Date", y: "cumul_scs"})
],
// height: 500,
width : 800,
marginLeft: 100,
})
Plot.plot({
grid: true,
x: {nice: true},
inset: 2,
marks:[
Plot.dot(selectdata, {
x: "Date",
y: "Groupe(s)",
stroke: "Code Cours",
symbol: "Code Cours",
}),
],
height: 330,
width : 800,
marginLeft: 100,
})
selectdata = {
let filter1 = select_2_par
let filter2 = select_2_sub
if(filter2.length === 0)
return data
let group = d3.group(data, d => d[filter1])
let len = filter2.length
let m = new Array()
for(let f=0; f<len; f++)
m.push(group.get(filter2[f]))
return m.flat()
}
data
data_week = {
let res = data
let wDate = d3.timeFormat("%U");
let group = d3.map(res, d=>{
d.Week = wDate(d.Date)
return d
})
group = d3.group(group, d => d.Week)
return Array.from(group.values()).flat()
}
Plot.plot({
grid: true,
color:{
legend: true,
scheme: "blues"
},
x: {
nice: true,
label: "Semaine",
labelAnchor: "right",
line: false,
},
y: {
line: false,
nice : true,
label: "Créneau horraire"
},
inset: 10,
marks:[
Plot.ruleY(["18:00"], {margin:0, stroke:"gray"}),
Plot.tickX(data_week, {
x: "Week",
y: "Heure",
stroke: "Num séance",
strokeWidth: 40,
}),
],
height: 500,
width : 1000,
marginLeft: 100,
})
groupes = d3.group(data, d => d["Groupe(s)"])
Plot.plot({
x:{
grid: true,
nice: true,
},
y:{
line: true,
},
color:{
legend: true,
},
marks:[
Plot.barX(data, Plot.groupY({x: "count"}, {y: "Groupe(s)", fill:"Code Cours"})),
],
facet: {
data: data,
y: "h_debut"
},
caption : "Distribution de chacun des créneaux pour chaque groupe.",
marginLeft: 60,
maginBottom: 40,
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.