All Projects â†’ algorithm-visualizer â†’ tracers.js

algorithm-visualizer / tracers.js

Licence: MIT license
📜Visualization Library for JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to tracers.js

tmap
A very fast visualization library for large, high-dimensional data sets.
Stars: ✭ 146 (+204.17%)
Mutual labels:  visualization-library

tracers.js npm API reference Travis (.com)

This repository is part of the project Algorithm Visualizer.

tracers.js is a visualization library for JavaScript. You can use it on algorithm-visualizer.org or locally on your machine.

Installation

npm install algorithm-visualizer

Usage

// import visualization libraries {
const { Array2DTracer, Layout, LogTracer, Tracer, VerticalLayout } = require('algorithm-visualizer');
// }

// define tracer variables {
const array2dTracer = new Array2DTracer('Grid');
const logTracer = new LogTracer('Console');
// }

// define input variables
const messages = [
  'Visualize',
  'your',
  'own',
  'code',
  'here!',
];

// highlight each line of messages recursively
function highlight(line) {
  if (line >= messages.length) return;
  const message = messages[line];
  // visualize {
  logTracer.println(message);
  array2dTracer.selectRow(line, 0, message.length - 1);
  Tracer.delay();
  array2dTracer.deselectRow(line, 0, message.length - 1);
  // }
  highlight(line + 1);
}

(function main() {
  // visualize {
  Layout.setRoot(new VerticalLayout([array2dTracer, logTracer]));
  array2dTracer.set(messages);
  Tracer.delay();
  // }
  highlight(0);
})();

Check out the API reference for more information.

Contributing

Check out the contributing guidelines.

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].