chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, heightV])
.attr("font-family", "sans-serif")
.attr('transform', `translate(${(width < 600 ? width/16 : width/8)},0)`)
svg.append("g")
.call(xvAxis);
svg.append("g")
.call(yvAxis);
svg.append("g")
.selectAll("g")
.data(data.values)
.join("g")
.attr("transform", (d, i) => `translate(${xV(data.names[i])},0)`)
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("y", (d, i) => yV(data.chapters[i]) + 1)
.attr("height", (d, i) => yV(data.chapters[i] + 1) - yV(data.chapters[i]) - 1)
.attr("width", xV.bandwidth() - 1)
.attr("fill", d => isNaN(d) ? "#eee" : d === 0 ? "#eee" : color(d))
.on('mouseover', function(d, i) {
const t = d3.transition('enlarge').duration(500)
tooltipMouseOver(d, i, t)
})
.on('mouseout', function(d, i) {
const t = d3.transition('dwindle').duration(500)
tooltipMouseOut(d, i, t)
})
svg.selectAll('text')
.style("font-size", fontSize);
return svg.node();
}