Public
Edited
Nov 18, 2021
1 fork
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart({
xAxis: {
title: "Allele Frequency",
min: 0,
max: 1
},
yAxis: {
title: "Genotype Frequency",
min: 0,
max: 1
},
series: [
// { title: "p^2", points: x => x ** 2, color: "#fae755", width: 5 titleposition: right},
{ points: x => x ** 2, color: "#fae755", width: 5 },
{ points: x => (1 - x) ** 2, color: "#42818c", width: 5 },
{ points: x => x * (1 - x) * 2, color: "#8ccd64", width: 5 }
]
})
Insert cell
Insert cell
Insert cell
Insert cell
import { columns } from "@bcardiff/observable-columns"
Insert cell
data = d3.range(200).map(() => {
//set allele depending on p//
let rU = d3.randomUniform(0, 1);
if (rU() < input1.s1) {
var allele = "A";
var a_color = "#b1c5d4";
} else {
allele = "a";
a_color = "#71879a";
}

//set genotype depending on p
let p = input2.s2; // controlled by slider 1
let q = 1 - p;
let p_sq = p * p;
let q_sq = q * q;
if (rU() < p_sq) {
var genotype = "AA";
var g_color = "#fae755";
} else if (rU() > 1 - q_sq) {
genotype = "aa";
g_color = "#42818c";
} else {
genotype = "Aa";
g_color = "#8ccd64";
}

//set radius for sperm and eggs//
let rI = d3.randomInt(1, 3);
let r = rI() * 18 - 10;

//set initial postion
let x = Math.random() * width;
let y = 0;

//set values for each point
let point = {
allele: allele,
allele_color: a_color,
genotype: genotype,
genotype_color: g_color,
x: x,
y: y,
r: r
};

return point;
})
Insert cell
//frequencies = md`<div align="center">***A:***
//${tex`p = ${d3.format(".2f")(input2.s2)}, q = ${d3.format(".2f")(
// 1 - input2.s2
//)}`}
//***G:***
//${tex`p^2 = ${d3.format(".3f")(input2.s2 * input2.s2)}, 2pq = ${d3.format(
// ".3f"
//)(2 * input2.s2 * (1 - input2.s2))}, q^2 = ${d3.format(".3f")(
// (1 - input2.s2) * (1 - input2.s2)
//)}`}</div>`
Insert cell
freqs = d3.range(0, 1.0001, 0.01).map(i => ({
p: d3.format(".2f")(i),
q: d3.format(".2f")(1 - i),
psq: d3.format(".3f")(i ** 2),
psq: d3.format(".3f")((1 - i) ** 2),
twopq: d3.format(".3f")(i * (1 - i) * 2)
}))
Insert cell
import { chart } from "@joshdata/simple-line-chart"
Insert cell
DOM.download(new Blob([d3.csvFormat(data)], { type: "text/csv" }), "test.csv")
Insert cell
Insert cell

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.
Learn more