https://github.com/danielstern/array.visualize

JOKES
https://github.com/danielstern/array.visualize

Last synced: about 1 year ago
JSON representation

JOKES

• Host: GitHub
• URL: https://github.com/danielstern/array.visualize
• Owner: danielstern
• Created: 2015-03-31T19:01:35.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2023-04-16T12:32:03.000Z (about 3 years ago)
• Last Synced: 2025-04-10T22:53:25.012Z (about 1 year ago)
• Language: JavaScript
• Size: 640 KB
• Stars: 11
• Watchers: 1
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  Array Visualize



# Quick Start Instructions

1. Run `npm install && npm run postinstall`

2. Run `npm start`



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