I work on explorable explanations, gamedev tutorials, and gamedev tools.
viewof u_outline = Inputs.range([0, 1], {step: 0.01, label: "outline"})
Plot.plot({
y: {grid: true},
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {x: "d", y: "opacity", z: "z", Stroke: "z"}),
Plot.text(data, Plot.selectLast({x: "d", y: "opacity", z: "z", text: "z", textAnchor: "start", dx: 3}))
]
})
data = {
function clamp(x, lo, hi) { return x < lo ? lo : x > hi ? hi : x; }
let width = 3.0
let u_in_bias = 0.0
let u_out_bias = 0.0
let data = []
for (let d = 0.0; d < 1.0; d += 0.01) {
let inner = width * (d - 0.5 + u_in_bias ) + 0.5 + u_out_bias
let outer = width * (d - 0.5 + u_in_bias + u_outline) + 0.5 + u_out_bias
data.push({d, opacity: clamp(inner, 0, 1), z: "inner"}, {d, opacity: clamp(outer, 0, 1), z: "outer"})
}
return data
}
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.
