Public
Edited
Jan 26, 2021
3 forks
66 stars
Also listed in…
Observable's Instagram Shares
plot = (params, interpolator, xDomain, yDomain) =>
densityPlot(
pointDensity(width, width)
.xDomain(xDomain)
.yDomain(yDomain)
.batchSize(1e5)
)
.color(buf => d3.scaleSequentialLog([1, d3.max(buf) / 2], interpolator))
.background('#fff')
.drawAxes(false)(
cliffordOrbit(numPoints, 0, 0, params.a, params.b, params.c, params.d)
)
attractors = [
{
params: { a: -1.4, b: -1.3, c: -1.8, d: -1.9 },
// cacheInterpolator speeds up colorization by returning cached {r, g, b} objects
interpolator: cacheInterpolator(d3.interpolateRdPu),
xDomain: [-2.799999585895255, 2.799998631292776],
yDomain: [-2.899999883648699, 2.8999993037505742]
},
{
params: { a: -1.4, b: 1.6, c: 1.0, d: 0.7 },
interpolator: cacheInterpolator(d3.interpolateBlues),
xDomain: [-1.419958727105131, 1.9793395436970522],
yDomain: [-1.3046762180527374, 1.5352479294800234]
},
{
params: { a: 1.7, b: 1.7, c: 0.6, d: 1.2 },
interpolator: cacheInterpolator(d3.interpolateYlOrRd),
xDomain: [-1.4778371602524394, 1.5999998899525791],
yDomain: [-2.198349977689963, 2.199999574760589]
},
{
interpolator: cacheInterpolator(d3.interpolateBuPu),
params: { a: 1.7, b: 0.7, c: 1.4, d: 2.0 },
xDomain: [-1.937900592233006, 2.3999990468933126],
yDomain: [-0.9183898998490423, 2.723716224410488]
}
]
function cliffordOrbit(length, x, y, a, b, c, d) {
return {
length,
[Symbol.iterator]() {
let n = length;
let { sin, cos } = Math;
let value = new Float64Array([x, y]);
return {
next() {
if (n == 0) return { done: true };
n -= 1;
let x = value[0];
let y = value[1];
value[0] = sin(a * y) + c * cos(a * x);
value[1] = sin(b * x) + d * cos(b * y);
return { value, done: false };
}
};
}
};
}
numPoints = 1e7
comma = d3.format(',')
dispatchValue = (node, value, detail = null) => {
node.value = value;
node.dispatchEvent(new CustomEvent('input', { detail }));
}
d3 = require('d3@6')
import { html } from '@observablehq/htl'
import {
densityPlot,
pointDensity,
cacheInterpolator
} from '@twitter/density-plots@4159'
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.
