Dynamically generated timeline chart in the browser. Submission for the seventh weekly challenge on Algorithm Arena. The project uses Canvas, Cursor AI, Bun, React, TypeScript, Rsbuild and Biome.
The chart is dynamically rendered afresh with each frame in an HTML canvas element, ensuring a smooth and dynamic appearance. When viewed in the browser, the chart is fully responsive. Users can choose from various data sources, some real and others filled with random values at runtime. Underneath the chart, a set of options allows users to configure various parameters to tailor the chart rendering to their specific needs. Additionally, a performance indicator is provided to show whether each frame can be rendered within the allotted time. To enhance the smoothness of the chart lines, they are rendered as cubic splines. The canvas animation can be recorded and downloaded as an mp4 video, with optimal results in Safari and some compatibility issues in Chrome.
I found the implementation of this challenge in Cursor AI particularly effective, leveraging AI coding assistance to a greater extent than ever before. Prior to this project, my knowledge of canvas was limited, but with the support of the default language model, which possesses extensive knowledge of the canvas interface and its usage, the process became surprisingly helpful.
See this 𝕏 Post or try the live version.
bun install
bun start # Start and open the application in the browser.
bun format # Format files with Biome.
bun lint # Lint files with Biome.
bun run build & bun preview # Production preview.