Array Visualize

A practical library

Array visualize is a simple d3.js-based library with one purpose: to illustrate arrays.

It was made for the purpose of visualizing array functions for tutorials.

You can use this library for your demos, presentations and tutorials.

It is possible to set a few variables in options. However you can also use CSS and it is compatible, and usually better.

Visit the project page

How to Use

illustrateArray(data,svg,options):ArrayVisualizer

This is the main function of the library. Creates an svg visualization based upon the data provided.

Also return an object you can use to manipulate the array visualization, much like manipulating an array itself.

Example

  var data = ['stark','lannister','targeryen'];
  var svg = d3.select('document').append('svg');
  var options = {fontsize:12}
  illustrateArray(data,svg,options)

ArrayVisualizer.push(entry)

Pushes another entry to the end of the array with an animation. If an index is provided, pushes the item to that index.

Useful for teaching someone what "push" does.

Example

  var v = illustrateArray( ['stark','lannister','targeryen'],svg)
v.push('baratheon');
v.push('tyrell',2);

ArrayVisualizer.splice(index,entry)

Removes an entry from the specified index. If a new entry is provided, puts that entry in the index.

Useful for teaching someone what "splice" does.

Example

  var v = illustrateArray( ['stark','lannister','targeryen'],svg)
  v.splice(2);
  v.splice(0,'bolton');

ArrayVisualizer.highlight(index):Highlight

Creates a highlight at the selected index. Can change colors and move.

Be sure to hold on to the reference. You can create multiple highlights and control them independently.

Good for highlighting stuff.

Example

  var v = illustrateArray( ["robb","rickon","bran"],svg)
  var highlight = v.highlight(0);
  var highlight2 = v.highlight(2);

highlight.goto(index)

Moves the highlight to the selected index, automatically resizing it.

Example

  var v = illustrateArray( ["cersei","tyrion","jaime"],svg)
  var highlight = v.highlight(0);
  highlight.goto(2);

highlight.color(color)

Changes the color of the referenced highlight.

Example

  var v = illustrateArray( ["drogon","rhaegal","viserion"],svg)
  var highlight = v.highlight(2);
  highlight.color('green');