News and graphics at @ClimateLab, a project of @PostGraphics.
// http://paulbourke.net/fractals/clifford/
function clifford(x, y){
return [
sin(a * y) + c * cos(a * x),
sin(b * x) + d * cos(b * y)
]
}
// http://paulbourke.net/fractals/peterdejong/
function deJong(x, y){
return [
sin(a * y) - cos(b * x),
sin(c * x) - cos(d * y)
]
}
points = {
const points = [[-1, 1]];
for (let i = 0, l = N - 1; i < l; i++){
const [x, y] = points[i];
points.push(fn(x, y));
}
return points;
}
N = 1e6
r = 1
color = i => interpolate.name === "HSL" ? d3.rgb(d3.hsl(i * 360, 1, .5)) : d3.color(interpolate.fn(i))
size = min(width, 640) - r * 2
x = d3.scaleLinear(d3.extent(points, d => d[0]), [0, size])
y = d3.scaleLinear(d3.extent(points, d => d[1]), [size, 0])
abs = Math.abs
sin = Math.sin
cos = Math.cos
min = Math.min
pi = Math.PI
fn = types.get(type)
types = new Map([
["Clifford", clifford],
["de Jong", deJong]
])
defaults = ({
"Clifford": { a: 1.7, b: 1.7, c: 0.6, d: 1.2 },
"de Jong": { a: -2, b: -2, c: -1.2, d: 2 }
})
interpolators = [
{
name: "HSL",
fn: null
},
{
name: "Blues",
fn: d3.interpolateBlues
},
{
name: "BrBG",
fn: d3.interpolateBrBG
},
{
name: "BuGn",
fn: d3.interpolateBuGn
},
{
name: "BuPu",
fn: d3.interpolateBuPu
},
{
name: "Cividis",
fn: d3.interpolateCividis
},
{
name: "Cool",
fn: d3.interpolateCool
},
{
name: "GnBu",
fn: d3.interpolateGnBu
},
{
name: "Greens",
fn: d3.interpolateGreens
},
{
name: "Greys",
fn: d3.interpolateGreys
},
{
name: "Inferno",
fn: d3.interpolateInferno
},
{
name: "Magma",
fn: d3.interpolateMagma
},
{
name: "Oranges",
fn: d3.interpolateOranges
},
{
name: "PRGn",
fn: d3.interpolatePRGn
},
{
name: "PiYG",
fn: d3.interpolatePiYG
},
{
name: "Plasma",
fn: d3.interpolatePlasma
},
{
name: "PuBu",
fn: d3.interpolatePuBu
},
{
name: "PuBuGn",
fn: d3.interpolatePuBuGn
},
{
name: "PuOr",
fn: d3.interpolatePuOr
},
{
name: "PuRd",
fn: d3.interpolatePuRd
},
{
name: "Purples",
fn: d3.interpolatePurples
},
{
name: "Rainbow",
fn: d3.interpolateRainbow
},
{
name: "RdBu",
fn: d3.interpolateRdBu
},
{
name: "RdGy",
fn: d3.interpolateRdGy
},
{
name: "RdPu",
fn: d3.interpolateRdPu
},
{
name: "RdYlBu",
fn: d3.interpolateRdYlBu
},
{
name: "RdYlGn",
fn: d3.interpolateRdYlGn
},
{
name: "Reds",
fn: d3.interpolateReds
},
{
name: "Sinebow",
fn: d3.interpolateSinebow
},
{
name: "Spectral",
fn: d3.interpolateSpectral
},
{
name: "Turbo",
fn: d3.interpolateTurbo
},
{
name: "Viridis",
fn: d3.interpolateViridis
},
{
name: "Warm",
fn: d3.interpolateWarm
},
{
name: "YlGn",
fn: d3.interpolateYlGn
},
{
name: "YlGnBu",
fn: d3.interpolateYlGnBu
},
{
name: "YlOrBr",
fn: d3.interpolateYlOrBr
},
{
name: "YlOrRd",
fn: d3.interpolateYlOrRd
}
]
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.
