Sort Visualizer - A Web Application built using React and is used to visualize classic sorting algorithms such as insertion sort, merge sort, quick sort, heap sort, etc.

Last update: May 9, 2022

Sort Visualizer

This is a Web Application built using React and is used to visualize classic sorting algorithms such as insertion sort, merge sort, quick sort, heap sort, etc.

This app is deployed with Heroku and can be accessed here: https://sortingg-visualizer.herokuapp.com/.

Heroku

Purpose

I wanted to improve my skills with React and also learn classic sorting algorithms. This project turned out to be a great way to achieve both of the aforementioned objectives at the same time.

Installation

If you wish to run this app locally, clone this repo and install the dependencies.

$ git clone https://github.com/harshit-katyal/sorting-visualizer.git
$ cd sorting-visualizer
$ npm install

Learn More

This project was bootstrapped with Create React App.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

App Conventions

The src folder contains three subdirectories:

  • algorithms - Each sorting algorithm is contained in its own file and imports helper functions from the helpers.js file, which is also present inside this folder. Each algorithm file has two named exports and a default export. The named exports are Key which returns a mapping of the color group and its meaning in the context of the algorithm, and Desc which returns an object containing the description and details of the algorithm. The default export, AlgorithmName is a function that takes in an array of numbers, sorts it and returns an object that contains every state change that the array has undergone. This object is used to create the animation.

  • _settings - This folder contains the the CSS files that only contain CSS custom properties declarations (also known as CSS variables) for the entirety of the app. These files are used to determine the overall look and feel of the application as all components rely upon these variables.

  • components - This folder is broken down into atoms, molecules and organisms subfolders as described in Brad Frost's Atomic Design.

    • The Atoms folder contains the smallest elements that are repeatedly used throughout the app - buttons, switches, backdrops, etc.

    • The Molecules folder contains more complex components that are used independently or as part of an organisms.

    • The Organisms folder contains components which are self contained sections of the app - the top bar, the visualizer, the app drawer, etc.

    • A case can be made for a component to be in either a molecule or organism. In these sorts of situations, I did not use an exact set of rules but rather left it to intuition.

    • Each component is contained in its own folder and has 2 files. The index.js file contains the JavaScript code for the component and the style.css file contains rules for classes which are written using an alternate style naming scheme of BEM that is described as follows:

      • Blocks are written in PascalCase and must match the name of the corresponding component.
      • Elements are also written in PascalCase and separated from the block using double underscores (__). eg. ComponentName__ElementName.
      • An element is always part of a block, not another element.
      • Modifiers are written in lowercase.
      • The modifier name is separated from the block or element name by a single underscore (_). eg. ComponentName_modifiername_modifiervalue

App Design

The design of the app was largely inspired by Google's Material Design Guidelines.

The app is responsive, meaning it works across a variety of screen sizes and dimensions.

Sort Visualizer - regular (light) mode

The app has a switch for turning on dark mode.

Sort Visualizer - dark mode

GitHub

https://github.com/harshit-katyal/sorting-visualizer
You might also like...

A Simple Charts Built With React

A Simple Charts Built With React

React-charts Please change the Label manually for now from: while (counter = js

Dec 28, 2021

Reagraph - a high-performance network graph visualization built in WebGL for React

🕸 reagraph WebGL Network Graphs for React Reagraph is a high-performance network graph visualization built in WebGL for React. If you are looking for

May 14, 2022

Casual data visualization framework, built on top of D3.js

d3 wrapper for casual data visualization Status v0.1.0 (alpha release), the npm package is available. The static bundle file is not supplied at now. I

Dec 9, 2021

common react charting components using chart.js

react-chartjs rich interactive react charting components using chart.js including Line chart Bar chart Radar chart Polar area chart Pie chart Doughnut

May 7, 2022

📊 📈 📉 React.js plugin for building charts using CSS

📊 📈 📉 React.js plugin for building charts using CSS

Chartify React.js plugin for building charts using CSS. Demo The source for this module is in the main repo. Example app is here. Backend service for

May 6, 2022

📊 📈 📉 React.js plugin for building charts using CSS

📊 📈 📉 React.js plugin for building charts using CSS

Chartify React.js plugin for building charts using CSS. Demo The source for this module is in the main repo. Example app is here. Backend service for

May 6, 2022

A simple component to render a sparkline with D3 using react-faux-dom.

A simple component to render a sparkline with D3 using react-faux-dom.

d3-react-sparkline A simple component to render a sparkline with D3 using react-faux-dom. Usage If you're working on this repository you can use make

May 25, 2021

React component for Globe Data Visualization using ThreeJS/WebGL

React component for Globe Data Visualization using ThreeJS/WebGL

react-globe.gl React bindings for the globe.gl UI component. A React component to represent data visualization layers on a 3-dimensional globe in a sp

May 7, 2022

⚛️ React Speedometer component using d3.js

⚛️ React Speedometer component using d3.js

react-d3-speedometer React library for showing speedometer like gauge using d3. Note: v1.x is compatible with React 17. Please use latest v0.x (v0.14.

Apr 5, 2022
📈 Workout Analytics - A React application to visualize workout data.

?? Workout Analytics A React application to visualize workout data. Try it at https://workout-analytics.netlify.app. ?? Status ??‍♂️ Scripts Run local

Jan 31, 2021
Time-series-forecasting-ARIMA-RNN - A Django & React application that forecast time series data using ARIMA and RNN models
Time-series-forecasting-ARIMA-RNN - A Django & React application that forecast time series data using ARIMA and RNN models

Time-series-forecasting-ARIMA-RNN Our paper | Time Series Forecasting Table of C

Jan 18, 2022
A price comparison engine using web scraping

ShopScrap Don't let the name fool you, I'm not shopping for scrap, I'm rather scraping shops here ?? This is a side project of mine, written entirely

Dec 11, 2021
Easy to use horizontal percentage bar framework-agnostic web component
Easy to use horizontal percentage bar framework-agnostic web component

ui-percentage-bar A lightweight, simple-to-use horizontal bar graph web component. Pass in the data array, with the value number and color of your cho

Dec 19, 2021
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

May 18, 2022
🐋 3D Docker containers viewer built with Electron, React and Three Fiber
🐋 3D Docker containers viewer built with Electron, React and Three Fiber

?? 3D Docker containers viewer built with Electron, React and Three Fiber

May 11, 2022
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

May 16, 2022
Lightweight React library for drawing network graphs built on top of SigmaJS

It makes easy to publish networks on Web pages and allows developers to integrate network exploration in rich Web applications. Use JSX for graph conf

May 7, 2022
A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.

May 13, 2022
Highcharts built with proper React components
Highcharts built with proper React components

Highcharts built with proper React components. More that just a simple wrapper - utilises the power of React props to create dynamic charts! React JSX

Apr 29, 2022