Sorting Visualiser

Visualise and benchmark sorting algorithms
View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Components
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

This is a web application created to visualise all sorts of sorting algorithms and to benchmark them in order to be able to compare them

What it does:

• Lets the user choose between a list of implemented sorting algorithms
• Lets the user customise the application behaviour by modifying given settings
• Visualise results, directly on canvas or having charts (ex. pie-chart) and table results

How it does it:

• All sorting algorithms are implemented in place, so that the input array reference is shared between the UI component that renders the animated charts and the sorting algorithm function (mutable array). This allows real-time drawing, as the UI gets re-rendered automatically if the internal representation of any input variable changes (array in this case) - see Angular Change Detection and how it is triggered for more information

Components

I've tried to create this application as modular as possible, by creating loosely-coupled interactions between components using services and RxJS in Angular

Here is a list of components (main-layout deals with rendering the needed components):

• Sorting selection
• Modular sorting chart/canvas
• Settings
• Results:
  • Bar chart
  • Line chart
  • Pie chart
  • Table
  • Loading HoC

Built With

Frameworks:

• Angular
• Angular Material

Libraries / plugins / add-ons / toolkits:

• Ng2-Charts
• Ngx-color-picker
• Boostrap

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

A list of prerequisites in order to run the project:

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/mihai10001/sorting_visualiser.git

2. From the root folder

   cd ./sorting-visualiser

3. Install NPM packages

   npm install

4. Run the application with NPM

   npm run start

Docker

If you prefer using Docker, you can build and run the application using the following commands:

docker build -t sorting-visualiser .
docker run -d sorting-visualiser

Usage

Pick a list of sorting algorithms from the selection dropdown, and press the Play button

Customise any preferred settings from the settings area

Please feel free to add new sorting algorithms by modifying this file. If you want results displayed, follow the interface for defining a sorting function from the file above, and return a Results object at the end of the function

Roadmap

Version 2.0

• Will contain many more sorting algorithms
• Will fix the delay logic that biases algorithms by swaps (rather by swaps and comparisons)
• Might defer the sorthing algorithms execution to different threads (web-workers) to alleviate processes running on the main UI thread

Version 3.0

• Maybe will find a way to implement algorithms that are not sorted in place

See the open issues for a list of proposed features (and known issues).

Contributing

Feel free to reuse any of the code from this project. Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Iliuta Mihai-Victor - [email protected]

Project Link: https://github.com/mihai10001/sorting_visualiser

It is one of the projects I've always wanted to create because it ties together knowledge from many areas I'm interested in, such as algorithms, benchmarking, animations and UI interactions, etc.