Skip to content

zoltan-antal/algorithm-visualiser

Repository files navigation

Algorithm Visualiser

Live version of the app is available at: https://algorithms.zoltan-antal.dev

Description

Algorithm Visualiser is a web app that provides interactive visualisations of popular sorting algorithms. Users can observe the sorting process in real-time through side-by-side bar charts representing the arrays being sorted. The app offers a range of sorting algorithms including selection sort, bubble sort, insertion sort, merge sort, quicksort, and heap sort.

The visualisation is enhanced with interactive control buttons, allowing users to pause, rewind, fast-forward, and adjust the speed of the visualisation. Additionally, users can customise the input array by changing its size, value range & ordering, and regenerate the input arrays as needed.

Features

  • Side-by-side visualisation of sorting algorithms
  • Interactive control buttons
  • Customisable input arrays
  • Dark mode and high-contrast (colourblind-friendly) mode

Technologies used

  • TypeScript, HTML, CSS
  • React with Vite
  • Recharts (charting library)
  • GitHub Pages (hosting)

Future plans

Features and improvements planned for future releases:

  • Algorithm metrics: Implement metrics for comparing the performance of sorting algorithms such as number of comparisons, swaps, and time taken to complete the sorting process.
  • Memory complexity visualisation: Integrate functionality to display and compare the memory complexity of algorithms, helping users understand the efficiency trade-offs.
  • Custom ordered arrays: Enable users to import or create custom ordered arrays, allowing for more tailored testing scenarios.
  • Additional sorting algorithms: Introduce more sorting algorithms to expand the range of options available for comparison.
  • Additional algorithm categories: Incorporate a wider range of algorithms beyond sorting algorithms, such as pathfinding algorithms.
  • Performance optimisations: Optimise performance when handling larger input sizes and higher animation speeds in order to provide a smooth user experience across different devices and browsers.
  • Mobile support: Enhance the app to provide a responsive design, ensuring compatibility and usability on mobile devices.

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

Sorting algorithm visualiser app built using React & TypeScript

Resources

License

Stars

Watchers

Forks

Contributors

Languages