chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("stroke", "#ccc")
.attr("stroke-width", 2)
.selectAll("line")
.data(data)
.join("line")
.attr("x1", x(0))
.attr("x2", d => x(d.value))
.attr("y1", (d, i) => y(i))
.attr("y2", (d, i) => y(i));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("fill", d => d3.schemeSet1[d.value > 0 ? 1 : 0])
.attr("cx", d => x(d.value))
.attr("cy", (d, i) => y(i))
.attr("r", 6);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("text")
.data(data)
.join("text")
.attr("text-anchor", d => d.value < 0 ? "end" : "start")
.attr("x", d => x(d.value) + Math.sign(d.value - 0) * 8)
.attr("y", (d, i) => y(i) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.text(d => format(d.value));
return svg.node();
}