chart3 = {
// const width = 928; // uncomment for responsive width
const height = 300;
const padding = {left:35, right:30, top:40, bottom:20};
let max = -Number.MAX_VALUE;
densities2.forEach((d) => max = Math.max(max, d["density"]));
console.log(max)
max = 35;
// let error_lines_x_pos = {"ampl_vs_ancestral":1, "ampliconic":1, "ancestral":2, ;
let space_between_bar_boxes = 70;
let single_bar_width = 14;
let bar_box_width = (width - padding.left -padding.right)/7 - space_between_bar_boxes/2;
const x = d3.scaleLinear([0,7],[0 + padding.left, width - padding.right]);
const y = d3.scaleLinear([0, max_chr_len.y],[0+padding.top, height - padding.bottom - padding.top]);
const y_bars = d3.scaleLinear([0,max],[height - padding.bottom,0 +padding.top ]);
const x_bars = d3.scaleLinear([0,6],[0,bar_box_width]);
const chr_offset = {'X' : 0,'Y':3}
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
for ( const sp of species){
for (const chr of ["X", "Y"]){
let data = densities2.filter( x => (x.species == sp & x.chr ==chr))
if(chr == 'X'){
data = data.filter(x => ["X-ancestral", "ampliconic","palindromes"].includes(x.region))
}
if(chr == 'Y'){
data = data.filter(x => ["XDEG", "ampliconic","palindromes"].includes(x.region))
}
svg.selectAll(`.bar_${sp}_${chr}`)
.data(data)
.join("rect")
.attr("class", `bar_${sp}_${chr}`)
.attr("x", (d,i) => x(species.indexOf(sp)) + x_bars(i + chr_offset[chr]))
.attr("y", d => y_bars(d.density))
// .attr("y", d => y_bars(max) - y_bars(d.density))
.attr("width", single_bar_width)
.attr("height", d => height - padding.bottom - y_bars(d.density))
.attr("fill", d => colorScheme[density_name_to_seqclass[d.region]])
.attr("stroke", "black")
// let error_line_data = ["ampl_vs_ances", "ancestral", "ampliconic","palindromes"];
// svg.selectAll(`.line1_${sp}_${chr}`)
// .data(error_line_data)
// .join("line")
// .attr("class",`line1_${sp}_${chr}`)
// .attr("x", (d) => x(species.indexOf(sp)) + x_bars(
}
svg.append("g")
.call(d3.axisLeft(y_bars))
.attr("transform",
`translate(${padding.left -10 + (space_between_bar_boxes/2 + bar_box_width)*species.indexOf(sp)},0)`);;
}
// text labels
svg.selectAll(".label")
.data(species)
.join("text")
.attr("class", "label")
.text( d => d)
.attr("x", d => x(species.indexOf(d) ) )
.attr("y", y(0)-10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
return svg.node();
}
chart4 = {
// const width = 928; // uncomment for responsive width
const height = 300;
const padding = {left:35, right:30, top:40, bottom:25};
let max = 100;
// let error_lines_x_pos = {"ampl_vs_ancestral":1, "ampliconic":1, "ancestral":2, ;
let space_between_bar_boxes = 70;
let single_bar_width = 14;
let bar_box_width = (width - padding.left -padding.right)/7 - space_between_bar_boxes/2;
const x = d3.scaleLinear([0,7],[0 + padding.left, width - padding.right]);
const y = d3.scaleLinear([0, max_chr_len.y],[0+padding.top, height - padding.bottom - padding.top]);
const y_bars = d3.scaleLinear([0,max],[0 +padding.top ,height - padding.bottom]); // for y coordinate.. not y chrom
const x_bars = d3.scaleLinear([0,6],[0,bar_box_width]);
const chr_offset = {'X' : 0,'Y':3}
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
for ( const sp of species){
for (const chr of ["X", "Y"]){
let data = te_s.filter( x => (x.species == sp & x.chr ==chr));
data = data.filter(x => ["ancestral", "ampliconic","palindromes"].includes(x.region));
svg.selectAll(`.bar_${sp}_${chr}`)
.data(data)
.join("rect")
.attr("class", `bar_${sp}_${chr}`)
.attr("x", (d,i) => x(species.indexOf(sp)) + x_bars(i + chr_offset[chr]))
.attr("y", d => y_bars(0))
.attr("width", single_bar_width)
.attr("height", d => y_bars(d.value) - padding.top)//.attr("height", d =>{console.log(d.value); return y_bars(parseFloat(d.value))})
.attr("fill", d => colorScheme[density_name_to_seqclass[d.region]])
.attr("stroke", "black")
svg.append("rect")
.attr("x", x(species.indexOf(sp)) + x_bars(chr_offset[chr]))
.attr("y", height - padding.bottom + 9)
.attr("height",1)
.attr("width",single_bar_width *3 + 13)
svg.append("text")
.attr('x', x(species.indexOf(sp)) + x_bars(chr_offset[chr]) + 21)
.attr('y',height - padding.bottom + 25)
.text(chr)
.attr("font-family", "sans-serif")
.attr("font-size", 12)
}
svg.append("g")
.call(d3.axisLeft(y_bars))
.attr("transform",
`translate(${padding.left-10 + (space_between_bar_boxes/2 + bar_box_width)*species.indexOf(sp)},0)`);
}
// text labels
svg.selectAll(".label")
.data(species)
.join("text")
.attr("class", "label")
.text( d => d)
.attr("x", d => x(species.indexOf(d) ) )
.attr("y", y(0)-10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
