Widgets

How to Add a Bifurcation Diagram to Your Website

LK Forge · 4 min read · Updated September 2026

You can add an interactive bifurcation diagram to any website, blog, or classroom page with a single line of code — free, with no sign-up, no plugin, and no script to install. It draws the single most famous picture in chaos theory: slowly turn up the growth rate of the logistic map and watch one steady value split into two, then four, then a blur of chaos. This guide covers the fastest way to embed the tool, what it shows, and where it works.

The quickest way: paste one embed snippet

An embed is just an <iframe> that loads the simulator from lkforge.com, plus a small credit line. Copy this into your page’s HTML where you want the widget to appear:

<iframe src="https://lkforge.com/embed/bifurcation-diagram/"
        width="100%" height="840" loading="lazy"
        style="border:0;max-width:560px"
        title="Bifurcation Diagram by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/bifurcation-diagram/">Bifurcation Diagram</a>
   by <a href="https://lkforge.com/">LK Forge</a></p>

The <iframe> is the live simulator; the <p> underneath is a plain credit link. Keep that line — the visible link is what keeps the widget free to embed. You can also copy this exact code straight from the LK Forge widget gallery.

What the widget shows

The diagram opens already plotted across the full range of r, so a visitor sees the whole cascade at once and can then dig in:

  • Sweep the growth rate r: slide it across the canvas and read where steady behaviour gives way to two-cycles, four-cycles and chaos.
  • Drag a box to zoom: recompute any fork at full detail and find a shrunken copy of the whole diagram inside it — the fractal, self-similar cascade.
  • Pick an r for its orbit: the inset draws that value’s cobweb plot with the detected period beside it, connecting the picture to the underlying iteration.
  • Presets and point density: jump to the period-doubling region or the period-3 window, and raise points-per-column for a denser plot.

Pick the right height

The snippet uses height="840", which fits the plot, the sliders and the orbit inset without clipping even on a narrow phone, where they stack into one column below the diagram. On a wider page the widget centres within its max-width:560px. That single height works across screen sizes, so there is nothing to tweak for mobile.

Where it works

Because it is a standard iframe, the embed works anywhere you can add HTML:

  • WordPress: add a Custom HTML block and paste the snippet.
  • Squarespace: use a Code / Embed block.
  • Wix: add an Embed HTML / iframe element.
  • Ghost: insert an HTML card.
  • Notion: paste the /embed/bifurcation-diagram/ URL and choose "Create embed".
  • Plain HTML, an intranet, or a lesson page: paste the snippet straight into the markup.

That’s the whole job. Copy the embed code from the widget gallery and paste it wherever a lesson or a blog post on chaos theory, the logistic map or period doubling needs a diagram students can actually sweep and zoom.

Grab the embed code from the LK Forge widget gallery — free, no sign-up.

Open the Bifurcation Diagram

Frequently asked questions

What can visitors do with the embedded bifurcation diagram?
They can slide the growth rate r along the canvas and watch a single stable value split into two, then four, then a dense band of chaos. Dragging a box zooms into any fork, recomputing just that window; a cursor pick shows the orbit behind any r as a cobweb plot with its detected period; and preset buttons jump straight to the period-doubling region and the period-3 window.
Does zooming really reveal a fractal?
Yes. Drag a box over any fork and the simulator recomputes just that window at full detail, revealing a shrunken copy of the entire diagram inside it. The period-doubling cascade is self-similar at every scale, so students can keep zooming and keep finding the same branching structure — a Reset zoom button returns to the full view.
What is the diagram actually plotting?
Each vertical slice is one value of the growth rate r, increasing left to right. Above it the widget plots the handful of population values the logistic map x → r·x·(1−x) keeps returning to after the transient dies away. One dot is a steady state, two means it alternates, and a smear means it never repeats — that is chaos, read straight off the picture.
What iframe height should I use, especially on mobile?
The snippet ships with height="840", which is tall enough that the plot, the sliders and the orbit inset all fit without clipping even on a narrow phone, where the controls stack into a single column below the diagram. On a wider page the widget simply centres within its max-width of 560px, so the same height works across screen sizes.