Public
Edited
Feb 5, 2024
1 fork
Importers
51 stars
volume = (r, n) => (Math.PI ** (n / 2) * r ** n) / gamma(1 + (1 / 2) * n)
sum = arr => arr.reduce((acc, cur) => acc + cur, 0)
product = arr => arr.reduce((acc, cur) => acc * cur, 1)
distance = arr => Math.sqrt(sum(arr.map(d => Math.pow(d, 2))))
cartesianToSpherical = cartesian => ({
r: distance(cartesian),
theta: Math.acos(cartesian[2] / distance(cartesian)),
phi: Math.atan2(cartesian[1], cartesian[0]) //atan2 for weird quadrant stuff!
})
sphericalToCartesian = spherical => [
spherical.r * Math.sin(spherical.theta) * Math.cos(spherical.phi),
spherical.r * Math.sin(spherical.theta) * Math.sin(spherical.phi),
spherical.r * Math.cos(spherical.theta)
]
// https://stackoverflow.com/a/15455055/120290
gamma = z =>
Math.sqrt((2 * Math.PI) / z) *
Math.pow((1 / Math.E) * (z + 1 / (12 * z - 1 / (10 * z))), z)
// Gets the point samples for the dots in Figure 2
getPoints = (dim, r) => {
let getRange = () => d3.range(-r, r + 1, 1);
return d3
.range(dim - 1)
.reduce(
(acc, cur) => d3.cross(acc, getRange(), (a, b) => a.concat(b)),
getRange().map(d => [d])
);
}
// Adds title and value label to basic HTML range slider
slider = ({ min, max, step, value, title, format = d => d }) => {
const form = html`<form style="display: flex; align-items: center;">
<span style="width: 60px;">${title}</span>
<input name=i type=range min="${min}" max="${max}" step="${step}" value="${value}">
<span class="value"></span>
</form>`;
const label = form.querySelector(".value");
form.oninput = () =>
(label.innerText = format((form.value = form.i.valueAsNumber)));
form.oninput();
return form;
}
// Header illustration
getIllo = () => {
const w = width + 28,
h = 250;
const context = DOM.context2d(w, h, 1);
const goingIn = Math.random() > 0.5;
const getRandomColor = () =>
Math.random() > 0.75 ? "white" : `hsl(${Math.random() * 360},50%,50%)`;
context.canvas.style.margin = "0 -14px 0 -14px";
context.canvas.style.position = "relative";
context.canvas.style.zIndex = "-1";
context.canvas.style.imageRendering = "pixelated";
context.globalCompositeOperation = "xor";
const data = d3.range(10).map(d => ({
cx: Math.random() * w,
cy: Math.random() * h,
r: (Math.random() * h) / 4,
c: getRandomColor(),
t0: Math.random() * 2000
}));
let dr = goingIn ? 4 : 1;
d3.timer(t => {
if (t > 5000) return true;
data.forEach(d => {
if (t < d.t0) return;
context.strokeStyle = d.c;
context.beginPath();
context.arc(d.cx, d.cy, d.r, 0, Math.PI * 2);
context.stroke();
d.r += dr;
dr *= goingIn ? 0.995 : 1.01;
});
});
return context.canvas;
}
style = html`<style>
form span {
margin-left: 0.5em;
font-family: sans-serif;
font-size: 12px;
}
input[type="range"] {
max-width: ${width}px;
}
</style>`
import {previews} from "@tophtucker/reflecting-on-vote-cones"
d3 = require('d3')
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.
