**Array1DTracer** inherits **[Array2DTracer](Array2DTracer)**.

| Method | Description |

|--------|-------------|

| **Array1DTracer**((String) name) | create Array1DTracer and set its name |

| **attach**((ChartTracer) chartTracer)| automatically visualize array data to the bar chart |

| **palette**((Object) {selected, notified, default})| set colors (e.g., `{selected: 'green', notified: '#FFA500', default: 'rgb(255,255,255)'}`) |

| **_setData**((Number[]) data)| set one-dimensional array data to visualize |

| **_notify**((Number) idx, (Number) v) | notify that the value of element _idx_ has been changed to _v_ |

| **_denotify**((Number) idx) | stop notifying that the value of element _idx_ has been changed |

| **_select**((Number) s, (Number) e) | select a range between elements _s_ and _e_ |

| **_select**((Number) idx) | select element _idx_ |

| **_deselect**((Number) s, (Number) e) | deselect a range between elements _s_ and _e_ |

| **_deselect**((Number) idx) | deselect element _idx_ |

| **_separate**((Number) idx) | put a divider between elements _idx_ and (_idx+1_) |

| **_deseparate**((Number) idx) | remove a divider between elements _idx_ and (_idx+1_) |

| **_clear**() | erase traces on the array |

| **_wait**() | wait for a certain amount of time |

[Show examples](https://github.com/search?utf8=✓&q=Array1DTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)

**Array2DTracer** inherits **[Tracer](Tracer)**.

| Method | Description |

|--------|-------------|

| **Array2DTracer**((String) name)| create Array2DTracer and set its name |

| **palette**((Object) {selected, notified, default})| set colors (e.g., `{selected: 'green', notified: '#FFA500', default: 'rgb(255,255,255)'}`) |

| **_setData**((Number[][]) data)| set two-dimensional array data to visualize |

| **_notify**((Number) x, (Number) y, (Number) v) | notify that the value of (x, y) has been changed to _v_ |

| **_denotify**((Number) x, (Number) y) | stop notifying that the value of (x, y) has been changed |

| **_select**((Number) sx, (Number) sy, (Number) ex, (Number) ey) | select a rectangle formed by (sx, sy) and (ex, ey) |

| **_select**((Number) x, (Number) y) | select (x, y) |

| **_selectRow**((Number) x, (Number) sy, (Number) ey) | equivalent to **_select**(x, sy, x, ey) |

| **_selectCol**((Number) y, (Number) sx, (Number) ex) | equivalent to **_select**(sx, y, ex, y) |

| **_deselect**((Number) sx, (Number) sy, (Number) ex, (Number) ey) | deselect a rectangle formed by (sx, sy) and (ex, ey) |

| **_deselect**((Number) x, (Number) y) | deselect (x, y) |

| **_deselectRow**((Number) x, (Number) sy, (Number) ey) | equivalent to **_deselect**(x, sy, x, ey) |

| **_deselectCol**((Number) y, (Number) sx, (Number) ex) | equivalent to **_deselect**(sx, y, ex, y) |

| **_separate**((Number) x, (Number) y) | put dividers between _x_-th and (_x+1_)-th rows and between _y_-th and (_y+1_)-th columns |

| **_separateRow**((Number) x) | put a divider between _x_-th and (_x+1_)-th rows |

| **_separateCol**((Number) y) | put a divider between _y_-th and (_y+1_)-th columns |

| **_deseparate**((Number) x, (Number) y) | remove dividers between _x_-th and (_x+1_)-th rows and between _y_-th and (_y+1_)-th columns |

| **_deseparateRow**((Number) x) | remove a divider between _x_-th and (_x+1_)-th rows |

| **_deseparateCol**((Number) y) | remove a divider between _y_-th and (_y+1_)-th columns |

| **_clear**() | erase traces on the array |

| **_wait**() | wait for a certain amount of time |

* [Array1DTracer](Array1DTracer)

[Show examples](https://github.com/search?utf8=✓&q=Array2DTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)

**ChartTracer** inherits **[Tracer](Tracer)**.

| Method | Description |

|--------|-------------|

| **ChartTracer**((String) name)| create ChartTracer and set its name |

| **palette**((Object) {selected, notified, default})| set colors (e.g., `{selected: 'green', notified: '#FFA500', default: 'rgb(255,255,255)'}`) |

| **_setData**((Number[]) data)| set one-dimensional array data to visualize |

| **_notify**((Number) idx, (Number) v) | notify that the value of element _idx_ has been changed to _v_ |

| **_denotify**((Number) idx) | stop notifying that the value of element _idx_ has been changed |

| **_select**((Number) s, (Number) e) | select a range between elements _s_ and _e_ |

| **_select**((Number) idx) | select element _idx_ |

| **_deselect**((Number) s, (Number) e) | deselect a range between elements _s_ and _e_ |

| **_deselect**((Number) idx) | deselect element _idx_ |

| **_clear**() | erase traces on the chart |

| **_wait**() | wait for a certain amount of time |

[Show examples](https://github.com/search?utf8=✓&q=ChartTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)

**NOTE**: Check out [**Project Details**](Project-Details) before running it locally!

To add changes and improvements or resolve issues, these are the usual steps:

1. Fork the project on Github then clone it to your machine:

```bash

git clone https://github.com/<your-username>/AlgorithmVisualizer # clone your forked repo

cd AlgorithmVisualizer # navigate inside the created directory

git submodule init # initialize wiki submodule

git submodule update # setup wiki submodule updates

```

2. Your fork's remote repository should be named `origin` by default, so add the main repository as a remote as well and give it a name to distinguish it from your fork (something like `main` would work):

```bash

git remote add main https://github.com/parkjs814/AlgorithmVisualizer

```

3. Create a branch addressing the issue/improvement you'd like to tackle.

```bash

git checkout -b my-problem-fixer-branch

```

4. Make your changes and push to `my-problem-fixer-branch` on your repo

```bash

# write some awesome code and then ...

git add .

git commit -m "Explain my awesome changes"

git push origin my-problem-fixer-branch

```

5. Next create a pull request from `my-problem-fixer-branch` branch on `origin` to `master` branch on `main`.

6. Once approved, just delete `my-problem-fixer-branch` both locally and remotely because it's not needed anymore.

7. Finally, checkout `master` locally, pull the approved changes from the `main` repo, and push them to your `origin` repo:

```bash

git checkout master # checkout master locally

git pull main master # pull new changes from main repository

git push main master # push the changes to your fork

```

That's it, everything should be in sync now.

If you run into problems, feel free to [ask us for help on gitter](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

As mentioned, check out [**Project Details**](Project-Details) for more information on how to run the project.

**DirectedGraphTracer** inherits **[Tracer](Tracer)**.

| Method | Description |

|--------|-------------|

| **DirectedGraphTracer**((String) name)| create DirectedGraphTracer and set its name |

| **attach**((LogTracer) logTracer)| automatically print log when visiting or leaving nodes |

| **palette**((Object) {visited, left, default})| set colors (e.g., `{visited: 'green', left: '#FFA500', default: 'rgb(255,255,255)'}`) |

| **_setTreeData**((Number[][]) tree, (Number) root) | set tree data to visualize |

| **_setData**((Number[][]) graph) | set graph data to visualize |

| **_visit**((Number) target, (Number) source) | visit _target_ node from _source_ node |

| **_leave**((Number) target, (Number) source) | leave _target_ node to _source_ node |

| **_clear**() | erase traces on the graph |

| **_wait**() | wait for a certain amount of time |

* [UndirectedGraphTracer](UndirectedGraphTracer)

* [WeightedDirectedGraphTracer](WeightedDirectedGraphTracer)

[Show examples](https://github.com/search?utf8=✓&q=DirectedGraphTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)

Check out:

- [**Contributing**](Contributing) for details on how to contribute to our project and

- [**Project Details**](Project-Details) for details on how to build/run the project

| Path | Description |

|------|-------------|

| [/algorithm/category.json](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/algorithm/category.json) | This file contains the list of categories and their algorithms. |

| [/algorithm/[category]/[algorithm]/desc.json](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/algorithm/graph_search/dfs/desc.json) | This file contains the description of the algorithm and the list of its examples. |

| [/algorithm/[category]/[algorithm]/[example]/data.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/algorithm/graph_search/dfs/tree/data.js) | This file predefines data variables that will be shown in a visualizing module. |

| [/algorithm/[category]/[algorithm]/[example]/code.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/algorithm/graph_search/dfs/tree/code.js) | This file actually implements and visualizes the algorithm. |

* [Tracer](Tracer)

* [LogTracer](LogTracer)

* [Array2DTracer](Array2DTracer)

* [Array1DTracer](Array1DTracer)

* [DirectedGraphTracer](DirectedGraphTracer)

* [UndirectedGraphTracer](UndirectedGraphTracer)

* [WeightedDirectedGraphTracer](WeightedDirectedGraphTracer)

* [WeightedUndirectedGraphTracer](WeightedUndirectedGraphTracer)

* [ChartTracer](ChartTracer)

| Function | Description |

|----------|-------------|

| **Integer.random**((Number) min, (Number) max) | Create a random integer inclusively between _min_ and _max_. |

| **Array2D.random**((Number) N, (Number) M, (Number) min, (Number) max) | Create random _N_ * _M_ array data that elements have a random value between _min_ and _max_. |

| **Array2D.randomSorted**((Number) N, (Number) M, (Number) min, (Number) max) | Basically same as `Array2D.random` but elements in each row are sorted in increasing order. |

| **Array1D.random**((Number) N, (Number) min, (Number) max) | Create random one-dimensional array data of size _N_ that elements have a random value between _min_ and _max_. |

| **Array1D.randomSorted**((Number) N, (Number) min, (Number) max) | Basically same as `Array1D.random` but elements are sorted in increasing order. |

| **DirectedGraph.random**((Number) N, (Number) ratio) | Create random graph data containing _N_ nodes and having directed edges between nodes at the probability of _ratio_ (between 0 and 1). |

| **UndirectedGraph.random**((Number) N, (Number) ratio) | Basically same as `DirectedGraph.random` but edges do not have direction. |

| **WeightedDirectedGraph.random**((Number) N, (Number) ratio, (Number) min, (Number) max) | Basically same as `DirectedGraph.random` but edges have a random weight between _min_ and _max_. |

| **WeightedUndirectedGraph.random**((Number) N, (Number) ratio) | Basically same as `WeightedDirectedGraph.random` but edges do not have direction. |

**LogTracer** inherits **[Tracer](Tracer)**.

| Method | Description |

|--------|-------------|

| **LogTracer**((String) name)| create LogTracer and set its name |

| **_print**(msg) | print `msg` |

| **_setData**(args) | _inherited, but not used_ |

| **_clear**() | erase all logs |

| **_wait**() | wait for a certain amount of time |

[Show examples](https://github.com/search?utf8=✓&q=LogTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)

Our project uses [gulp](http://gulpjs.com/) to:

- combine all individual modules into a single file

- transpile ES6 code to ES5 with [babel.js](http://babeljs.io/)

- minimize JS and CSS code

- generate source maps

- add vendor prefixer to the css

- provide a server with live-reload

npm install -g gulp-cli

npm install

gulp

**NOTE**: For Node.js versions below 0.12, you need to install an ES6-style Promise Polyfill (in case you receive a "Promise is undefined" error). To run with Promise, use:

npm install es6-promise

Then add the following line at the top of your *gulpfile.babel.js*:

var Promise = require ('es6-promise').Promise;

Check out [stackoverflow](http://stackoverflow.com/questions/32490328/gulp-autoprefixer-throwing-referenceerror-promise-is-not-defined) for more details on this issue.

To check your Node.js version, use:

node --version

*Note:* Although no linter is added as of yet, the code closely follows the conventions from [Airbnb's ECMAScript 6 Javascript style guide](https://github.com/airbnb/javascript)

The app entry point is [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js).

It performs the initial application setup (loads the app when jQuery loads, loads the initial data from the server etc.)

The main application object is [`js/app/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/index.js), which holds the necessary global application state flags and application level methods.

It is [extended once the app loads in `index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js#L39) with the contents of [`app/constructor`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/constructor.js) and [`app/cache`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/cache.js).

This means that from here on now, any file that does `require(/* path to js/app */)` is getting that populated object since calls to `require` are cached.

The `js/dom` directory holds all the code interacting with the DOM (go figure 😜).

The code is split into:

- "static" methods that are used everywhere (such as adding algorithm info to the DOM) and,

- setup code which is called within the `app/constructor`, after the DOM is ready, to initialize all the elements with their contents and listeners.

The `js/editor` directory holds the code to create and execute code in the ace editor.

The `js/module` directory holds all the tracers and the random-data-creators.

All the modules are exported together and then "required" inside the entry point [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js) where they are [attached to the global `window` object](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js#L42) so [`eval` can use them](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/editor/executor.js#L12) when executing code in the code editor.

The `js/server` directory holds all the code to load data from the server and utilizes promises from [RSVP.js](https://github.com/tildeio/rsvp.js/).

In [`js/server/ajax`](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/server/ajax) are some helper methods to make requesting from the server a little easier.

The main method is [`js/server/ajax/request.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/server/ajax/request.js) that is used by all other methods to call `$.ajax` with certain options and set/reset the global `isLoading` flag for every request.

The `js/tracer_manager` directory holds the manager of tracers, which controls all the present tracers simultaneously.

The `utils` directory holds a few helper methods that are used everywhere such as building the strings for algorithm and file directories.

**Tracer** is inherited by any other tracer modules.

| Method | Description |

|--------|-------------|

| **Tracer**((String) name)| create Tracer and set its name |

| **_setData**(args) | set data to visualize |

| **_clear**() | clear the tracer |

| **_wait**() | wait for a certain amount of time |

* [LogTracer](LogTracer)

* [DirectedGraphTracer](DirectedGraphTracer)

* [Array2DTracer](Array2DTracer)

* [ChartTracer](ChartTracer)