chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("fill", "steelblue")
.attr("fill-opacity", 0.8)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.year))
.attr("width", x.bandwidth())
.attr("y", d => y1(d.sales))
.attr("height", d => y1(0) - y1(d.sales));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "currentColor")
.attr("stroke-miterlimit", 1)
.attr("stroke-width", 3)
.attr("d", line(data));
svg.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.year))
.attr("width", x.bandwidth())
.attr("y", 0)
.attr("height", height)
.append("title")
.text(d => `${d.year}
${d.sales.toLocaleString("en")} new cars sold
${d.efficiency.toLocaleString("en")} mpg average fuel efficiency`);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(y1Axis);
svg.append("g")
.call(y2Axis);
return svg.node();
}