Submission - Timeline Canvas

[tobua]

Created a dynamic chart using canvas for this challenge 🎯

Live Page: timeline-canvas.vercel.app ▲ Code: tobua/timeline-canvas Videos: 𝕏 Post

Rendering Charts

https://github.com/Algorithm-Arena/weekly-challenge-7-scores-timeline/assets/15127551/ac9fe51e-97a9-4043-bbfb-59db587ee3ea

Recording Video

https://github.com/Algorithm-Arena/weekly-challenge-7-scores-timeline/assets/15127551/d6142a45-7357-423c-b985-f270caae551a

Description

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.

This task was quite demanding, involving a substantial amount of mathematical work, and there are still a few rough edges to address. Furthermore, there is a significant potential for improvement in this chart. Some ideas that I conceived but couldn't find time to implement include:

• Dynamic labels for each axis
• Show chart values when hovering over the lines
• Create and publish as a plugin to npm
• Dark mode

Screenshots

[evgenyvinnik]

Thanks for advising Cursor AI - I have tried it - very convenient! Very nice! Especially for generating boilerplate code - it is doing really good job!

[nicogs]

Wow I really love this one!