Public
Edited
Jun 30
1 fork
Insert cell
import {vl} from "@vega/vega-lite-api"
Insert cell
import {Select} from "@observablehq/inputs"
Insert cell
import {fromColumns, printTable} from "@uwdata/data-utilities"
Insert cell
student = FileAttachment("StudentPerformanceFactors@1.csv").csv()

Insert cell
printTable(student.slice(0, 10))
Insert cell
viewof boxPlot = vl.markBoxplot()
.data(student)
.encode(
vl.x().fieldQ("Hours_Studied").bin(true).title("Hours Studied (Binned)"),
vl.y().fieldQ("Exam_Score").title("Exam Score"),
vl.color().value("steelblue")
)
.width(500)
.height(400)
.render();
Insert cell
viewof selectedField = Inputs.select(
["None", "Gender", "Extracurricular_Activities", "Parental_Education_Level", "Motivation_Level", "Internet_Access", "School_Type", "Learning_Disabilities"],
{ label: "Filter by Field" }
)

Insert cell
viewof selectedValue = selectedField === "None"
? Inputs.select(["All"], { label: "Choose Value" })
: Inputs.select(
["All", ...Array.from(new Set(student.map(d => d[selectedField])))],
{ label: `Choose ${selectedField} value` }
)

Insert cell
vl.markCircle()
.data(
student.filter(d =>
selectedField === "None" ||
selectedValue === "All" ||
d[selectedField] === selectedValue
)
)
.encode(
vl.x().fieldQ("Hours_Studied").title("Hours Studied"),
vl.y().fieldQ("Exam_Score").title("Exam Score"),
vl.tooltip([
"Hours_Studied",
"Exam_Score",
"Gender",
"Motivation_Level",
"Extracurricular_Activities",
"Parental_Education_Level",
"Sleep_Hours"
])
)
.width(500)
.height(400)
.render();
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