sort-visualizer
Background and Overview
A visual exploration of sorting algorithms written in JS & d3.js
Functionality & MVP
Users will be able to:
- Visualize sorting algorithms with realtime iterative stepping
- Compare time complexity of different sorting algorithms
- Display overview of Big(O) with lower + upper + actual time complexities
The project will also include:
- Links to connect with me (GitHub, LinkedIn)
- A modal with algorithm introduction
- Data visualization built with d3.js
Wireframes
The app houses a primary d3.js container where algorithms are rendered in realtime.
Architecture & Technologies
This app is implemented using the following technologies:
- Vanilla JavaScript - structure and logic
- d3.js - DOM manipulation and rendering
- Babel for transpilation
- Webpack for bundling scripts
Implementation Timeline
5/17/2019:
- Tutorials on d3.js
- Setup
webpack,babel, stylesheets, index.html, andentry.jsfile
5/18/2019:
- Continue d3.js documentation
- Complete sorting algorithms in JS
- Allow for local state history as nested dataset
- Color palette research
- Initial wireframes/mockups
5/19/2019:
- Complete d3.js documentation
- Narrow down visualization options
- Connect datasets to d3.js visualization w/ animated transitions
- Build out layout/mockups
5/20/2019:
- Build out the score, song progress, and winning/failing bar
- Implement sorting time complexity render
- Create interactive Big(O) overview chart
- Update introductory text + documentation
5/21/2019:
- Finalize userflow/testing
- Wrapup final styling
- Complete text animations + container/dataset transitions
- Production README.md
- Deploy to GitHub pages
Bonus features:
- Add visualizations for selection, insertion & bogo sort