chart = {
const width = 2000;
const padding = 30;
const plotWidth = width / grouped.size;
const plotHeight = height - padding * 2;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g").attr("transform", `translate(60)`);
const xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.BP))
.range([0, plotWidth])
const yScale = d3.scaleLog()
.domain(d3.extent(data, d => d.P)).nice()
.range([0, plotHeight]);
const color = (data, chr) => {
if(chr % 2 == 0) return (data < 10 ** -5) ? "#69ff40" : "#000000"
else return (data < 10 ** -5) ? "#69ff40" : "#3d3d3d"
}
const xPosition = {}
const plots = g.selectAll(null)
.data(grouped)
.enter()
.append("g")
.attr("transform", (data, index) => {
const translateX = [index *(plotWidth)]
return `translate(${translateX})`
})
plots.selectAll(null)
.data(d => d[1])
.enter()
.append("circle")
.attr("r", 4)
.attr("cx", d => xScale(d.BP))
.attr("cy", d => yScale(d.P))
.style("fill", d => color(d.P, d.CHR))
plots.append("text")
.attr("y", plotHeight + padding)
.text(d => d[1][0].CHR)
g.append("g").call(
d3.axisLeft(yScale)
.tickArguments([5,".0s"])
.tickFormat(function(d) {
return -Math.log10(d);
})
)
g.append("text")
.attr("x", plotWidth)
.attr("y", plotHeight + padding * 2)
.text("Chromosome")
g.append("text")
.attr("x", (plotHeight * -1)/2)
.attr("y", padding * -1)
.attr('text-anchor', 'middle')
.text("-log10(P)")
.attr('transform', 'rotate(-90)')
return svg.node();
}