md`# College Ranker`
data = FileAttachment("college_ranker_normalized.json").json()
d3 = require("d3@6", "d3-simple-slider@1")
d3
viewof slider = {
const slider = d3.sliderBottom()
.min(0)
.max(100)
.width(300)
.ticks(3)
.tickFormat(d3.format("1"))
.on("onchange", () => svg.dispatch("input"));
const svg = d3.create("svg")
.attr("viewBox", [-20, -20, 340, 60])
.attr("width", 340)
.attr("height", 60)
.call(slider);
return Object.defineProperty(
svg.node(),
"value",
{get: () => slider.value()}
);
}
slider
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.
