{"_id":"@c-degni/algo-vis","_rev":"8-56ad5658f3e86b0e9d2fd34f10b82d01","name":"@c-degni/algo-vis","dist-tags":{"latest":"1.4.0"},"versions":{"1.0.0":{"name":"@c-degni/algo-vis","version":"1.0.0","_id":"@c-degni/algo-vis@1.0.0","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"dist":{"shasum":"57504b316d6304ab9bd79ee7d6a4bcd0cbc2bad6","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.0.0.tgz","fileCount":10,"integrity":"sha512-8liINm4ZNz7VbivAnWT7Jw+BCk8v8gOJCwUhtQ7p44dLJPPLY04lZyuPIa6qtww7T96BBFTAt5cmtdS+rThMqA==","signatures":[{"sig":"MEUCIH4331TqmM1Cs/NvFptaPn0NUkPR3a30eP8NfoZeLegLAiEAjUfjW0xJbBMnPRM2kiqAxJX8h6BROzwNME/mwM9XYaY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30366},"main":"dist/index.js","gitHead":"ae8ce89a89391b1a8752944711e86009543bc858","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"_npmVersion":"10.9.2","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/algo-vis_1.0.0_1755470226018_0.3667736341204275","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@c-degni/algo-vis","version":"1.1.0","_id":"@c-degni/algo-vis@1.1.0","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"dist":{"shasum":"e1c4e50332c16e126a8266d1145e8256cdb7c6b5","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.1.0.tgz","fileCount":10,"integrity":"sha512-FiBiGgorj9RMMbULCEsyIz9zfSX/HL6sh/SIoxj6xbbmn2Be8JtqHQI2QY+/oTdYSkXTJggysCuNlJWEitR5JA==","signatures":[{"sig":"MEYCIQCln/hplLnHLhCWFs4pgfJfnErC0Dc3lNsakVfRDFyZBwIhAKzsU+VfVbQg5CL3HbjWcCKf27JtvB3Fav8RI8UCUVr6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30385},"main":"dist/index.js","gitHead":"c7993a4fa29c98c690032bec3509a2e0a052655e","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"_npmVersion":"11.5.2","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/algo-vis_1.1.0_1755500029742_0.8604344877427552","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@c-degni/algo-vis","version":"1.1.1","_id":"@c-degni/algo-vis@1.1.1","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"dist":{"shasum":"2546a7c0b5286746a0c065114d4dc4bc72a6a006","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.1.1.tgz","fileCount":10,"integrity":"sha512-qKEdATDfFbVkYpVR9Vk6hz1FHiRTfcfOqd/gu5N2CH+yrfncQw3nFrvDYxt3+fWmjiFJo9sCLCU/fVthfZpVlQ==","signatures":[{"sig":"MEUCIARECLdyoN49LwiSuAMgfxjxDR8cegbl6s7jOFxONuaMAiEA7rdSl0CKnDCqGZMptdZEeAkQ4eFaS8TKeT7Jgd47bFk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30376},"main":"dist/index.js","gitHead":"385aee89e57789ada1348e1fe579579e3ab52592","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"_npmVersion":"11.5.2","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/algo-vis_1.1.1_1755500713829_0.7421852085300853","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@c-degni/algo-vis","version":"1.2.0","_id":"@c-degni/algo-vis@1.2.0","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"dist":{"shasum":"3f9f4729e3cb2407f245a66ba09a539f9c245f26","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.2.0.tgz","fileCount":12,"integrity":"sha512-AFam43Lg37zXLE5zXcM1WyOFE1QJRL5x/2ZTPvbivXc0IddUiriHRfHa8H7Cx9WFbzWy6cctMGanx2TRzCDa8A==","signatures":[{"sig":"MEQCIENezwa5Hq9QyDPucWr+8UseVlX98dA9Egj9Ijvzu/IQAiBvXTgTpWfw9ayCO2r4AGBPK4Wj8aJyBB0VBGepv0mDxw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37272},"main":"dist/index.js","gitHead":"fd28c3fd2b688931492307adcfd6097472382ab3","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"_npmVersion":"11.5.2","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/algo-vis_1.2.0_1755652289367_0.68680843147703","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@c-degni/algo-vis","version":"1.2.1","_id":"@c-degni/algo-vis@1.2.1","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"dist":{"shasum":"c8bab83d6432f9d3265a9e8f2fac7ba846b22fda","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.2.1.tgz","fileCount":13,"integrity":"sha512-BPj7DJK6bejc17ojDb/HgbphC8tIY06f38odvoKawO0YaZ9XM6rqfj9+FWao9LjwfApdtaHYE1fgsCRieP8vmg==","signatures":[{"sig":"MEUCIQCtC7kM0LBwBNyyteJUpfW34avLepk6wt7wWNmv1C2iqwIgXybI5lsisOfipItz4FgLZ77Mp1wQ68Oxc8GTRWBT6xE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40149},"main":"dist/index.js","gitHead":"4e3a11ef2ea847bdb480659349236036307b4e87","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"_npmVersion":"11.5.2","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/algo-vis_1.2.1_1755660062605_0.5838760325823196","host":"s3://npm-registry-packages-npm-production"}},"1.2.2":{"name":"@c-degni/algo-vis","version":"1.2.2","author":{"name":"Christ Degni"},"license":"MIT","_id":"@c-degni/algo-vis@1.2.2","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"dist":{"shasum":"70edcf37c0a0bd357630706fa01907205241c62c","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.2.2.tgz","fileCount":13,"integrity":"sha512-JMtI4NjiigXBbf/wbXDySfSd5W4GtC6xCUYR871EApEkkWkNsMIsjwIpTM5yF4s5vRSpm9CQ1Kr8DN80txyUZg==","signatures":[{"sig":"MEUCICwqkjv1HoEBgDRdhWEo+8zLZ8WpUjRJqj3MdGKBUMTwAiEA2BnJRqP5Jt6KDT8heaNqaDiHsHKfNgwbMbBDoGJgt6U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40201},"main":"dist/index.js","gitHead":"7776eaa31c32b84ae238b21d466fb13e0a41c800","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"_npmVersion":"11.5.2","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/algo-vis_1.2.2_1755660285376_0.757287706946062","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@c-degni/algo-vis","version":"1.3.0","author":{"name":"Christ Degni"},"license":"MIT","_id":"@c-degni/algo-vis@1.3.0","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"dist":{"shasum":"a9da7560f9fded4bbdc6ce39946de6111962a315","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.3.0.tgz","fileCount":15,"integrity":"sha512-2RlvowYKvKYq+Td061aOt/rbCcZa3JryqFlVC1Xy8ZUKF0HWUT3EcjteFvpgJygfZCtnUIKHmDL3fkJ9k2krJA==","signatures":[{"sig":"MEUCICap2ka3T38xkrSp4HIZ4QX2Y0nW+/7eWHaYIBqDGgVsAiEAwPntRQHB87YoBzeMJsXO2YnCCt3c/wF5qc3FS74Iv80=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52744},"main":"dist/index.js","gitHead":"0f716e3dfd315be1c1114f00467f903d1b41e9ca","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"_npmVersion":"11.5.2","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/algo-vis_1.3.0_1756221186927_0.836834623387444","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@c-degni/algo-vis","version":"1.4.0","main":"dist/index.js","author":{"name":"Christ Degni"},"license":"MIT","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"devDependencies":{"typescript":"^5.9.2"},"_id":"@c-degni/algo-vis@1.4.0","gitHead":"67d1e05f6750b1156ca3d1065b72e3f95005dec4","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","_nodeVersion":"23.8.0","_npmVersion":"11.5.2","dist":{"integrity":"sha512-TVm14flNAr6BFRtKsHPb1ezfksebIpIiJGwNba09dBQvg36qC4WuB2KQ6sreQw/OgYOj13Mj90lOJoB1JCKl1A==","shasum":"b74bc2eede344331b3e23833418dc0e84f4cfc32","tarball":"https://registry.npmjs.org/@c-degni/algo-vis/-/algo-vis-1.4.0.tgz","fileCount":17,"unpackedSize":62472,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB48jRBi5ysMq9e3xXePZYpGv37xhERs54V9lXKSdC/3AiEA9kPvOszA58EDbItahEo0a2aYfsh8aMCvElzOxcgRJcI="}]},"_npmUser":{"name":"c-degni","email":"privELITE@outlook.com"},"directories":{},"maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/algo-vis_1.4.0_1756841227527_0.6772380828430904"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-17T22:37:05.918Z","modified":"2025-09-02T19:27:07.925Z","1.0.0":"2025-08-17T22:37:06.236Z","1.1.0":"2025-08-18T06:53:49.949Z","1.1.1":"2025-08-18T07:05:14.010Z","1.2.0":"2025-08-20T01:11:29.551Z","1.2.1":"2025-08-20T03:21:02.801Z","1.2.2":"2025-08-20T03:24:45.577Z","1.3.0":"2025-08-26T15:13:07.103Z","1.4.0":"2025-09-02T19:27:07.720Z"},"author":{"name":"Christ Degni"},"license":"MIT","description":"A portable React component package for integrating interactive data structure and algorithm visualizations into any web application.","maintainers":[{"name":"c-degni","email":"privELITE@outlook.com"}],"readme":"# Algo-Vis Component Package\nA portable React component package for integrating interactive data structure and algorithm visualizations into any web application.\n\n## Overview\nThis package provides plug-and-play visualization components that accept operation traces and render smooth D3.js animations with full playback controls. Perfect for educational platforms and coding tutorials!\n\n## Architecture\n`Your API → Component → D3.js Visualization + Playback Controls`\n\n### Key Components:\n- __VisualizationContainer:__ Main wrapper component that handles API calls\n- __ExecutionPlayer:__ Universal playback controls (play, pause, step, seek)\n- __DSA Visualizers:__ D3.js animated components for stacks, queues, trees, etc.\n\n## Installation\n```bash\nnpm install @c-degni/algo-vis\n```\n## Quick Start\n### Basic Usage\n```tsx\n// Stack example\nimport { VisualizationContainer } from '@c-degni/algo-vis';\n\nfunction MyApp() {\n    const operations = [\n        { type: 'push', value: 10 },\n        { type: 'push', value: 20 },\n        { type: 'pop' }\n    ];\n\n    return (\n        <VisualizationContainer\n            apiEndpoint=\"https://your-api.com/stack-execute\"\n            dataStructure=\"stack\"\n            dataType=\"int\"\n            operations={operations}\n            onError={(err) => console.error(err)}\n        />\n    );\n}\n```\n\n### Advanced Usage (Individual Components)\n```tsx\nimport { ExecutionPlayer, {DSA}Visualizer } from '@c-degni/algo-vis';\n\nfunction CustomVisualization() {\n    const [trace, setTrace] = useState([]);\n    const [currentState, setCurrentState] = useState(null);\n\n    return (\n        <div>\n            <ExecutionPlayer\n                trace={trace}\n                onStepChange={(step) => setCurrentState(step.state)}\n                title=\"Custom {DSA} Demo\"\n                dataStructureType=\"{dsa}\"\n            />\n            <StackVisualizer\n                elements={currentState?.elements || []}\n                highlights={currentState?.highlights || []}\n            />\n        </div>\n    );\n}\n```\n\n## API Requirements\nYour backend must return execution traces in this format:\n### Stack Example\n```json\n{\n    \"trace\": [\n        {\n            \"operation\": \"push\",\n            \"description\": \"Pushed 10 to stack\",\n            \"state\": {\n                \"elements\": [10],\n                \"size\": 1\n            },\n            \"highlights\": [0],\n            \"timestamp\": 1231231231231\n        },\n        {\n            \"operation\": \"pop\",\n            \"description\": \"Popped 10 from stack\", \n            \"state\": {\n                \"elements\": [],\n                \"size\": 0\n            },\n            \"highlights\": [],\n            \"timestamp\": 1231231231232\n        }\n    ]\n}\n```\n\n### Request Format\n#### Stack Example\nPOST /api/data-structures/stack/execute\n```json\n{\n    \"dataType\": \"int\",\n    \"operations\": [\n        { \"type\": \"push\", \"value\": 10 },\n        { \"type\": \"pop\" }\n    ]\n}\n```\n\n## Features\n- :electric_plug: __Zero Backend Coupling:__ Works with any API matching the trace format\n- :ocean: __Smooth Animations:__ D3.js powered visualizations with highlights\n- :zap: __Full Playback Controls:__ Play, pause, step, seek through executions\n- :hammer: __Multiple Data Types:__ Support for int, double, float, bool data types\n- :package: __Responsive Design:__ Works on desktop and mobile\n\n## Integration Example\n### Educational Platform\n```tsx\n// Student coding exercise with live visualization of\n// reversing a string using a stack\nconst studentCode = [\n    { type: 'push', value: 'h' },\n    { type: 'push', value: 'e' },\n    { type: 'push', value: 'l' },\n    { type: 'push', value: 'l' },\n    { type: 'push', value: 'o' },\n    { type: 'pop' },  // 'o'\n    { type: 'pop' },  // 'l'\n    { type: 'pop' }   // 'l' ...\n];\n\n<VisualizationContainer\n    apiEndpoint=\"/api/student/stack-exercise\"\n    dataStructure=\"stack\"\n    dataType=\"int\"\n    operations={studentCode}\n/>\n```\n\n## Development\n```bash\n# Install dependencies\nnpm install\n\n# Build package\nnpm run build\n```\n\n## Contributing\nThis package is extracted from [Algo-Vis](https://github.com/c-degni/algo-vis). Feel free to contribute to the Algo-Vis repository!\nUpdates will be synced to this package in releases.\n\n## License\nMIT - See LICENSE for details\n\nThanks for using the Algo-Vis Component Package :raised_hands:!","readmeFilename":"README.md"}