I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
scales = {
let w = width < 900 ? width : 900;
let h = 0.625 * w;
let rmin = 2.6;
let rmax = 4;
let pad = 30;
let x_scale = d3
.scaleLinear()
.domain([rmin, rmax])
.range([pad, w - pad]);
let y_scale = d3
.scaleLinear()
.domain([0, 1])
.range([h - pad, pad]);
let pts_to_path = d3
.line()
.x(d => x_scale(d[0]))
.y(d => y_scale(d[1]));
return {
w: w,
h: h,
rmin: rmin,
rmax: rmax,
pad: pad,
x_scale: x_scale,
y_scale: y_scale,
pts_to_path: pts_to_path
};
}
f = (r, x) => r * x * (1 - x)
function F(n, r) {
let x = 0.5;
for (let i = 0; i < n; i++) {
x = f(r, x);
}
return x;
}
function FF(n, r, eps) {
let x = 0.5 + eps;
for (let i = 0; i < n; i++) {
x = f(r, x);
}
return x;
}
function cobweb_pic(r, opts_in = {}) {
let f = x => r * x * (1 - x);
let { w = 300, h = 300 } = opts_in;
let opts = {
xdomain: [0, 1],
ydomain: [0, 1],
marginTop: (10 * w) / 300,
marginRight: (10 * w) / 300,
marginBottom: 0, //(10 * w) / 300,
marginLeft: 0, //(10 * w) / 300,
inset: 6,
insetTop: 6,
insetRight: 6,
insetBottom: 0,
insetLeft: 0,
width: w,
height: h,
strokeWidth: 2.5,
xticks: [0],
yticks: false
};
let x_scale = d3.scaleLinear(opts.xdomain, [
opts.marginLeft + opts.insetLeft,
opts.width - opts.marginRight - opts.insetRight
]);
let y_scale = d3
.scaleLinear(opts.ydomain, [
opts.height - opts.marginBottom - opts.insetBottom,
opts.marginTop + opts.insetTop
])
.nice();
let pts_to_path = d3
.line()
.x(function(d) {
return x_scale(d[0]);
})
.y(function(d) {
return y_scale(d[1]);
});
let plot = funplot([f, x => x], opts);
let x0 = 0.5;
let cobweb = make_cobweb(f, x0, 0, 1);
let svg = d3.select(plot);
svg
.append("path")
.attr("d", pts_to_path(cobweb))
.style("stroke", "black")
.style("stroke-width", 0.4)
.style("fill", "none")
.style("opacity", 0.4);
svg
.append("line")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", y_scale(0))
.attr("y2", y_scale(0))
.attr("stroke", "black");
svg
.append("line")
.attr("y1", 0)
.attr("y2", h)
.attr("x1", x_scale(0))
.attr("x2", x_scale(0))
.attr("stroke", "black");
svg
.append("circle")
.attr("cx", x_scale(x0))
.attr("cy", y_scale(x0))
.attr("fill", "#3d3")
.attr("stroke", "black")
.attr("r", 3);
return plot;
}
function make_cobweb(f, x0, xmin, xmax) {
let x = x0;
let y = x;
let bail = 1500;
let cobweb = [[x, y]];
let i = 0;
while (i < bail && xmin <= y && y <= xmax) {
y = f(x);
cobweb.push([x, y]);
x = y;
cobweb.push([x, y]);
i++;
}
return cobweb;
}
max_period = super_attracting_parameters.slice(-1)[0].period
super_attracting_parameters = await FileAttachment(
"superAttractingLogisticParameters@2.csv"
).csv({ typed: true })
import { funplot } from "@mbostock/funplot"
import { Range } from '@observablehq/inputs'
tippy_style = html`
<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light.css`
)}">
`
tippy = require("tippy.js@6")
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.
