chart = (dataEnrichr, color, numBar) => {
const data = dataEnrichr.slice(0, numBar).sort((a, b) => b.value - a.value);
const margin = { top: 30, right: 20, bottom: 50, left: 400 };
const height = data.length * 25 + margin.top + margin.bottom;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "barchart");
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);
data.map((d) => {
d.value = -Math.log10(d["p-value"]);
});
title.text("−log₁₀(p‐value)");
data.sort((a, b) => b.value - a.value);
let x = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.value)])
.range([margin.left, width - margin.right]);
let y = d3
.scaleBand()
.domain(data.map((d) => d.term))
.range([margin.top, height - margin.bottom])
.padding(0.1);
let xAxis = (g) =>
g
.attr("class", "axis-x")
.attr("transform", `translate(0,${margin.top})`)
.call(
d3
.axisBottom(x)
.ticks(width / 100)
.tickSize(height - 80)
);
let yAxis = (g) =>
g
.attr("class", "axis-y")
.attr("transform", `translate(${margin.left}, 0)`)
.style("text-anchor", "end")
.call(d3.axisLeft(y).tickSize(0));
const gx = svg.append("g").call(xAxis).selectAll("line").attr("opacity", 0.1);
const gy = svg
.append("g")
.call(yAxis)
.selectAll("text")
.attr("fill", "black")
.style("font-size", "12px")
.style("font-family", "'Lucida Console', Monaco, monospace");
svg.selectAll(".domain").attr("opacity", 0);
const yLabels = data.map((d) => d.term.length);
const maxAvgLen = Math.floor(
(Math.min(...yLabels) + Math.max(...yLabels)) / 2
);
const avgLabel = maxAvgLen < 50 ? maxAvgLen : 50;
gy.text((d) => trimLabel(d, avgLabel));
const bar = svg
.append("g")
.attr("fill", color)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", x(0))
.attr("y", (d) => y(d.term))
.attr("width", (d) => x(d.value) - x(0))
.attr("height", y.bandwidth());
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", (d) => x(d.value) - 35)
.attr("y", (d) => y(d.term) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.text((d) => d3.format(".3")(d.value));
return svg.node();
}