A stable marriage algorithm visualizer.
This is a visualizer for the classic Gale-Shapley Algorithm. Implemented through a web-application and ES6. To support a wide array of browsers, a build system is in place which is Grunt. One of the tasks it automatically does is transpiling all the ES6 code to ES5 with the help of Babel. The build system also minifies the stylesheets and the final scripts.
npm install --dev- to install the task runner dependencies and be able to build the scripts.npm run build- to run Grunt and its tasks of automatically transpiling and minifying scripts.
Ease of use is a priority in this project as it is a visualizer. The controls have been made intuitive as possible. In this visualizer we have a set of entities or people in either group of male or female. Each male has a list of all the females arranged top to bottom starting with whom they prefer the most. The females also have a list of all the males arranged top to bottom also starting with whom they prefer the most. Here are the features included in the frontend:
Whenever the user changes any person's name, then that name is updated in real-time including on everybody else's list.
The user can also rearrange any entity's preference list by simply drag-and-dropping the names on the list.
A trash icon appears on any entity the user is currently hovering at. Removing that entity will also automatically remove all its occurence in everybody else's list.
When an entity is added, that entity is automatically inserted on the list of the opposite group.
The entities can be randomized by clicking the randomize icon.
There is a default configuration when the visualizer starts, one can revert back to that with the reset to default.
The user may download the configuration the visualizer currently has.
The user may load the configuration that they saved from the visualizer and is stored at their device.
The application seamlessly starts the animation on demand and the user can watch in ease, as the containers automatically adjust to accomodate for the entities that need to be shown.
The user may pause at any time the visualization is running.
There is also an option to simply skip all the visualization and get to the results right away.
When the visualization is finished, the results can be interacted with. The user can check the pairs simply by clicking on any entity.
The user may stop the visualization at any time and it will go back to their latest configuration.