I am trying to understand the Zoomable Area Chart so that I can build one in regular javascript / d3.
The line const clip = DOM.uid(“clip”); apparently (according to https://github.com/observablehq/stdlib/blob/master/README.md#dom) creates a unique identifier which seemingly has an id within in.
How do I do this in a non observable world?
chart = {
const zoom = d3.zoom()
.scaleExtent([1, 32])
.extent([[margin.left, 0], [width - margin.right, height]])
.translateExtent([[margin.left, -Infinity], [width - margin.right, Infinity]])
.on(“zoom”, zoomed);
const svg = d3.create(“svg”)
.attr(“viewBox”, [0, 0, width, height]);
const clip = DOM.uid(“clip”);
svg.append(“clipPath”)
.attr(“id”, clip.id)
.append(“rect”)
.attr(“x”, margin.left)
.attr(“y”, margin.top)
.attr(“width”, width - margin.left - margin.right)
.attr(“height”, height - margin.top - margin.bottom);
does.
Could someone help explain? Also, is Infinity an Observable term?
Thanks,
Chris.