PhD Student in Statistics @ The Ohio State University
sampleDist(10, d3.randomNormal(3, 1))
function sampleDist(n, random) {
return Float64Array.from({ length: n }, random);
}
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.filter(d => d.body_mass_g)
.attr("cx", d => x(d.flipper_length_mm))
.attr("cy", d => y(d.body_mass_g))
.attr("r", 4);
return svg.node();
}
data = FileAttachment("penguins.csv").csv({typed: true})
height = 400
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.flipper_length_mm)).nice()
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(data, d => d.body_mass_g)).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
margin = ({top: 25, right: 20, bottom: 35, left: 40})
obs = Array.from({ length: 10 }, () => ({
x: d3.randomNormal(0, 1)(),
y: d3.randomNormal(0, 1)(),
z: d3.randomNormal(0, 1)()
}))
targets = ({
mean: {
x: 3,
y: 1
},
sd: {
x: 2,
y: 1
},
rho: 0.4
})
function mean(xs) {
return xs.reduce((sum, x) => sum + x) / xs.length;
}
function variance(xs) {
let mean_x = mean(xs);
return xs.reduce((terms, x) => terms + (x - mean_x)**2) / xs.length;
}
function covariance(xs, ys) {
console.assert(xs.length === ys.length);
let mean_x = mean(xs);
let mean_y = mean(ys);
let N = xs.length;
let cov = 0;
for (let i = 0; i < N; i++) {
cov += (xs[i] - mean_x) * (ys[i] - mean_y);
}
return cov / N;
}
function correlation(xs, ys) {
let sd_x = Math.sqrt(variance(xs));
let sd_y = Math.sqrt(variance(ys));
return covariance(xs, ys) / (sd_x * sd_y);
}
function sample(n, dist) {
return Array.from({ length: n }, dist);
}
params = ({
x: sample(3, d3.randomNormal()),
y: sample(3, d3.randomNormal()),
zs: sample(obs.length, () => sample(3, d3.randomNormal()))
})
function model(params) {
return params.zs.map((z) =>
({
x: z.mul(params.x).sum(),
y: z.mul(params.y).sum()
})
)
}
Array.prototype.sum = function(initialValue=0) {
return this.reduce((terms, x) => terms + x, initialValue)
}
Array.prototype.mul = function(others) {
return d3.zip(this, others).map(([x, y]) => x * y);
}
Array.prototype.add = function(others) {
return d3.zip(this, others).map(([x, y]) => x + y);
}
Array.prototype.div = function(others) {
return d3.zip(this, others).map(([x, y]) => x / y);
}
Array.prototype.sub = function(others) {
return d3.zip(this, others).map(([x, y]) => x - y);
}
function gradMseMeanTarget(variable, targets, params) {
let predictions = model(params);
let N = obs.length;
let partialTerms = d3.zip(predictions, params.zs).map(([ps, zs]) =>
zs.map(z => z * (variable(ps) - variable(targets.mean)))
);
return partialTerms.reduce((zs, z) => zs.add(z), [0,0,0]).map((z) => 2/N * z);
}
function gradMseSDTarget(variable, target, params) {
let predictions = model(params);
let N = obs.length;
let partialTerms = d3.zip(predictions, params.zs).map(([ps, zs]) =>
zs.map(z => z * (variable(ps) - variable(targets.sd)))
);
return partialTerms.reduce((zs, z) => zs.add(z), [0,0,0]).map((z) => 2/N * z);
}
model(params)
gradMseMeanTarget((d) => d.x, targets, params)
targets["mean"]
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.
