Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
time
viewof time = {
const slider = d3.sliderBottom()
.min(d3.min(times))
.max(d3.max(times))
.marks(times)
.width(300)
.tickFormat(d3.utcFormat("%Y"))
.tickValues(times)
.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()}
);
}
times = d3.utcYears(Date.UTC(2012, 0, 1), Date.UTC(2022, 0, 1))
d3 = require.alias({
"d3-array": "d3@5",
"d3-axis": "d3@5",
"d3-dispatch": "d3@5",
"d3-drag": "d3@5",
"d3-ease": "d3@5",
"d3-scale": "d3@5",
"d3-selection": "d3@5",
"d3-transition": "d3@5"
})("d3@5", "d3-simple-slider@1")
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.
