Public
Edited
May 23
Insert cell
Insert cell
Insert cell
fdata
X
LearningMeasure
Y
Color
Gender
Size
Facet X
Facet Y
Treatment
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
color: { legend: true },
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.ruleY([0]),
Plot.lineY(
fdata,
Plot.binX(
{ y: "count" },
{ fy: "Treatment", x: "LearningMeasure", stroke: "Gender", tip: true }
)
)
]
})
Insert cell
Plot.plot({
color: { legend: true },
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.rectY(
fdata,
Plot.binX(
{ y: "count" },
{
fx: "Gender",
fy: "Treatment",
x: {value: "Grade",
thresholds: [0, 0.32, 0.66, 1.0, 1.32, 1.66, 2.0, 2.32, 2.66, 3, 3.32, 3.66, 4, 4.32, 4.66]},
fill: "Treatment",
tip: true
}
)
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
//rawcsv = d3.csv("https://datadryad.org/stash/downloads/file_stream/2526090").then( d => d)
function convertGrade(grade) {
const gradeConversion = {
"A+": 4.33,
"A": 4.00,
"A-": 3.67,
"B+": 3.33,
"B": 3.00,
"B-": 2.67,
"C+": 2.33,
"C": 2.00,
"C-": 1.67,
"D+": 1.33,
"D": 1.00,
"D-": 0.67,
"F": 0,
"OF": 0, // Assuming 'OF' is a failing grade
"DR": null, // Assuming 'DR' means 'Drop'
"NA": null, // Not available or not applicable
};
return grade in gradeConversion? gradeConversion[grade] : grade; // Return original grade if not in the conversion table
};

Insert cell
rawcsv = FileAttachment("anonymizedarchive.csv").csv()
Insert cell
csv2 = rawcsv.map((d) => ({
...d,
MBS: +d.MBS, // parse to value
LearningMeasure: +d.LearningMeasure,
Grade: convertGrade(d.Grade)
}));
Insert cell
fdata = csv2.filter( (d) => d.TrialStatus == "Completer" )
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more