chart = {
const svg = d3.select(DOM.svg(width, 300));
const tooltip = d3.select("body").append("div").call(createTooltip)
const tipContent = d => {
return d;
}
svg.selectAll("circle")
.data([1, 2, 3])
.join("circle")
.attr("cx", d => d * width / 4)
.attr("cy", 150)
.attr("r", 40)
.attr("fill", "#69b3a2")
.on("mouseover", function(d) {
tooltip.style("display", null);
d3.select(this)
.attr("fill", "#333333");
tooltip.html(tipContent(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mousemove", function(d) {
tooltip
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
d3.select(this)
.attr("fill", "#69b3a2");
tooltip.style("display", "none");
});
return svg.node();
}