chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.attr("stroke-width", 2)
.attr("fill", "none")
.selectAll("path")
.data(data)
.join("path")
.attr("d", d => `
M${x(d.date)},${y(d.low)}V${y(d.high)}
M${x(d.date)},${y(d.open)}h-4
M${x(d.date)},${y(d.close)}h4
`)
.attr("stroke", d => d.open > d.close ? d3.schemeSet1[0]
: d.close > d.open ? d3.schemeSet1[2]
: d3.schemeSet1[8])
.append("title")
.text(d => `${formatDate(d.date)}
Open: ${formatValue(d.open)}
Close: ${formatValue(d.close)} (${formatChange(d.open, d.close)})
Low: ${formatValue(d.low)}
High: ${formatValue(d.high)}`);
return svg.node();
}