chart = {
const totalWidth = width * 6;
const height = 420;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 30;
const x = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([marginLeft, totalWidth - marginRight]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.close)]).nice(6)
.range([height - marginBottom, marginTop]);
const area = d3.area()
.curve(d3.curveStep)
.x(d => x(d.date))
.y0(y(0))
.y1(d => y(d.close));
const parent = d3.create("div");
parent.append("svg")
.attr("width", width)
.attr("height", height)
.style("position", "absolute")
.style("pointer-events", "none")
.style("z-index", 1)
.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(6))
.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("$ Close"));
const body = parent.append("div")
.style("overflow-x", "scroll")
.style("-webkit-overflow-scrolling", "touch");
const svg = body.append("svg")
.attr("width", totalWidth)
.attr("height", height)
.style("display", "block");
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(d3.utcMonth.every(1200 / width)).tickSizeOuter(0));
svg.append("path")
.datum(data)
.attr("fill", "steelblue")
.attr("d", area);
yield parent.node();
body.node().scrollBy(totalWidth, 0);
}