Giter VIP home page Giter VIP logo

algorithm-visualizer's Introduction

Algorithm Visualizer

Introduction

Welcome to Algorithm Visualizer, an interactive online platform designed to bring algorithms to life through visualization. Whether you're a student, teacher, or professional, our platform provides an engaging way to explore and understand various algorithms.

GitHub contributors GitHub license

Languages and Frameworks Used

Languages

Key Features

  • Visualize algorithms from code:

    Algorithm Visualizer allows you to witness algorithms in action by visualizing code written in various programming languages. This visual approach facilitates a better understanding of algorithmic behavior..

  • Learn about Algorithms:

    Explore our collection of tutorials, articles, and videos that serve as valuable resources for learning about algorithms.

algorithms

In this repository, you'll find visualizations of algorithms showcased in the website's side menu. Contributions here directly impact the educational content available on the platform. https://github.com/algorithm-visualizer/algorithms

tracers

Explore the various visualization libraries in different programming languages. These libraries extract visualization commands from code. https://github.com/search?q=topic%3Avisualization-library+org%3Aalgorithm-visualizer&type=Repositories

Live Demo

Learning an algorithm gets much easier with visualizing it. Don't get what we mean? Check it out:

algorithm-visualizer.orgScreenshot

Contributing

Our project consists of multiple repositories, each playing a crucial role in the Algorithm Visualizer ecosystem. If you're interested in contributing, check out the guidelines for the specific repository:

  • algorithm-visualizer is a web app written in React. It contains UI components and interprets commands into visualizations. Check out the contributing guidelines.

  • server serves the web app and provides APIs that it needs on the fly. (e.g., GitHub sign in, compiling/running code, etc.)

  • algorithms contains visualizations of algorithms shown on the side menu of the website.

  • tracers.* are visualization libraries written in each supported language. They extract visualizing commands from code.

Ready to contribute? Explore the repositories and become part of the Algorithm Visualizer community!

algorithm-visualizer's People

Contributors

64json avatar aminadav avatar amrsalama avatar anudeepreddy avatar archie94 avatar bryanchan777 avatar dependabot[bot] avatar gautamkrishnar avatar gitter-badger avatar jarettgross avatar jeff-tian avatar jeffslofish avatar johnhuichen avatar jonathanxia avatar makintunde avatar nadr0 avatar nem035 avatar piamancini avatar proshoumma avatar rajraku avatar rudranilbasu avatar sjsyrek avatar thomasthomas882 avatar tornjv avatar unfode avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

algorithm-visualizer's Issues

._isSelected ()

I think it would be good if we had tracer._isSelected () to determine if a particular element is selected or not.
Its not absolutely necessary, but I think it makes some tasks much easier. I've felt the need on several occasions.

Possible problem while running the project locally

I cloned the project and fired up the index.html. The environment loads, but the Data doesn't because the browser's Cross Origin Security Policy blocks it from loading.

So I wrote a simple Node Script which can be used as the entry point of the server instead.
So instead of launching index.html, people can launch the Script and get http://localhost:8080, then everything works flawlessly.
shot

The script (stays in the root directory) is:

server.js

process.chdir (__dirname);

var app = require ('express') (),
    serveStatic = require ('serve-static');

app
    .use (serveStatic (__dirname))
    .listen (process.env.NODE_ENV || 8080, function () {
        console.log ('Ready');
    });

Do you think it will be a good idea to upload the above server.js & Package.json on this repository for the ease of others?

Add Python Tracer

Hi, I'm interested in working on a Python tracer. It seems pretty straight forward: write the tracer, add a Dockerfile to the backend, and port the algorithms to Python (though this seems like it can be saved for later given neither C++ nor Java have any algorithms yet). Would this be a welcomed contribution?

npm run dev fail

fs.js:143
throw err;
^

Error: ENOENT: no such file or directory, scandir '/home/git/algorithm-visualizer/src/backend/public/algorithms'
at Object.fs.readdirSync (fs.js:893:3)
at listFiles (webpack:///./src/backend/common/util.js?:64:28)
at listDirectories (webpack:///./src/backend/common/util.js?:70:10)
at Hierarchy.refresh (webpack:///./src/backend/models/Hierarchy.js?:42:51)
at new Hierarchy (webpack:///./src/backend/models/Hierarchy.js?:34:10)
at Object.eval (webpack:///./src/backend/common/hierarchy.js?:16:17)
at eval (webpack:///./src/backend/common/hierarchy.js?:19:30)
at Object../src/backend/common/hierarchy.js (/home/git/algorithm-visualizer/build/backend/index.js:154:1)
at webpack_require (/home/git/algorithm-visualizer/build/backend/index.js:30:30)
at eval (webpack:///./src/backend/controllers/algorithms.js?:21:18)
at Object../src/backend/controllers/algorithms.js (/home/git/algorithm-visualizer/build/backend/index.js:190:1)
at webpack_require (/home/git/algorithm-visualizer/build/backend/index.js:30:30)
at eval (webpack:///./src/backend/controllers/index.js?:16:19)
at Object../src/backend/controllers/index.js (/home/git/algorithm-visualizer/build/backend/index.js:214:1)
at webpack_require (/home/git/algorithm-visualizer/build/backend/index.js:30:30)
at eval (webpack:///./src/backend/index.js?:25:20)

Complete code being displayed on single line

The entire code (in DP category at least) is being cramblef and displayed on a single line, making it hard to read. FYI, I am using mobile chrome browser. Rest all animation working good. Please take a look at this issue.

BST insertion is misleading

BST insert visualization and demonstration code needs some work. For example it appears as though the BST is some kind of static universally shaped thing but that’s because your insert order is the same every single time. This misdirection is only exaggerated by the gray, precomputed BST in the background.

Allowing for custom colors

When using the flood fill example I realized there was a limitation of color. I thought it would be useful to allow the coder to provide different colors to a Tracer for they can have custom select or notify etc.. colors.

Any thoughts on this? I am gonna mess around with the code to see if I can get something working.

Edit - Pull Request : #188

no tracer fixes in max_subarray

@parkjs814 I think you forgot to declare LogTracer and replace tracer._print() statements in max_subarray, probably because you didn't see it. Its under the Dynamic Programming category but you didn't see it because there was not enough space to include "max_subarray" tab. (If you stretch Data editor to the left, you'll see it).

I'm fixing max_subarray right now, just wanted to notify you.

npm run dev error

environment: os windows10, [email protected] [email protected]

error stack:

@algorithm-visualizer/[email protected] dev F:\git\algorithm-visualizer
NODE_ENV=development ./bin/www

'NODE_ENV' not an internal or external command, nor a runnable program Or batch files
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @algorithm-visualizer/[email protected] dev: NODE_ENV=development ./bin/www
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @algorithm-visualizer/[email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\soft\npm\npm-cache_logs\2019-06-09T16_45_57_481Z-debug.log

F:\git\algorithm-visualizer>npm run dev > error.log
'NODE_ENV' not an internal or external command, nor a runnable program Or batch files
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @algorithm-visualizer/[email protected] dev: NODE_ENV=development ./bin/www
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @algorithm-visualizer/[email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\soft\npm\npm-cache_logs\2019-06-09T16_47_19_414Z-debug.log

D:\soft\npm\npm-cache_logs\2019-06-09T16_47_19_414Z-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'D:\soft\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @algorithm-visualizer/[email protected]predev: @algorithm-visualizer/[email protected]
6 info lifecycle @algorithm-visualizer/[email protected]
dev: @algorithm-visualizer/[email protected]
7 verbose lifecycle @algorithm-visualizer/[email protected]dev: unsafe-perm in lifecycle true
8 verbose lifecycle @algorithm-visualizer/[email protected]
dev: PATH: D:\soft\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;F:\git\algorithm-visualizer\node_modules.bin;F:\git\algorithm-visualizer\node_modules.bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\Docker\Docker\Resources\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v10.0\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v10.0\libnvvp;D:\soft\Java\jdk_release\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;D:\soft\Git\cmd;D:\soft\pycSafefile\x64;D:\soft\apache-maven\release\bin;D:\soft\Anaconda3\Scripts;C:\Program Files\nodejs;C:\WINDOWS\System32\OpenSSH;C:\Go\bin;C:\Program Files\NVIDIA Corporation\NVSMI;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;D:\soft\gradle\latest\bin;D:\soft\npm;C:\Program Files\dotnet;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\ProgramData\chocolatey\bin;D:\soft\k8s\kubectl.exe;C:\Users\MARK\AppData\Local\Microsoft\WindowsApps;D:\soft\Microsoft VS Code\bin;C:\Users\MARK\AppData\Roaming\npm;C:\Users\MARK\go\bin;C:\Go\bin;;C:\Program Files\JetBrains\GoLand 2018.3.5\bin;C:\Program Files\JetBrains\IntelliJ IDEA 2019.1\bin;C:\Program Files\JetBrains\PyCharm 2018.3.5\bin;C:\Program Files\JetBrains\WebStorm 2018.3.5\bin;D:\soft\Fiddler;C:\Users\MARK\AppData\Local\Microsoft\WindowsApps;C:\Program Files\JetBrains\CLion 2019.1.4\bin;
9 verbose lifecycle @algorithm-visualizer/[email protected]dev: CWD: F:\git\algorithm-visualizer
10 silly lifecycle @algorithm-visualizer/[email protected]
dev: Args: [ '/d /s /c', 'NODE_ENV=development ./bin/www' ]
11 silly lifecycle @algorithm-visualizer/[email protected]dev: Returned: code: 1 signal: null
12 info lifecycle @algorithm-visualizer/[email protected]
dev: Failed to exec dev script
13 verbose stack Error: @algorithm-visualizer/[email protected] dev: NODE_ENV=development ./bin/www
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (D:\soft\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess. (D:\soft\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:962:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid @algorithm-visualizer/[email protected]
15 verbose cwd F:\git\algorithm-visualizer
16 verbose Windows_NT 10.0.17763
17 verbose argv "C:\Program Files\nodejs\node.exe" "D:\soft\npm\node_modules\npm\bin\npm-cli.js" "run" "dev"
18 verbose node v10.15.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error @algorithm-visualizer/[email protected] dev: NODE_ENV=development ./bin/www
22 error Exit status 1
23 error Failed at the @algorithm-visualizer/[email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Variables in script.js might get over-written

script.js uses eval () to execute code from data.js & code.js.
If a user intentionally or un-intentionally creates a variable which is being used by our script.js, that variable gets overwritten.

Eg-
In the Data Editor,
create variable like:

codeEditor = "hello world";

Now try running the visualization. The error toast appears because our script cannot find codeEditor.getValue property. (Notice line 11 of the Data Editor)

shot

Here, try this one more in the Data Editor:

dataEditor = "Hello world";  //you will not be able to write "hello world"

This is even more damaging. See the effect & you'll understand it.

(See js/script.js line 196)
I'm working on a solution for this. Let me know what you think.

Using MathJax

I think it would be useful to have Latex renderings of the space and time complexities when describing the algorithms. Right now its just being rendered with HTML tags. We could potentially use MathJax - Github, MathJax - Website.

The library would provide a cleaner rendering of the typical asymptotic notations. Also the creator would be able to provide proofs or more deeper explanations of space and time complexities.

Thoughts?

Edit: PR #209

Share limit because of GitHub Gist API

It seems GitHub Gist API limits the number of creating Gists from unauthenticated request.

{
    "message": "API rate limit exceeded for 173.185.182.82. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)",
    "documentation_url": "https://developer.github.com/v3/#rate-limiting"
}

Visual Editor

Allow the user to create the visual elements using Drag-&-Drop and automatically generate the code for it.

For instance, think MS Word: How it lets you create a Table with specified no. of rows & columns, then you write data in it. This automatically generates code for Array2DMatrix.

Sounds exciting to me, will start working on it if it seems beneficial to all
(others are most welcome to hop in!)

Deployment to Heroku

Due to some inconveniences of GitHub Pages including gulp confliction, it seems much better to deploy our repo to Heroku.
From now on, every commits pushed to master branch are automatically deployed to http://algo-visualizer.jasonpark.me/ or http://algorithm-visualizer.herokuapp.com, running on gulp.
What I'm going to do is that after DNS server is fully refreshed, I will redirect http://jasonpark.me/AlgorithmVisualizer to http://algo-visualizer.jasonpark.me/ because CNAME alias (connection between Heroku and domain jasonpark.me) doesn't support subdirectory but subdomain.

@nem035 @duaraghav8 @TornjV

Make the local version work fully offline!

Hi!
I love this project, it's awesome!
I successfully ran the project locally, but what a disappointment when I saw that unpkg.com is used a lot in some scripts!
It should run locally, like really locally, without an Internet connection!
I wanted to use this project in classes I teach, and I cannot rely on it if it needs Internet access.

Do you have any idea how I can easily change src/backend/tracers/js/worker.js to not load the scripts from https://unpkg.com/algorithm-visualizer@latest/dist/algorithm-visualizer.js and https://unpkg.com/babel-standalone@6/babel.min.js but from the node_modules where they should already be installed?

Thanks in advance 👏!

Need Scrolling feature for Files Bar

Under Dynamic Programming under Uncategorized, the max_subarray tab is not visible. If we stretch the Editor left a little bit, it becomes visible.
This becomes a problem when a category has more than a few programs. Their tabs get hidden.

We therefore need a way to notify the user that there may be more tabs to the right, which are hidden.
A suitable way would be to give a scrolling feature so the user knows that they can scroll to the right and see more visualizations under that category.

Add rich preview image when sharing the website on services like Slack, Whatsapp, etc.

Info about Open Graph:

Test with this URL:
http://richpreview.com/?url=http://jasonpark.me/AlgorithmVisualizer/

I'm happy to do a pull request once you tell me what image should be used. Apparently some services even support gif, which might be useful to explain how the site works.

Image Manipulation Module

Would a new module for image manipulations be possible useful to add to the tracer? It would allow for better visuals for algorithms like the discrete cosine transform.

Migration to React.js

I was looking into the code to add several more features, but I found it quite messy overall. Especially, CSS and Tracer parts were horrible as they were written not long after I began web programming. The readability got much better after @nem035 thankfully rewrote everything in ES6 (#48) about 2 years ago. (Already!) I believe migrating to React.js will do even more. I will be working on rewriting everything in the combination of React.js + SASS + Webpack to make the code more comprehensible and modularized. Several changes to UX/UI and Tracer will be followed.

Improving Tracer(s) API

I think we should make the arguments to each tracer API explicit. For example, this:

var G = WeightedUndirectedGraph.random(5, 1, 1, 9);

Is confusing to the user:
"What the heck do those numbers mean?"
"Oh yeah, I know what they mean but what's their order?"
"Why do I even bother anymoreeeeeeeee" 😄

Tracers should be changed to accept an options object with each property explicitly named. This will make things much clearer:

var G = WeightedUndirectedGraph.random({
    N: 5,
    ratio: 1, 
    min: 1, 
    max: 9
});

I also think we might need to change the names of individual parameters because, unless you're familiar with the code base, they don't tell you much. Perhaps something like this might work:

var G = WeightedUndirectedGraph.random({
    nodeCount: 5,
    pathRatio: 1, 
    minVal: 1, 
    maxVal: 9
});

Not suggesting these particular names but more descriptive names would definitely be useful.

Gitter account suggestion

Hello,
I find this project very interesting to all developers. Is it possible to create a gitter account to discuss ideas about this project.

Thanks a lot!
Maher

Enable Fullscreen

I'm currently working on full screen feature, here's the demo:
http://duaraghav8.github.io/AlgorithmVisualizer

(notice the Fullscreen button next to Share button on nav bar)
The feature will work with browsers which support the Fullscreen API (I've added vendor IDs for chrome, firefox, opera, IE)
(https://github.com/duaraghav8/AlgorithmVisualizer/blob/gh-pages/js/dom/enable_fullscreen.js)

The issue is: when I change to full screen, a lot of the App's UI distorts (notice the loading bar, side menu).
CSS needs to be written to handle elements in full screen, but I'm not that good with it. I've written the JS part. I'm currently looking into:

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
https://www.sitepoint.com/html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen

but if anyone is willing to take up the CSS part (or help me write it), please let me know, would appreciate it:)

Multiple tracers for a single view?

Is it possible to use more than 1 tracer for a single visualization? I'd like to use one for Directed Graph and another for 1D Array to display the progress. I tried a lot of things but it doesn't seem to be working.

Does the current implementation allow it?

Visual Array Dividers

For algorithms like merge and quick sort a visual indicator of a divide would be nice.

very quick version:

image

I think just a gap or a black line. Only chose red in my picture to be clear.

Examples suggest wrong time complexity

Selection Sort, for example, makes the algorithm look extremely (impossibly) good at first glance - O(n) - because it's not showing the majority of the steps.

Instead of

    for (var j = i + 1; j < D.length; j++) {
        if (D[j] < D[minJ]) {
            tracer._select(j);
            minJ = j;
            tracer._deselect(j);
        }
    }

it has to be more like

    for (var j = i + 1; j < D.length; j++) {
        tracer._select(j);
        if (D[j] < D[minJ]) {
            minJ = j;
        }
        tracer._deselect(j);
    }

Bubble Sort has the same problem, as do Quicksort and Mergesort.

Normally I wouldn't mind, as showing time complexity is probably not the scope of these examples or your visualization, but the examples suggest that this is intended for beginners, and it might give them a false sense of the time complexity of these basic algorithms.

By the way, I really like the visualization, I think it could be quite helpful to aid teaching about algorithms.

Dynamic loading of nodes in the visualization

An appropriate visualization for recursive algorithms would be to show the Recursion Tree as it develops. A good feature provided by tracer would be to allow the adding of more Nodes in the graph, which are then also added on to the screen during Run time.

Another feature could be to display custom text in the Nodes instead of the default numbers representing them.
Something like:

G.push ([1, 1, 0, 1]); //also, edit the rest of the Graph to accommodate 1 more Node tracer._updateGraph (G); //this updates the visualization to contain the new Node(s)

var labels = {0: "Node #0", 3: "Node #3"};
//labels for all the nodes, labels for Node 1 & 2 remain the default ones
tracer._updateLabels (labels);

TracerUtil

refineByType: function (item) {
  return $.isNumeric(item) ? this.refineNumber(item) : this.refineString(item);  
},
refineString: function (string) {
    return string === '' ? ' ' : string;
},
refineNumber: function (number) {
    return number === Infinity ? '∞' : number;
}

Jquery .isNumeric(Infinity) returns false, so shouldn't it be checked in refineString ?

Suggested project rewrite in ES6

I suggest that, while the codebase is relatively small, we rewrite the code in ES6, separating the appropriate logic into individual files (modules) - making it cleaner and easier to debug and maintain. Plus we can take advantage of many awesome new ES6 features such as arrow functions, destructuring, default parameters, rest/spread etc.

Suggested tools:

  • webpack
    • It would provide an automatic build system as well as a server, can support ES6 modules (awesome stuff) and also provides auto-reloading feature that would re-build the files and refresh the server on any change.
  • babel
    • Provides ES6 to ES5 transpilation for wider browser support.

Using a build system would allow us to compile, minimize and combine all the code into a single js file that can be added into index.html. This would provide optimized execution, a single code loading request, and it would leave the actual logic in the files themselves nice & clean for the programmer to look at.

gulp error

I got this error when I ran gulp:

Error: ENOENT: no such file or directory, lstat '/Users/link/workshop/AlgorithmVisualizer/css/algorithm_visualizer.css'

blob

Search Bar

The number of visualizations is growing fast. Eventually, we'll face 2 problems:

  1. Users will have a tough time finding a particular visualization (and determining if it exists at all) because they may not be able to guess the right category to look under. For instance, Longest Common Subsequence could come under String as well as under DP. A smoother way would be to just type in the algorithm in search bar and poof! you have it
  2. Anybody who wants to contribute a new visual will first have to determine whether a particular algo/DS already exists or not. This too becomes frustrating once we have too many visuals and no search bar to quickly filter.

I've started working on a search bar feature. Simple looking
Opinions?

Add documentation for local deploy

Hi,

I am trying to run algorithm-visualizer locally, but I am not very expert in running Node.js applications. So, it would be of great help for me if the local deployment process would be documented. Here's what I have tried to do, noting that I get an error at the end.

  1. I have cloned the project and cd into the directory: git clone https://github.com/algorithm-visualizer/algorithm-visualizer.git && cd algorithm-visualizer

  2. I use nvm to manage my Node.js installation. I have done npm install and the npm run build (see the full log)

  3. I run ./bin/www (see the full log)

Finally I get this error:

/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483
  languages[LANG].build().catch(function () {
                  ^

TypeError: Cannot read property 'build' of undefined
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483:19)
    at __webpack_require__ (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:21:30)
    at Object.defineProperty.value (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:85:18)
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:88:10)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
Unhandled rejection Error: npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

clean-webpack-plugin: /home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin has been removed.
/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483
  languages[LANG].build().catch(function () {
                  ^

TypeError: Cannot read property 'build' of undefined
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:1483:19)
    at __webpack_require__ (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:21:30)
    at Object.defineProperty.value (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:85:18)
    at Object.<anonymous> (/home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/src/backend/public/tracers/bin/build:88:10)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

    at /home/cristian/data/extra/algorithm-visualizer/algorithm-visualizer/build/backend/index.js:1:6251
    at ChildProcess.exithandler (child_process.js:282:5)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

If I go to http://localhost:8080 tehe interface is there, but it does not run, for example I get this:
graph search - bfs - mozilla firefox_145

Thanks for the great project and thanks in advance for your help.

LogTracer1's position

Reporting an unexpected behavior. LogTracer1 section appears above the Encryption & Decryption sections here (Trace tab).

capture

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.