import {vl} from '@vega/vega-lite-api-v5'
grades = FileAttachment("a3-grades-updated.csv").csv({typed: true})
vl.markErrorbar()
.data(grades)
.encode(
vl.y().field("TA"),
vl.x().fieldQ("Grades")
)
.title("Grade distributiion of A3 - CSE 442 Fall 2023")
.width(600)
.height(300)
.render()
g = FileAttachment("453.csv").csv({typed: true})
{
const a = vl.markLine({point: true})
.data(g)
.encode(
vl.y().fieldQ("Utilization").title("Frontend Utilization").axis({"titleColor": "steelblue"}),
vl.x().fieldQ("Load Rate").title("Load (req/sec)")
)
const b = vl.markLine({color: "green", point: true})
.data(g)
.transform(
vl.filter('datum["Load Rate"] <= 8000')
)
.encode(
vl.y().fieldQ("Client Response Time (ms)").axis({"titleColor": "green"}),
vl.x().fieldQ("Load Rate").scale({"domain": [0, 9000]})
)
const rule = vl.markRule({strokeDash: [4, 2]})
.data(g)
.encode(
vl.y().datum(1).scale({domain: [0.0, 1.4]}).axis({labels:false, ticks:false, grid:false})
)
return vl.layer(a, b, rule)
.resolve({"scale": {"y": "independent"}})
.title("Frontend Utilization and Client Response Time for different Load")
.width(400)
.height(300)
.render()
}
d = FileAttachment("453-a2.csv").csv({typed: true})
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.
