Visualization

I build a sorting visualization tool: Check it out What Technologies I used Github Pages (Hosting & Deployment) D3.js (Visualization) Javascript (UI & Sorting Logic) HTML (UI) CSS (Styling) How did I build It Code All of the code available on Github. Data Object The SortData type serves as a wrapper that contains all the necessary information for visualizing the sorting algorithm. type SortData = { init_index: number, value: number, color: string } Data Validation and Object Creation Helper functions The validateData function validates the user input data to ensure that it is in the correct format and can be processed. The function checks if the input string contains only numbers and commas, and returns an error message if it does not. The convertData function takes the validated input string and converts it into an array of numbers. It splits the string by commas and converts each substring into a number. It returns an error message if the conversion fails. The arrayToSortData function takes a number array and converts it into an array of SortData objects, which are used for visualization. The function assigns a init_index to each data point and sets its value, and color. function validateData(userInput) { if (userInput.length === 0) { return false } else if(!(/ ?([0-9]* ?,)/.test(userInput))){ return false } else { const data = convertData(userInput) for (let val of data) { if (val === undefined) { return false } return true } } } function convertData(userInput) { return userInput.split(',').map(element => { return Number(element) ? Number(element) !== undefined : 0; }) } function arrayToSortData (nums: number[], color: string) { let data: SortData[] = [] nums.map( (num, index) => { data.push({init_index: index, value: num, color: color} as SortData); }) return data; } Visualization D3 is a javascript visualization library build on top of Web Components. The library provides a lot of helpful components for generating different graphics. I would highly recommend you check them out for some next level interactive visualizations. ...