AlgoVis.io

AlgoVis is a passion project aimed at helping everybody understand algorithms a little better by using easy to understand visualizations, concise explanations and dynamic code highlighting showing exactly what's happening.

📑 Table of Contents

• ✌️ General
  • 👋 Introduction
  • 🖥️ Setup
  • 📈 Algorithms
  • 👀 Example visualizations
• 🧑‍💻 Technical stuff
  • 🚀 Behind the visualizations
  • 📖 Documentation
  • ☑️ Full list of algorithms and data structures
    • Sorting
    • Graphs
    • Pathfinding
    • Maze generation
    • Data structures
• 📝 Contributing

✌️ General

👋 Introduction

AlgoVis.io is an online algorithm visualization tool written using HTML, CSS, JS, jQuery and d3.js.

🖥️ Setup

You do not need to download / clone / fork / whatever anything to test the website, as a live version can be found on my GithubPages portfolio!

If you wish to have a local copy for testing all you need to do is either fork and clone the repository if you want to contribute or download one of the releases found here if you just want to play around with it. There are no complicated setup steps to get it up and running. You won't need a webserver as I'm not using php or any other server-side languages in this project.

📈 Algorithms

At the time of writing this readme, I've implemented visualizations for 24 algorithms in 3 categories and 4 data structures.

The 3 categories are:

• sorting
• graphs
• pathfinding and maze generation

A full list of all algorithms can be found under Full list of algorithms.

👀 Example visualizations

Selection sort:

Kruskal's algorithm:

Dijkstra's algorithm:

Growing tree algorithm:

Stack:

🧑‍💻 Technical stuff

🚀 Behind the visualizations

I've made the visualizations using d3.js. All visualizations are contained in an <svg> and are essentially just manipulations of svg elements. As this is the first time I've used d3.js, there's probably a lot of room for improvement in my code.

📖 Documentation

I've written jsDoc comments for every class and module to make it easier to understand what everything does. You can find all auto-generated html files in the documentation folder.

☑️ Full list of algorithms and data structures

Sorting

• Bogosort
• Bubblesort
• Cocktail shaker sort
• Combsort
• Counting sort
• Gnomesort
• Insertion sort
• Quicksort
• Radix sort
• Selection sort

Graphs

• Breadth-first search
• Depth-first search
• Kosaraju's algorithm
• Kruskal's algorithm
• Prim's algorithm
• Tarjan's algorithm

Pathfinding

• A* algorithm
• Breadth-first search
• Depth-first search
• Dijkstra's algorithm

Maze generation

• Recursive DFS
• Growing tree algorithm
• Binary tree algorithm
• Sidewinder algorithm

Data structures

• Doubly linked list
• Hash table
• Linked list
• Stack

📝 Contributing

If you've found a bug or want to add an algorithm feel free to fork this repository and open pull requests :).