MIT Ph.D. Candidate in HCI
Published
Edited
Mar 10, 2021
Importers
8 stars
spiralParams = ({
a: 0,
b: 1
})
pointsPerRotation = 100
numRotations = 5
totalPoints = numRotations * pointsPerRotation
thetaScale = d3
.scaleLinear()
.domain([0, totalPoints])
.range([0, numRotations * Math.PI * 2]) // Math.PI * 2 is a full circle in radians
function thetaToRadius(theta, spiralParams) {
return spiralParams.a + spiralParams.b * theta;
}
function radiusToTheta(radius, spiralParams) {
return (radius - spiralParams.a) / spiralParams.b;
}
function toCartesian(theta, radius) {
// this line enables compatability with d3.lineRadial
// for some reason lineRadial makes the angle 0 point to 12 o clock
// remove this line if you're just copying this function to your own code!
theta = theta - Math.PI / 2;
return [radius * Math.cos(theta), radius * Math.sin(theta)];
}
function thetaToCartesian(theta, spiralParams) {
const radius = thetaToRadius(theta, spiralParams);
return toCartesian(theta, radius);
}
function thetaToArcLength(theta, spiralParams, start = 0) {
const { a, b } = spiralParams;
const c = start;
const d = theta;
const aPlusBj = a + b * d;
const sqr = num => Math.pow(num, 2);
const sqrt = num => Math.sqrt(num);
const ln = num => Math.log(num);
const abs = num => Math.abs(num);
return (
b *
(((a + b * d) * sqrt(sqr(b) + sqr(a + b * d))) / (2 * sqr(b)) -
((a + b * c) * sqrt(sqr(b) + sqr(a + b * c))) / (2 * sqr(b)) +
.5 *
(ln(abs(a + b * d + sqrt(sqr(b) + sqr(a + b * d))) / abs(b)) -
ln(abs(a + b * c + sqrt(sqr(b) + sqr(a + b * c))) / abs(b))))
);
}
function spiralDistanceBetweenBranches(spiralParams) {
return Math.PI * 2 * spiralParams.b;
}
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.
