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.

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');
    

Array Visualize Applied

Filter

Below, we can use this library to visualize what happens during a JavaScript native filter.

Map

Creates a new array where each element is the result of the function map of each element of the caller.