md`# Queen's eggs`
ramp(d3.interpolateYlGn)
g_color = colorBee(Math.floor(Math.random()*10));
colorBee2(Math.floor(Math.random()*10 + 3));
Math.floor(Math.random() + 20)
data = d3.range(200).map(() => {
//set allele depending on p//
let rU = d3.randomUniform(0, 100);
const palette = d3.interpolateYlGn;
const color = d3.scaleLinear().range([0,1]).domain([-1,1]);
if (rU() < input2.s1) {
var allele = "A";
var a_color = "#EAE6CA";
}else {
var allele = "a";
var a_color = "#71879a";
}
//set genotype depending on p
let p = input2.s2; // controlled by slider 1
let q = 10 - p;
let p_sq = p*p;
let q_sq = q*q;
var colorBee = d3.scaleOrdinal(d3.schemePaired)
var colorBee2 = d3.scaleOrdinal(d3.schemePastel1)
if (0 == p_sq) {
var genotype = "AA";
var g_color = "#FFFFF0"; // unfertilized white eggs
} else if (1 == p_sq) {
genotype = "BB";
g_color = "#fae755" ;
} else if (2 == p_sq) {
genotype = "CC";
g_color = "#EAE6CA";
}else if (rU() < 9) {
genotype = "DD";
g_color = colorBee(Math.floor(Math.random()*10 + 3));
}else if (rU() < 16) {
genotype = "EE";
g_color = colorBee(Math.floor(Math.random()*10 + 3));
}else if (rU() < 25) {
genotype = "FF";
g_color = colorBee(Math.floor(Math.random()*10 + 3));
}else if (rU() < 36) {
genotype = "GG";
g_color = colorBee(Math.floor(Math.random()*10 + 3));
}else if (rU() < 49) {
genotype = "HH";
g_color = colorBee(Math.floor(Math.random()*10 + 3));
}else if (rU() < 64) {
genotype = "II";
g_color = colorBee2(Math.floor(Math.random()*10 + 3));
}else if (rU() < 81) {
genotype = "JJ";
g_color = colorBee2(Math.floor(Math.random()*10 + 3));
} else if (rU() < 100) {
genotype = "KK";
g_color = colorBee2(Math.floor(Math.random()*10 + 3));
}
//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;
})
//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>`
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)
}))
import { chart } from "@joshdata/simple-line-chart"
DOM.download(new Blob([d3.csvFormat(data)], { type: "text/csv" }), "test.csv")
import { columns } from "@bcardiff/observable-columns"
function ramp(color, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
import {legend} from "@d3/color-legend"
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.
