{"id":13912454,"url":"https://github.com/danielstern/array.visualize","last_synced_at":"2025-04-10T22:53:30.555Z","repository":{"id":29661927,"uuid":"33203994","full_name":"danielstern/array.visualize","owner":"danielstern","description":"JOKES","archived":false,"fork":false,"pushed_at":"2023-04-16T12:32:03.000Z","size":655,"stargazers_count":11,"open_issues_count":4,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T22:53:25.012Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielstern.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-03-31T19:01:35.000Z","updated_at":"2023-02-24T09:10:48.000Z","dependencies_parsed_at":"2024-01-14T08:13:26.126Z","dependency_job_id":"f0de6574-c8ec-403e-be6c-efa13836e4e3","html_url":"https://github.com/danielstern/array.visualize","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Farray.visualize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Farray.visualize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Farray.visualize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Farray.visualize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielstern","download_url":"https://codeload.github.com/danielstern/array.visualize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312172,"owners_count":21082638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-07T01:01:28.499Z","updated_at":"2025-04-10T22:53:30.517Z","avatar_url":"https://github.com/danielstern.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"\u003ch2\u003e\n  \u003ca href=\"http://danielstern.github.io/array.visualize/#/\"\u003eArray Visualize\u003c/a\u003e\n\u003c/h2\u003e\n\n# Quick Start Instructions\n1. Run `npm install \u0026\u0026 npm run postinstall`\n2. Run `npm start`\n\n\n\u003ch3\u003e\n  A practical library\n\u003c/h3\u003e\n\u003cp\u003e\n    Array visualize is a simple d3.js-based library with one purpose: to illustrate arrays.\n\u003c/p\u003e\n\u003cp\u003e\n  It was made for the purpose of visualizing array functions for tutorials.\n\u003c/p\u003e\n\u003cp\u003e\n  You can use this library for your demos, presentations and tutorials.\n\u003c/p\u003e\n\u003cp\u003e\n  It is possible to set a few variables in options. However you can also use CSS and it is compatible, and usually better.\n\u003c/p\u003e\n\n\u003ch2\u003e\n\u003ca href=\"http://danielstern.github.io/array.visualize/#/\"\u003eVisit the project page\u003c/a\u003e\n\u003c/h2\u003e\n\n\u003ch3\u003e\n  How to Use\n\u003c/h3\u003e\n\n\u003ch4\u003e\n  \u003cpre\u003eillustrateArray(data,svg,options):ArrayVisualizer\u003c/pre\u003e\n\u003c/h4\u003e\n\n\u003cp\u003e\n  This is the main function of the library. Creates an svg visualization based upon the data provided. \n\u003c/p\u003e\n\u003cp\u003e\n  Also return an object you can use to manipulate the array visualization, much like manipulating an array itself.\n\u003c/p\u003e\n\u003cp\u003e\n  \n\u003c/p\u003e\n\u003ch5\u003e\n  Example\n\u003c/h5\u003e\n\u003cpre\u003e\n  var data = ['stark','lannister','targeryen'];\n  var svg = d3.select('document').append('svg');\n  var options = {fontsize:12}\n  illustrateArray(data,svg,options)\u003c/pre\u003e\n\u003cdiv id=\"_filter\"\u003e\n   \n\u003c/div\u003e\n\n\n\u003ch4\u003e\n  \u003cpre\u003eArrayVisualizer.push(entry)\u003c/pre\u003e\n\u003c/h4\u003e\n\n\u003cp\u003e\n  Pushes another entry to the end of the array with an animation. If an index is provided, pushes the item to that index.\n\u003c/p\u003e\n\u003cp\u003e\n  Useful for teaching someone what \"push\" does.\n\u003c/p\u003e\n\u003cp\u003e\n  \n\u003c/p\u003e\n\u003ch5\u003e\n  Example\n\u003c/h5\u003e\n\u003cpre\u003e\n  var v = illustrateArray( ['stark','lannister','targeryen'],svg)\n\n  v.push('baratheon');\n  v.push('tyrell',2);\n\n\u003c/pre\u003e\n\u003cdiv id=\"_push\"\u003e\n   \n\u003c/div\u003e\n\n\n\u003ch4\u003e\n  \u003cpre\u003eArrayVisualizer.splice(index,entry)\u003c/pre\u003e\n\u003c/h4\u003e\n\n\u003cp\u003e\n  Removes an entry from the specified index. If a new entry is provided, puts that entry in the index.\n\u003c/p\u003e\n\u003cp\u003e\n  Useful for teaching someone what \"splice\" does.\n\u003c/p\u003e\n\u003cp\u003e\n  \n\u003c/p\u003e\n\u003ch5\u003e\n  Example\n\u003c/h5\u003e\n\u003cpre\u003e\n  var v = illustrateArray( ['stark','lannister','targeryen'],svg)\n  v.splice(2);\n  v.splice(0,'bolton');\n\n\u003c/pre\u003e\n\u003cdiv id=\"_splice\"\u003e\n   \n\u003c/div\u003e\n\n\n\u003ch4\u003e\n  \u003cpre\u003eArrayVisualizer.highlight(index):Highlight\u003c/pre\u003e\n\u003c/h4\u003e\n\n\u003cp\u003e\n  Creates a highlight at the selected index. Can change colors and move. \n\u003c/p\u003e\n\u003cp\u003e\n  Be sure to hold on to the reference. You can create multiple highlights and control them independently.\n\u003c/p\u003e\n\u003cp\u003e\n  Good for highlighting stuff.\n\u003c/p\u003e\n\u003cp\u003e\n  \n\u003c/p\u003e\n\u003ch5\u003e\n  Example\n\u003c/h5\u003e\n\u003cpre\u003e\n  var v = illustrateArray( [\"robb\",\"rickon\",\"bran\"],svg)\n  var highlight = v.highlight(0);\n  var highlight2 = v.highlight(2);\n\u003c/pre\u003e\n\u003cdiv id=\"_highlight\"\u003e\n   \n\u003c/div\u003e\n\n \u003ch4\u003e\n  \u003cpre\u003ehighlight.goto(index)\u003c/pre\u003e\n\u003c/h4\u003e\n\n\u003cp\u003e\n  Moves the highlight to the selected index, automatically resizing it.\n\u003c/p\u003e\n\n\u003ch5\u003e\n  Example\n\u003c/h5\u003e\n\u003cpre\u003e\n  var v = illustrateArray( [\"cersei\",\"tyrion\",\"jaime\"],svg)\n  var highlight = v.highlight(0);\n  highlight.goto(2);\n\u003c/pre\u003e\n\u003cdiv id=\"_goto\"\u003e\n   \n\u003c/div\u003e\n\n\u003ch4\u003e\n  \u003cpre\u003ehighlight.color(color)\u003c/pre\u003e\n\u003c/h4\u003e\n\n\u003cp\u003e\n  Changes the color of the referenced highlight.\n\u003c/p\u003e\n\n\u003ch5\u003e\n  Example\n\u003c/h5\u003e\n\u003cpre\u003e\n  var v = illustrateArray( [\"drogon\",\"rhaegal\",\"viserion\"],svg)\n  var highlight = v.highlight(2);\n  highlight.color('green');\n\u003c/pre\u003e\n\u003cdiv id=\"_color\"\u003e\n   \n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielstern%2Farray.visualize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielstern%2Farray.visualize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielstern%2Farray.visualize/lists"}