A simple 3x+1 visualiser

TL;DR

• Link: https://thecashewtrader.gitlab.io/3x-1/
• Source: https://gitlab.com/thecashewtrader/3x-1
• License: GPL V3
• Inspired by: https://odysee.com/@veritasium:f/the-simplest-math-problem-no-one-can:7

What is 3x+1?

3x+1 is a simple math problem. You start by plotting a number, say x, on the graph. If x is even, you plot x/2, otherwise you plot 3x+1, stopping when x=1.
For example, the 3x+1 array for 3 would be:

[3, 10, 5, 16, 8, 4, 2, 1]

Features of the visualiser

The visualiser is still in it's early stages, with a lot of glue code and styling issues. The main features for now are:

• Generate an interactive graph for any number.
• Zoom, pan, and generally navigate the graph
• Export said graph as an image

Demo

The website

The image output

The tools used

• Svelte - Frontend framework
• Vite - Bundler
• TailwindCSS + DaisyUI - UI library/framework
• Chart.js - To plot the graph
• Chart.js zoom plugin - To add interactivity
• Hammer.js - Used under the hood by Chart.js zoom plugin for gesture recognition