We are a research group at the CMU HCII. Our mission is to empower people to analyze and communicate data with interactive systems.
Public
Edited
Oct 23, 2023
Importers
stimuli = (deBias ? debiasMeans : scaleData)(
configs.map((d, i) => {
const ys = dataGenerator(...d.noise, d.seed, d.flip, n, deBias);
const highNoiseYs = dataGenerator(
lowNoise,
highNoise,
d.seed,
d.flip,
n,
deBias
);
const data = xSequence.map((x) => ({ x, y: ys[x] }));
const highNoiseData = xSequence.map((x) => ({ x, y: highNoiseYs[x] }));
return {
index: d.index,
seed: d.seed,
noise: d.noise,
flip: d.flip,
type: d.type,
data:
d.type === "point_arc"
? pointsAlongArc(
// scale data so we can compute points along arc
data.map(({ x, y }) => ({ x: xScale(x), y: yScale(y) }))
)
: data,
lineData: data,
highNoiseData
};
}),
1
)
configs = {
const configs = [];
let index = 0;
seeds.forEach((seed) =>
["line", "point", "point_arc"].forEach((type) =>
[lowNoise, highNoise].forEach((noise) =>
[false, true].forEach((flip) =>
configs.push({
index: index++,
type,
noise: [lowNoise, noise],
seed,
flip
})
)
)
)
);
return configs;
}
deBias = fix === "de-bias means"
xSequence = d3.range(0, n, sample)
views = stimuli.map((s) => makeView(s, { w, h, showLine, showMiddle }))
xScale = d3.scaleLinear().domain([0, n]).range([0, w])
yScale = d3.scaleLinear().domain([0, 1]).range([0, h])
epsylon = 1e-9
function pointsAlongArc(anchors) {
const spacing = (arcLength(anchors) / n) * sample - epsylon;
let remaining = spacing;
let current = 0;
const out = [];
let currentAnchor = anchors[0];
let maxIters = 1000;
while (current < anchors.length - 1) {
const nextAnchor = anchors[current + 1];
const dx = nextAnchor.x - currentAnchor.x;
const dy = nextAnchor.y - currentAnchor.y;
const dist = Math.sqrt(dx * dx + dy * dy);
// console.log(current, dist, remaining);
if (dist > remaining) {
const frac = remaining / dist;
const x = currentAnchor.x + frac * dx;
const y = currentAnchor.y + frac * dy;
out.push({ x: xScale.invert(x), y: yScale.invert(y) });
currentAnchor = { x, y };
remaining = spacing;
} else {
remaining = remaining - dist;
current++;
currentAnchor = anchors[current];
}
if (!maxIters--) {
console.log("Finished early!");
break;
}
}
return out;
}
function arcLength(anchors) {
let length = 0;
for (let i = 0; i < anchors.length - 1; i++) {
const currentAnchor = anchors[i];
const nextAnchor = anchors[i + 1];
const dx = nextAnchor.x - currentAnchor.x;
const dy = nextAnchor.y - currentAnchor.y;
length += Math.sqrt(dx * dx + dy * dy);
}
return length;
}
import {
movingAverage,
dataGenerator,
debiasMeans,
scaleData,
makeView,
seeds
} from "@domoritz/bias-experiment-1"
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.
