viewof test2 = brushFilterX([d3.utcYear.offset(d3.utcDay(), -5), d3.utcDay()], {
defaultExtent: [ d3.utcParse("%Y-%m-%d")("2021-01-01"), d3.utcParse("%Y-%m-%d")("2021-03-01") ],
width: 640
})
test2
width
brushFilterX = function(extent, {
defaultExtent,
marginTop = 10,
marginRight = 20,
marginBottom = 20,
marginLeft = 30,
width = 1200,
height = 50
} = {}) {
const x = d3.scaleTime()
.domain(extent)
.range([marginLeft, width - marginRight])
const xAxis = g => g
.attr("transform", `translate(0,${height - marginBottom +1})`)
.call(d3.axisBottom(x).ticks(width < 710 ? 6 : 10))
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
svg
.selectAll("text")
//.data(["brush to", "filter"])
.join("text")
.text(d => d)
.style("font-size", 10)
.style("font-family", "sans-serif")
.attr("dx", 10)
.attr("dy", (d, i) => marginTop +10 + i * 10)
const brush = d3
.brushX()
.extent([
[marginLeft, marginTop],
[width - marginRight, height - marginBottom]
])
.on("brush end", brushed);
svg.append("g").call(xAxis);
let b = svg
.append("g")
.call(brush)
if(defaultExtent)
b.call(brush.move, defaultExtent.map(x))
function brushed(event) {
svg.node().value = event.selection === null ? null :event.selection.map(x.invert);
svg.node().dispatchEvent(new Event("input", { bubbles: true }));
const selection = event.selection;
}
svg.node().value = defaultExtent ? defaultExtent : null
return svg.node();
}
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.
