31:T5d6,top_matter = md`The image below shows an interactive version of the famous [bifurcation diagram](https://en.wikipedia.org/wiki/Bifurcation_diagram) for the [logistic map](https://en.wikipedia.org/wiki/Logistic_map) ${tex`f_r(x) = rx(1-x)`}. I've not used the standard trick of ignoring the first 100 or so iterates when generating the diagram, rather the code uses opacity to blur out the rarely traveled portions. As a result, we can see that convergence to the fixed points happens along a family of curves and these same curves persist throughout the chaotic region. You can further highlight the curves using the "curve count" slider. In addition, you can hover over the diagram to select a value of ${tex`r`} and overlay an image of the corresponding cobweb plot starting from the critical point ${tex`x_0 = 1/2`}. This allows you to see how various regions of the bifurcation diagram correspond to periodicity or chaos. When you check the "Show super-attracting parameters" box, the critical point ${tex`x=1/2`} will appear as a hortizontal line. The periodic windows (which appear as vertical white strips in the diagram) occur at points where the critical curves cross that line. Note that the intersections points between the highest order critical curve and the line are marked on the diagram; you can hover over one of those points to generate the corresponding cobweb plot. This makes it easier to find super-attractive periodic behavior in some of the thinner periodic windows. `32:Td3b,curve_cnt = { const dark_mode = window.matchMedia("(prefers-color-scheme: dark)").matches; let curve_cnt = Range([0, max_period], { step: 1, value: 0, label: "curve count:" }); let critical_parameter_display = d3 .select(bif_pic) .select("#critical_parameters"); // Since we add a lot of tippy instances dynamically, we need // to keep track of them so we can remove them on input to // keep them from piling up on one another. let tippy_instances = []; d3.select(curve_cnt).on("input", function () { tippy_instances.forEach((instance) => { instance.destroy(); }); // tippy_instances.length = 0; tippy_instances = []; let n = curve_cnt.value; for (let i = 1; i <= n; i++) { d3.select(bif_pic).select(`#curve${i}`).style("opacity", 1); // 0.5 + 0.5 / i); } for (let i = n + 1; i <= max_period; i++) { d3.select(bif_pic).select(`#curve${i}`).style("opacity", 0); } if (show_critial_parameters) { let circles = critical_parameter_display .selectAll("circle") .data(super_attracting_parameters.filter((o) => o.period == n)) .join("circle") .attr("class", "super_attracting_parameter") .attr("cx", (o) => scales.x_scale(o.r)) .attr("cy", (o) => scales.y_scale(0.5)) .attr("r", (o) => (4 * scales.w) / 900) .attr("fill", (o) => d3.schemeSet1[(n - 1) % 9]) .attr("stroke", "black") .attr("data-r", (o) => o.r) .attr("data-period", (o) => o.period) .on("mouseenter", function (evt, o, w) { evt.stopPropagation(); d3.select(this) .attr("r", (o) => (7 * scales.w) / 900) .attr("stroke-width", 2); d3.select(bif_pic).selectAll(".temp").remove(); let div2 = d3 .select(bif_pic) .append("div") .attr("class", "temp") .style("pointer-events", "none") .style("position", "absolute") // .style("top", `${scales.h - scales.w / 3}px`) .style("top", `${scales.h - scales.w / 3 - scales.pad}px`) .style("left", `${scales.pad}px`) .style("width", `${scales.w / 3}px`) .style("height", `${scales.w / 3}px`) .append(() => cobweb_pic(o.r, { w: scales.w / 3, h: scales.w / 3 }) ); }) .on("mousemove", function (evt) { evt.stopPropagation(); }) .on("mouseleave", function (evt, o, w) { evt.stopPropagation(); d3.select(this) .attr("r", (o) => (4 * scales.w) / 900) .attr("stroke-width", 1); }); circles.nodes().forEach(function (node) { let tippy_instance = tippy(node, { theme: "light-border", allowHTML: true, content: `

period:	${node.getAttribute( "data-period" )}
r:	${node.getAttribute("data-r")}

` }); tippy_instances.push(tippy_instance); }); } }); d3.select(curve_cnt).select("input[type=number]").style("width", "80px"); d3.select(curve_cnt).select("label").style("width", "80px"); d3.select(curve_cnt).attr("id", "curve_cnt_slider"); return curve_cnt; }33:T10d2,bif_pic = { let { w, h, rmin, rmax, pad, x_scale, y_scale, pts_to_path } = scales; // The container is a div that'll hold a canvas on which to draw the bifurcation diagram // and an SVG on which to overlay the curves let container = d3 .create("div") .style("width", `${w}px`) .style("height", `${h}px`) .style("position", "relative"); // Setup the canvas let canvas = container .append("canvas") .style("position", "absolute") .style("top", 0) .style("left", 0) .attr("width", w) .attr("height", h); let ctx = canvas.node().getContext("2d"); ctx.fillStyle = "black"; // Here, we set the globalAlpha of the canvas to help highlight // density in the bifurcation diagram ctx.globalAlpha = (0.1 * w) / 900; // and the SVG let svg = container .append("svg") .style("position", "absolute") .style("top", 0) .style("left", 0) .attr("width", w) .attr("height", h); // Draw the bifurcation diagram let N = 1000; let dr = (rmax - rmin) / N; for (let r = rmin; r <= rmax; r = r + dr) { let x = 0.5; for (let i = 0; i < 1000; i++) { x = f(r, x); ctx.fillRect(x_scale(r), y_scale(x), 1, 1); } } // Lay down the critical curves but set their opacity to // zero; we'll only display then on request. for (let n = 1; n <= max_period; n++) { let pts = d3.range(rmin, rmax + dr / 4, dr / 4).map(r => [r, F(n, r)]); svg .append("path") .attr("d", pts_to_path(pts)) .attr("id", `curve${n}`) .attr("class", "curve") .style("stroke", d3.schemeSet1[(n - 1) % 9]) .style("stroke-width", `${0.5 + 1.2 ** -(n - 8)}px`) .style("fill", "none") .style("opacity", 0); } // Draw the axes svg .append("g") .attr("transform", `translate(0, ${h - pad})`) .call(d3.axisBottom(x_scale)); svg .append("g") .attr("transform", `translate(${pad})`) .call(d3.axisLeft(y_scale)); // Lay down the labeled r-> and x| arrows indicating which axis is which, // which is a bit of a pain let label_group = svg.append("g"); label_group // from http://thenewcode.com/1068/Making-Arrows-in-SVG .append("svg:defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", 10) .attr("markerHeight", 7) .attr("refX", 0) .attr("refY", 3.5) .attr("orient", "auto") .append("polygon") .attr("points", "0 0, 10 3.5, 0 7"); label_group .append("path") .attr( "d", d3.line()([[x_scale(3.8), y_scale(0.03)], [x_scale(3.88), y_scale(0.03)]]) ) .style("fill", "none") .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); label_group .append("text") .attr("x", x_scale(3.78)) .attr("y", y_scale(0.025)) .attr("font-style", "italic") .text("r"); label_group .append("path") .attr( "d", d3.line()([[x_scale(2.63), y_scale(0.9)], [x_scale(2.63), y_scale(0.98)]]) ) .style("fill", "none") .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); label_group .append("text") .attr("x", x_scale(2.622)) .attr("y", y_scale(0.87)) .attr("font-style", "italic") .text("x"); // Controlled by the curve_cnt slider let critical_parameters = svg.append("g").attr("id", "critical_parameters"); critical_parameters .append("line") .attr("id", "critical_value") .attr("stroke", "black") .attr("x1", scales.x_scale(scales.rmin)) .attr("x2", scales.x_scale(scales.rmax)) .attr("y1", scales.y_scale(0.5)) .attr("y2", scales.y_scale(0.5)) .style("opacity", 0); // Respond to mouse input svg .on("mousemove", function(evt) { container.selectAll(".temp").remove(); let div2 = container .append("div") .attr("class", "temp") .style("pointer-events", "none") .style("position", "absolute") .style("top", `${h - w / 3 - pad}px`) .style("left", `${pad}px`) .style("width", `${w / 3}px`) .style("height", `${w / 3}px`) .append(() => cobweb_pic(x_scale.invert(evt.layerX), { w: w / 3, h: w / 3 }) ); }) .on("mouseleave", function() { container.selectAll(".temp").remove(); }); return container.node(); }34:T7e1,md`## Mathematical discussion The curves evident throughout the bifurcation diagram are the so-called *critical curves*. They are analyzed in great detail in a wonderful paper called [The Road to Chaos is Filled with Polynomial Curves](https://www.jstor.org/stable/2974876). Recall that the logistic map itself is defined by ${tex.block`f_r(x) = r\,x(1-x).`} The ${tex`n^{\text{th}}`} critical curve ${tex`F_n`} is then defined by iterating ${tex`f_r`} a total of ${tex`n`} times from its critial point ${tex`x=1/2`}. In symbols: ${tex.block`F_n(r) = f_r^n(1/2),`} which should be a polynomial in ${tex`r`}. For example, ${tex.block`\displaystyle F_1(r) = f_r(1/2) = r\,\frac{1}{2}\left(1-\frac{1}{2}\right) = \frac{r}{4} \: \text{ and}`} ${tex.block`\displaystyle F_2(r) = f^2_r(1/2) = f_r\left(\frac{r}{4}\right) = r\,\frac{r}{4}\left(1-\frac{r}{4}\right).`} Of course, a key question is *why* do these curves appear in the bifurcation diagram? To understand this, take a look at the dynamic image below. * The solid curve that we see is one of the critical curves; you can control which critical curve is displayed using the "curve" slider. * The two horizontal dashed lines define a narrow band about the critical point; you can control how narrow this band is using the "width" slider. Let's suppose that those two lines are at ${tex`x=0.5 \pm \varepsilon`}. * The dashed curve close to the critical curve shows a version of the critical curve if we started the iteration at ${tex`x=0.5 \pm \varepsilon`}, rather than at ${tex`x=0.5`}. Both dashed horizontal lines map to the same dashed curve, due to the symmetry in the logistic map. Now here's the critical issue: The narrow band about the critical point maps to a much more narrow band close to the critical curve. As a result, iterates of the logistic map are not uniformly distributed, rather they cluster about the critical curve. As you can see by experimenting with the curve slider, this phenomenon is most pronounced for small iterates. `35:Td04,{ //let n = 1; let w = width; let h = 0.6 * w; let svg = d3 .create("svg") .attr("width", w) .attr("height", h); 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])); let dr = 0.005; // let dx = 0.05; svg .append("line") .attr("x1", x_scale(rmin)) .attr("x2", x_scale(rmax)) .attr("y1", y_scale(0.5 - dx / 2)) .attr("y2", y_scale(0.5 - dx / 2)) .attr("stroke", "black") .attr("stroke-dasharray", "5 2"); svg .append("line") .attr("x1", x_scale(rmin)) .attr("x2", x_scale(rmax)) .attr("y1", y_scale(0.5 + dx / 2)) .attr("y2", y_scale(0.5 + dx / 2)) .attr("stroke", "black") .attr("stroke-dasharray", "5 2"); let pts0 = d3.range(rmin, rmax + dr / 4, dr / 4).map(r => [r, F(n, r)]); svg .append("path") .attr("d", pts_to_path(pts0)) .attr("id", `curve${n}`) .style("stroke", d3.schemeCategory10[n - 1]) .style("stroke-width", `2px`) .style("fill", "none"); let pts1 = d3 .range(rmin, rmax + dr / 4, dr / 4) .map(r => [r, FF(n, r, dx / 2)]); //.concat(_.clone(pts0).reverse()); svg .append("path") .attr("d", pts_to_path(pts1)) .attr("id", `curve${n}`) .style("stroke", d3.schemeCategory10[n - 1]) .style("stroke-width", "1px") .style("stroke-dasharray", "5 2") .style("fill", "none"); let pts2 = d3 .range(rmin, rmax + dr / 4, dr / 4) .map(r => [r, FF(n, r, -dx / 2)]); svg .append("path") .attr("d", pts_to_path(pts2)) .attr("id", `curve${n}`) .style("stroke", d3.schemeCategory10[n - 1]) .style("stroke-width", "1px") .style("stroke-dasharray", "5 2") .style("fill", "none"); svg .append("g") .attr("transform", `translate(0, ${h / 2})`) .call(d3.axisBottom(x_scale)); svg .append("g") .attr("transform", `translate(${pad})`) .call(d3.axisLeft(y_scale).ticks(4)); let label_group = svg.append("g"); label_group // from http://thenewcode.com/1068/Making-Arrows-in-SVG .append("svg:defs") .append("marker") .attr("id", "arrowhead") .attr("markerWidth", 10) .attr("markerHeight", 7) .attr("refX", 0) .attr("refY", 3.5) .attr("orient", "auto") .append("polygon") .attr("points", "0 0, 10 3.5, 0 7"); label_group .append("path") .attr( "d", d3.line()([[x_scale(3.8), y_scale(0.03)], [x_scale(3.88), y_scale(0.03)]]) ) .style("fill", "none") .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); label_group .append("text") .attr("x", x_scale(3.78)) .attr("y", y_scale(0.025)) .attr("font-style", "italic") .text("r"); label_group .append("path") .attr( "d", d3.line()([[x_scale(2.63), y_scale(0.9)], [x_scale(2.63), y_scale(0.98)]]) ) .style("fill", "none") .style("stroke", "black") .attr("marker-end", "url(#arrowhead)"); label_group .append("text") .attr("x", x_scale(2.622)) .attr("y", y_scale(0.87)) .attr("font-style", "italic") .text("x"); return svg.node(); }36:T6c0,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; }37:[{"id":"966195cf2e75b92a5544575864f47231b58351a12742a8e06100b30acd006e179dad476e077ffdbd0f1260b0d5588d125fb52ce8e3c7a4e182297fd5328e48bd","href":"https://static.observableusercontent.com/files/966195cf2e75b92a5544575864f47231b58351a12742a8e06100b30acd006e179dad476e077ffdbd0f1260b0d5588d125fb52ce8e3c7a4e182297fd5328e48bd","name":"superAttractingLogisticParameters@1.csv","type":"text/csv","lastModified":1631364085783.123,"size":1346},{"id":"436c00670fab2fcceec5b0fb2e473d4ff03cdf9df48f3a99f987d5134aea06dae8a9c6a40eceff285af5863568946f8d13d2c8725e670f5b5edf85c11f460325","href":"https://static.observableusercontent.com/files/436c00670fab2fcceec5b0fb2e473d4ff03cdf9df48f3a99f987d5134aea06dae8a9c6a40eceff285af5863568946f8d13d2c8725e670f5b5edf85c11f460325","name":"superAttractingLogisticParameters@2.csv","type":"text/csv","lastModified":1631407370783.418,"size":4450}] 2f:{"title":"Bifurcation diagram with critical curves","cells":[{"id":403,"value":"title = md`# Bifurcation diagram with critical curves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"viewof show_critial_parameters = {\n let show_critial_parameters = Inputs.toggle({\n label: \"Show super-attracting parameters:\"\n });\n d3.select(show_critial_parameters).on(\"change\", function () {\n d3.select(bif_pic).selectAll(\".super_attracting_parameter\").remove();\n d3.select(bif_pic).selectAll(\".curve\").style(\"opacity\", 0);\n if (show_critial_parameters.value) {\n d3.select(bif_pic).select(\"#critical_value\").style(\"opacity\", 1);\n } else {\n d3.select(bif_pic).select(\"#critical_value\").style(\"opacity\", 0);\n }\n });\n\n d3.select(show_critial_parameters)\n .attr(\"id\", \"show_critial_parameters_checkbox\")\n .select(\"label\")\n .style(\"width\", \"220px\");\n\n return show_critial_parameters;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof n = {\n let n = Range([1, 5], { step: 1, value: 2, label: \"curve:\" });\n d3.select(n)\n .select(\"label\")\n .style(\"width\", \"40px\");\n d3.select(n)\n .select(\"input[type=number]\")\n .style(\"width\", \"70px\");\n return n;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof dx = {\n let dx = Range([0, 0.2], { step: 0.001, value: 0.1, label: \"width:\" });\n d3.select(dx)\n .select(\"label\")\n .style(\"width\", \"40px\");\n d3.select(dx)\n .select(\"input[type=number]\")\n .style(\"width\", \"90px\");\n return dx;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"scales = {\n let w = width < 900 ? width : 900;\n let h = 0.625 * w;\n let rmin = 2.6;\n let rmax = 4;\n let pad = 30;\n let x_scale = d3\n .scaleLinear()\n .domain([rmin, rmax])\n .range([pad, w - pad]);\n let y_scale = d3\n .scaleLinear()\n .domain([0, 1])\n .range([h - pad, pad]);\n let pts_to_path = d3\n .line()\n .x(d => x_scale(d[0]))\n .y(d => y_scale(d[1]));\n\n return {\n w: w,\n h: h,\n rmin: rmin,\n rmax: rmax,\n pad: pad,\n x_scale: x_scale,\n y_scale: y_scale,\n pts_to_path: pts_to_path\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"f = (r, x) => r * x * (1 - x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"function F(n, r) {\n let x = 0.5;\n for (let i = 0; i < n; i++) {\n x = f(r, x);\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"function FF(n, r, eps) {\n let x = 0.5 + eps;\n for (let i = 0; i < n; i++) {\n x = f(r, x);\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"function make_cobweb(f, x0, xmin, xmax) {\n let x = x0;\n let y = x;\n let bail = 1500;\n let cobweb = [[x, y]];\n let i = 0;\n while (i < bail && xmin <= y && y <= xmax) {\n y = f(x);\n cobweb.push([x, y]);\n x = y;\n cobweb.push([x, y]);\n i++;\n }\n return cobweb;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"max_period = super_attracting_parameters.slice(-1)[0].period","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"super_attracting_parameters = await FileAttachment(\n \"superAttractingLogisticParameters@2.csv\"\n).csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"import { funplot } from \"@mbostock/funplot\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"import { Range } from '@observablehq/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"tippy_style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":805,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":660,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":809,"value":"funplot([f, (x) => x], {\n xdomain: [0, 1],\n ydomain: [0, 1],\n marginTop: (10 * w) / 300,\n marginRight: (10 * w) / 300,\n marginBottom: 0, //(10 * w) / 300,\n marginLeft: 0, //(10 * w) / 300,\n inset: 6,\n insetTop: 6,\n insetRight: 6,\n insetBottom: 0,\n insetLeft: 0,\n strokeWidth: 2.5,\n xticks: [0],\n yticks: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"w = 300","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}