All Projects → skidding → Illustrated Algorithms

skidding / Illustrated Algorithms

Licence: mit
Interactive algorithm visualizations

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Illustrated Algorithms

Develop Source
Open source for developer.(开发资源整理:Java,Android,算法,iOS,MacOS等等)
Stars: ✭ 219 (-91.97%)
Mutual labels:  algorithm
Algorithms Sedgewick Python
Algorithms(4th edition) by Robert Sedgewick and Kevin Wayne exercises in python
Stars: ✭ 224 (-91.78%)
Mutual labels:  algorithm
Rust Algorithms
Common data structures and algorithms in Rust
Stars: ✭ 2,918 (+7.04%)
Mutual labels:  algorithm
Panyifei.github.io
请访问 http://panyifei.github.io 一个前端工程狮的打怪日常,欢迎star
Stars: ✭ 220 (-91.93%)
Mutual labels:  algorithm
C Algorithms
A library of common data structures and algorithms written in C.
Stars: ✭ 2,654 (-2.64%)
Mutual labels:  algorithm
Ringbuf
Lock-free ring buffer (MPSC)
Stars: ✭ 227 (-91.67%)
Mutual labels:  algorithm
.net Big O Algorithm Complexity Cheat Sheet
Big-O complexities of common algorithms used in .NET and Computer Science.
Stars: ✭ 215 (-92.11%)
Mutual labels:  algorithm
Algorithm
我用Python写的一些算法
Stars: ✭ 250 (-90.83%)
Mutual labels:  algorithm
Harmony
Fast, sensitive and accurate integration of single-cell data with Harmony
Stars: ✭ 223 (-91.82%)
Mutual labels:  algorithm
Skeleton Tracing
A new algorithm for retrieving topological skeleton as a set of polylines from binary images
Stars: ✭ 241 (-91.16%)
Mutual labels:  algorithm
Javascript Total
Сборник практических вопросов, задач разного уровня сложности, сниппетов (утилит), паттерны проектирования, а также полезные ссылки по JavaScript
Stars: ✭ 214 (-92.15%)
Mutual labels:  algorithm
Ngraph.path
Path finding in a graph
Stars: ✭ 2,545 (-6.64%)
Mutual labels:  algorithm
Merkletreejs
🌱 Construct Merkle Trees and verify proofs in JavaScript.
Stars: ✭ 238 (-91.27%)
Mutual labels:  algorithm
Hackerrank
Solution to HackerRank problems
Stars: ✭ 218 (-92%)
Mutual labels:  algorithm
Delaunator Cpp
A really fast C++ library for Delaunay triangulation of 2D points
Stars: ✭ 244 (-91.05%)
Mutual labels:  algorithm
Ekalgorithms
EKAlgorithms contains some well known CS algorithms & data structures.
Stars: ✭ 2,421 (-11.19%)
Mutual labels:  algorithm
Fastrange
A fast alternative to the modulo reduction
Stars: ✭ 230 (-91.56%)
Mutual labels:  algorithm
Leetcode
Solutions to LeetCode problems; updated daily. Subscribe to my YouTube channel for more.
Stars: ✭ 3,090 (+13.35%)
Mutual labels:  algorithm
Awesome Algorithm Books
📚 awesome algorithm books I've collected 【不定期更新】 搜集整理的算法书籍(经典算法、ML/DL算法、面试算法、比赛算法等)
Stars: ✭ 245 (-91.01%)
Mutual labels:  algorithm
Rethink C
A reuseable codebase for C Programming Language.
Stars: ✭ 241 (-91.16%)
Mutual labels:  algorithm

Illustrated Algorithms

Algorithm → AST → CSS (3 x JavaScript)

Binary search

Inspired by Grokking Algorithms and python-execution-trace, this project aims to reveal the mechanics behind algorithms via interactive visualizations of their execution.

Visual representations of variables and operations augment the control flow, alongside actual source code. You can fast forward and rewind the execution to closely observe how an algorithm works.

Disclaimer ✌️

Edge cases and optimizations are beyond the scope of this project. The featured implementations are chosen for their simplicity and do not promise to work for data sets different from the illustrated ones. Please rely on other resources for learning algorithms in depth, from Wikipedia to other visualization projects. Also see community-driven Footnotes. Thanks.

Principles

  • The same code that is displayed next to the illustration is also decorated using babel-plugin-trace-execution and executed to record the context at every step. Literally the same source file.
  • Going back and forth between function execution (and call stack when algorithm uses recursion) is effortless. So is pausing and resuming.
  • Visualizations are easy to follow, fun to play with and simple enough to fit inside the screen of any modern phone.

Work in progress

Dynamic styles

This project uses styled-jsx, but takes the idea of CSS-in-JS even further. Sizing, positioning and transition offsets are computed by JS, all before elements hit the DOM. This provides complete control over layout (e.g. font scaling relative to container width, rounded to a multiplier of 2) and animation (e.g. pausing in the middle of a transition and rewinding). It's a wild concept that hopefully gets mainstream someday.

How to contribute

Consider the following actions if you want to advance this project:

  • Find and/or fix bugs
  • Add tests to babel-plugin-trace-execution
  • Improve rendering perf (already decent, but not ideal due to how styles are applied)
  • Propose algorithms to add (that can fit in a func <=25 lines of ES6)
  • Create elegant illustrations (sketches/wireframes do) – Hello graphic designers and people who draw!

Before submitting a PR, make sure to:

  • Briefly describe the value of your contribution
  • Stay in line with the project's mission (i.e. to make algorithms easy, see above sections)
  • Test code before committing it via npm run test
  • Thoroughly test the visual experience you're creating (e.g. algorithms must fit nicely on the screen)

Development

npm i
# Start Next.js server (localhost:3000)
npm run dev
# Run tests
npm test
# Start React Cosmos playground (localhost:8989)
npm run cosmos

Footnotes

While this project doesn't focus on algorithm implementation specifics, here's a list of valuable insights brought up by the community which serves to complement the visuals.

Binary Search

  • #21 Calculating mid can be improved to avoid overflow when list is sufficiently large enough (@mhaji)

Quicksort


Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].