chart = {
const svg = d3.select(DOM.svg(width, height)).attr("class", "barchart");
const gx = svg.append("g").call(xAxis);
const gy = svg.append("g").call(yAxis);
const yLabels = [];
gy.selectAll(".tick")
.selectAll("text")
.each(d => yLabels.push(d));
const maxAvgLen = Math.floor(
(Math.min(...yLabels.map(d => d.length)) +
Math.max(...yLabels.map(d => d.length))) /
2
);
let avgLabel = maxAvgLen < 40 ? maxAvgLen : 40;
const bar = svg
.append("g")
.attr("fill", "#ff6464")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", x(0))
.attr("y", d => y(d.name))
.attr("width", d => x(d.value) - x(0))
.attr("height", y.bandwidth())
.on("mouseover", function() {
return tooltip.style("opacity", 1);
})
.on("mousemove", function() {
let [x, y] = d3.mouse(this);
return tooltip.style("top", y - 10 + "px").style("left", x + "px");
})
.on("mouseout", function() {
return tooltip.style("opacity", 0);
});
const label = svg
.append("g")
.attr("fill", "black")
.attr("opacity", 0.8)
.attr("text-anchor", "start")
.style("font-size", "12px")
.style("font-family", "'Lucida Console', Monaco, monospace")
.selectAll("text")
.data(data)
.join("text")
.attr("x", x(0) + 10)
.attr("y", d => y(d.name) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.text(d =>
d.mode === "pvalue" ? d3.format(".3")(d.pvalue) : d3.format(".3")(d.value)
);
const title = svg
.append("text")
.attr("class", "title")
.attr("fill", "black")
.attr("opacity", 0.8)
.style("font", "12px sans-serif")
.attr("x", margin.left + (width - margin.left) / 2)
.attr("y", height - margin.bottom + 40)
.text("−log₁₀(p‐value)");
svg.node().update = () => {
d3.selectAll(".domain").attr("opacity", 0);
const t = svg.transition().duration(750);
bar
.data(data, d => d.name)
.order()
.transition(t)
.delay((d, i) => i * 20)
.attr("y", d => y(d.name))
.attr("width", d => x(d.value) - x(0));
label
.data(data, d => d.name)
.order()
.transition(t)
.delay((d, i) => i * 20)
.attr("x", x(0) + 10)
.attr("y", d => y(d.name) + y.bandwidth() / 2)
.text(d =>
d.mode === "pvalue"
? d3.format(".3")(d.pvalue)
: d3.format(".3")(d.value)
);
gx.transition(t)
.call(xAxis)
.selectAll(".tick")
.delay((d, i) => i * 20)
.selectAll("line")
.attr("opacity", 0.1);
gy.transition(t)
.call(yAxis)
.selectAll(".tick")
.delay((d, i) => i * 20)
.selectAll("text")
.attr("fill", "black")
.style("font-size", "12px")
.style("font-family", "'Lucida Console', Monaco, monospace")
.text(d => trimLabel(d, avgLabel));
};
return svg.node();
}