Introduce an algorithm animation engine for Jupyter/Python.

.gitpod.yml

@@ -2,7 +2,8 @@ image:
   file: .gitpod.Dockerfile
 
 tasks:
-  - init: pip install -r ./requirements.txt
+  - before: sudo apt-get install -y graphviz
+    init: pip install -r ./requirements.txt
 
 vscode:
   extensions:

Algorithm/algviz/BubbleSort.ipynb

@@ -0,0 +1,99 @@
+{
+ "cells": [
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Bubble sort algorithm\n",
+    "\n",
+    "## Description\n",
+    "\n",
+    "The [bubble sort algorithm](https://en.wikipedia.org/wiki/Bubble_sort) compares the size of two adjacent elements in turn during each round of scanning and if the two elements are in reverse order, the algorithm swaps the positions of the two elements. Suppose the algorithm scans from left to right, and each time it puts the larger of the two adjacent elements in the right. Then after this round of scanning, the maximum value in the scanned sequence will run to the far right of the scanned sequence. The bubble sort algorithm repeats the scanning process until all the elements are sorted.\n",
+    "\n",
+    "The bubble sort algorithm is also a comparison-based sorting algorithm and the sorting results are stable. The bubble sort algorithm needs $O(n^2)$ comparison operations regardless of the sequence of the input data. Therefore, in some cases, the algorithm is not as efficient as the insertion sort algorithm. And for large-scale cases, the bubble sort algorithm also dones’t have any advantage except for its simplicity.\n",
+    "\n",
+    "You can try to change the `input_nums` and see how this algorithm works on different input.\n",
+    "\n",
+    "## How to run?\n",
+    "\n",
+    "All the animations in this notebook are rendered by the [algviz](https://algviz.com/) algorithm animation engine in real time. You can follow this [guidance](https://algviz.com/en/installation.html) to set up your local environment or run this repo on Gitpod directly.\n",
+    "\n",
+    "*If you meet any problem, please report an 👉[issue](https://github.com/zjl9959/algviz/issues)👈 here.*\n",
+    "\n",
+    "## Reference\n",
+    "\n",
+    "https://algviz.com/en/BubbleSort/"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "image/svg+xml": [
+       "<?xml version=\"1.0\" ?><svg width=\"261pt\" height=\"163pt\" viewBox=\"0.00 0.00 261.00 163.00\" xmlns=\"http://www.w3.org/2000/svg\"><desc>Generated by algviz-0.3.0(see https://algviz.com).</desc><style>.txt {alignment-baseline:middle;text-anchor:middle;font-family:Courier,monospace;}</style><g id=\"0\"><rect x=\"218.00\" y=\"6.00\" width=\"40.00\" height=\"101.43\" rx=\"4.00\" ry=\"4.00\" fill=\"#ffffff\" stroke=\"#7b7b7b\"/><text class=\"txt\" x=\"238.00\" y=\"56.71\" font-size=\"16.00\" fill=\"#000000\">5</text></g><g id=\"1\"><rect x=\"175.00\" y=\"26.29\" width=\"40.00\" height=\"81.14\" rx=\"4.00\" ry=\"4.00\" fill=\"#ffffff\" stroke=\"#7b7b7b\"/><text class=\"txt\" x=\"195.00\" y=\"66.86\" font-size=\"16.00\" fill=\"#000000\">4</text></g><g id=\"2\"><rect x=\"3.00\" y=\"107.43\" width=\"40.00\" height=\"40.57\" rx=\"4.00\" ry=\"4.00\" fill=\"#ffffff\" stroke=\"#7b7b7b\"/><text class=\"txt\" x=\"23.00\" y=\"127.71\" font-size=\"16.00\" fill=\"#000000\">-2</text></g><g id=\"3\"><rect x=\"89.00\" y=\"87.14\" width=\"40.00\" height=\"20.29\" rx=\"2.03\" ry=\"2.03\" fill=\"#ffffff\" stroke=\"#7b7b7b\"/><text class=\"txt\" x=\"109.00\" y=\"97.29\" font-size=\"16.00\" fill=\"#000000\">1</text></g><g id=\"4\"><rect x=\"46.00\" y=\"107.43\" width=\"40.00\" height=\"20.29\" rx=\"2.03\" ry=\"2.03\" fill=\"#ffffff\" stroke=\"#7b7b7b\"/><text class=\"txt\" x=\"66.00\" y=\"117.57\" font-size=\"16.00\" fill=\"#000000\">-1</text></g><g id=\"5\"><rect x=\"132.00\" y=\"46.57\" width=\"40.00\" height=\"60.86\" rx=\"4.00\" ry=\"4.00\" fill=\"#ffffff\" stroke=\"#7b7b7b\"/><text class=\"txt\" x=\"152.00\" y=\"77.00\" font-size=\"16.00\" fill=\"#000000\">3</text></g><g id=\"6\"><text x=\"20.00\" y=\"160.00\" font-size=\"12.00\" font-family=\"Courier,monospace\" fill=\"#7b7b7b\">0</text></g><g id=\"7\"><text x=\"63.00\" y=\"160.00\" font-size=\"12.00\" font-family=\"Courier,monospace\" fill=\"#7b7b7b\">1</text></g><g id=\"8\"><text x=\"106.00\" y=\"160.00\" font-size=\"12.00\" font-family=\"Courier,monospace\" fill=\"#7b7b7b\">2</text></g><g id=\"9\"><text x=\"149.00\" y=\"160.00\" font-size=\"12.00\" font-family=\"Courier,monospace\" fill=\"#7b7b7b\">3</text></g><g id=\"10\"><text x=\"192.00\" y=\"160.00\" font-size=\"12.00\" font-family=\"Courier,monospace\" fill=\"#7b7b7b\">4</text></g><g id=\"11\"><text x=\"235.00\" y=\"160.00\" font-size=\"12.00\" font-family=\"Courier,monospace\" fill=\"#7b7b7b\">5</text></g></svg>"
+      ],
+      "text/plain": [
+       "<algviz.vector.Vector at 0x240959e5220>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "import algviz\n",
+    "\n",
+    "def bubble_sort(data):\n",
+    "    viz = algviz.Visualizer(0.5)\n",
+    "    vector = viz.createVector(data, cell_size=(40, 160), histogram=True)\n",
+    "    for i in range(len(vector)):\n",
+    "        for j in range(len(vector)-i-1):\n",
+    "            if vector[j] > vector[j+1]:\n",
+    "                vector.mark(algviz.cRed, j)\n",
+    "                vector.mark(algviz.cGreen, j+1)\n",
+    "                viz.display()\n",
+    "                vector.swap(j, j+1)\n",
+    "            else:\n",
+    "                vector.mark(algviz.cRed, j+1)\n",
+    "                vector.mark(algviz.cGreen, j)\n",
+    "            viz.display()\n",
+    "        vector.mark(algviz.cGray, len(vector)-i-1, hold=True)\n",
+    "    vector.removeMark(algviz.cGray)\n",
+    "    viz.display()\n",
+    "\n",
+    "input_nums = [5, 4, -2, 1, -1, 3]\n",
+    "bubble_sort(input_nums)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.16"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "ba530876bec2e6283b9bacba891681e9dff395534db17e3ec46729d6d41aa6cf"
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}