While the below graphic looks a bit like a standard gif or maybe a d3.js graph, it's actually a React app backed by a simple JS graph implementation, and fully interactive in that you can pick any node you see, and that'll become the new focus root. Go on, click any node. Oh right, and because it's just DOM + CSS, there's some CSS transitions thrown in for free because it looks nicer than an instant redraw.
Oh, right, sorry: this is a simple graph visualisation of the "reversed" Collatz rules. The plain Collatz rules are kind of a little mathematical magic trick: pick any number, n, and if it's even, divide it by two. If it was odd, multiply it by three and then add one. The "Collatz conjecture" is that if you repeat this "algorithm", you will always end at 1. It might take a bit of time, but you will. I call this a magic trick, because no one's been able to prove this is true, let alone why this would be true. It's in a fun little group of hypotheses about how numbers work that mathematicians assume are true, but just don't have a proof for (another one such hypothesis is the Riemann hypothesis, which says "if we apply this one simple function to the natural numbers, then all the primes numbers will end up on the same straight line")
The graph above shows the opposite of the Collatz procedure: instead of taking a number and reducing it to 1, we start at 1 and apply the Collatz rules "in reverse", so any number can generate two new numbers by multiplying it by 2, as well as subtracting 1 and then dividing it by 3. The first step always yields a new number, the second step might yield a fraction, which we disregard entirely. What does the "number tree" look like when we do that? You're looking at it.
There's interesting properties here. We start with the numbers 1, 2 and 3, but almost immediately the number 4 pops up as an omnipresent number. We also see that if we have a number that yields an odd number from an even number, we can add them together to find "the next" odd number, or we can multiply the odd number by 4 and add 1, and get the same number. Finally, we see that we can actually rephrase the Collatz conjecture in a few interesting ways: we don't just "end up at 1", we apparently always end up at "some number that is a power of 2" (including 2 to the power 0, which is 1). We can make that claim even stronger and say that for every number there must be a finite length path that leads to a number that is strictly smaller (worse case, that's 1, best case, if we start with n it's n-1). Or, looking at the reversed sequence, we can claim that in order to the original rules to work, the reverse rules must generate ℕ (the set of all natural numbers).Are these rephrasings useful? Sort of, it's kind of hard to tell because it's entirely possible that mathematics doesn't actually (currently) have a framework that lets us prove the Collatz conjecture using any of the above properties or rephrasings. But they're certainly interesting!
Well in that case you might appreciate that this is all just React components. The graph is an "app" (we need a better name for that, really) backed by a tiny JavaScript node graph library. The JS library knows nothing about "what things should look like" but it's good at creating linked nodes, and the React code knows nothing about "what graphs are" but is really good at making UI libraries, so there's a tiny bit of magic JS glue that marries the two things together, being a graph flow algorithm: it simply takes a graph, walks the nodes, and assigns each node an x/y position. That's all it does, and that's all it needs to do in order to make the graph library and React work together to create a really nice graphing solution.
Nodes? those are just divs. The straight connections are SVG right? No, they're just divs with height 0 and a top border. So, the curved bows are SVG, right? No, why would they be? They're just divs with border-radius. So are the vertical bow labels separate things then? Hell no, they're the bow's div content, just rotated back 90 degrees. HTML+CSS ftw. Along with React.js of course. React ftw².
If you want to read through the source code, hit up http://github.com/Pomax/css-node-graph and if you have any questions or remarks, feel free to reach out in the form of an issue filed on the repo, or just tweet at me at @TheRealPomax.