Dynamic update to y-axis of a zoomable area chart - d3.js

Question

On zoom and pan the y-axis isn't updated to the maximum value in the visible zoomed dataset e.g. when the max value is 3500 the y axis still has ticks for 3500, 4000, 4500, 5000 & 5500 which restricts the display. Can the new max value for the filtered data be more accurately updated?
const height = 400,
width = 800;
const margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
};
const parser = d3.timeParse("%Y-%m-%d");
const url = "https://static.observableusercontent.com/files/4e532df03705fa504e8f95c1ab1c114ca9e89546bf14d697c73a10f72028aafd9eb3d6ea2d87bb6b421d9707781b8ac70c2bf905ccd60664f9e452a775fe50ed?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Book1%25401.csv";
d3.csv(url, function(d) {
return {
date: parser(d.date),
value: +d.value
};
}).then(function(data) {
const x = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right]),
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height - margin.bottom, margin.top]),
xAxis = (g, x) => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)),
yAxis = (g, y) => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(5))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y)),
area = (data, x) => d3.area()
.curve(d3.curveStepAfter)
.x(d => x(d.date))
.y0(y(0))
.y1(d => y(d.value))
(data)
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.select("svg")
.attr("width", width)
.attr("height", height);
svg.append("clipPath")
.attr("id", "myclip")
.append("rect")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom);
const path = svg.append("path")
.attr("clip-path", "url('#myclip')")
.attr("fill", "steelblue")
.attr("d", area(data, x));
const gx = svg.append("g")
.call(xAxis, x);
const gy = svg.append("g")
.call(yAxis, y);
svg.call(zoom)
.transition()
.duration(750)
.call(zoom.scaleTo, 1, [x(Date.UTC(2020, 8, 1)), 0]);
function zoomed(event) {
const xz = event.transform.rescaleX(x);
const yz = event.transform.rescaleY(y);
path.attr("d", area(data, xz));
gx.call(xAxis, xz);
gy.call(yAxis, yz);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>
<svg></svg>

Answer 1

TLDR
Y scale's domain contains still max value from whole dataset. Update the domain of the y scale to the max value of the currently visible dataset, by filtering it first by the rescaled x scales' domain.
Long version
I guess, your chart should only zoom in the X direction. Under this assumption, you need to implement an auto scaling for the y axis yourself. The current problem is, that your y scale's domain contains the min and max values of your whole data set. Now that you have zoomed the max value might be smaller.
So, what you need to do is, get the domain of the rescaled x scale domain. Use that domain to filter your dataset for that time range and then pick the max value out of that time range filtered subset. Then you update the domain for your y scale with that new max value and rerender. By the way, rescaling the y scale is not necessary, if you only want to do zoom on the x axis.
// global cache for the data
const data;
function zoomed(event) {
const xz = event.transform.rescaleX(x);
const [minX, maxX] = xz.domain();
const filteredData = data.filter((item) => item.date >= minX && item.date <= maxX);
y.domain([0, d3.max(filteredData, d => d.value)]);
const yz = event.transform.rescaleY(y);
path.attr("d", area(data, xz));
gx.call(xAxis, xz);
gy.call(yAxis, yz);
}

Answer 2

Thanks for guidance: https://observablehq.com/#steve-pegg/zoomable-area-chart
Changes below have worked.
function zoomed(event) {
var xz = event.transform.rescaleX(x);
var startDate = xz.domain()[0];
var endDate = xz.domain()[1];
var fData = data.filter(function (d) {
var date = new Date(d.date);
return (date >= startDate && date <= endDate);});
y.domain([0, d3.max(fData, function (d) { return d.value; })]);
path.attr("d", area(data, xz));
gx.call(xAxis, xz);
gy.call(yAxis, y);
}