├── src ├── graph │ ├── gdp.js │ └── bubble_chart.js ├── data │ ├── ages.csv │ ├── ages.tsv │ ├── ages.json │ ├── data_sample.json │ ├── gdp.json │ ├── generateGdp.js │ └── sortData.json ├── algorithms │ ├── setup_input.js │ ├── quick_sort.py │ ├── merge_sort.js │ ├── sort_states.js │ ├── big_o_chart-test.js │ ├── quick_sort.js │ ├── all_sorts.js │ ├── big_o_chart.js │ ├── bubble_sort.js │ └── sortData.json ├── d3.js ├── index.js ├── test │ ├── starbreak.js │ ├── gapminder.js │ └── test.js └── visualize │ └── sort.js ├── .gitignore ├── dist ├── data │ ├── ages.csv │ ├── ages.tsv │ ├── ages.json │ ├── buildings.json │ ├── revenues.json │ ├── buildings2.json │ └── sortData.json ├── stylesheets │ └── style.css ├── index.html ├── index2.html ├── index3.html └── js │ └── utils.js ├── .babelrc ├── webpack.config.js ├── index.html ├── package.json └── README.md /src/graph/gdp.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | # bundle.js 4 | # bundle.map.js -------------------------------------------------------------------------------- /src/data/ages.csv: -------------------------------------------------------------------------------- 1 | name,age 2 | Tony,10 3 | Jessica,12 4 | Andrew,9 5 | Emily,10 6 | Richard,11 -------------------------------------------------------------------------------- /src/data/ages.tsv: -------------------------------------------------------------------------------- 1 | name age 2 | Tony 10 3 | Jessica 12 4 | Andrew 9 5 | Emily 10 6 | Richard 11 -------------------------------------------------------------------------------- /dist/data/ages.csv: -------------------------------------------------------------------------------- 1 | name,age 2 | Tony,10 3 | Jessica,12 4 | Andrew,9 5 | Emily,10 6 | Richard,11 -------------------------------------------------------------------------------- /dist/data/ages.tsv: -------------------------------------------------------------------------------- 1 | name age 2 | Tony 10 3 | Jessica 12 4 | Andrew 9 5 | Emily 10 6 | Richard 11 -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/env", 5 | { 6 | "targets": { 7 | "browsers": [ 8 | "last 2 versions", 9 | "safari >= 7" 10 | ] 11 | } 12 | } 13 | ] 14 | ] 15 | } -------------------------------------------------------------------------------- /dist/data/ages.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Tony", 4 | "age": "10" 5 | }, 6 | { 7 | "name": "Jessica", 8 | "age": "12" 9 | }, 10 | { 11 | "name": "Andrew", 12 | "age": "9" 13 | }, 14 | { 15 | "name": "Emily", 16 | "age": "10" 17 | }, 18 | { 19 | "name": "Richard", 20 | "age": "11" 21 | } 22 | ] -------------------------------------------------------------------------------- /src/data/ages.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Tony", 4 | "age": "10" 5 | }, 6 | { 7 | "name": "Jessica", 8 | "age": "12" 9 | }, 10 | { 11 | "name": "Andrew", 12 | "age": "9" 13 | }, 14 | { 15 | "name": "Emily", 16 | "age": "10" 17 | }, 18 | { 19 | "name": "Richard", 20 | "age": "11" 21 | } 22 | ] -------------------------------------------------------------------------------- /dist/data/buildings.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Burj Khalifa", 4 | "height": "350" 5 | }, 6 | { 7 | "name": "Shanghai Tower", 8 | "height": "263.34" 9 | }, 10 | { 11 | "name": "Abraj Al-Bait Clock Tower", 12 | "height": "254.04" 13 | }, 14 | { 15 | "name": "Ping An Finance Centre", 16 | "height": "253.20" 17 | }, 18 | { 19 | "name": "Lotte World Tower", 20 | "height": "230.16" 21 | } 22 | ] -------------------------------------------------------------------------------- /src/algorithms/setup_input.js: -------------------------------------------------------------------------------- 1 | module.exports.setupRandomInput = function (inputSize) { 2 | let arr = []; 3 | for (let i = 1; i <= inputSize; i++) { 4 | arr.push(i); 5 | } 6 | 7 | // shuffle setup 8 | function shuffle(arr) { 9 | let len = arr.length - 1; 10 | let temp; 11 | let idx; 12 | 13 | while (len > 0) { 14 | idx = Math.floor(Math.random() * len); 15 | temp = arr[len]; 16 | arr[len] = arr[idx]; 17 | arr[idx] = temp; 18 | len -= 1; 19 | } 20 | 21 | return arr; 22 | } 23 | 24 | return shuffle(arr); 25 | } 26 | 27 | -------------------------------------------------------------------------------- /dist/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | .main__container--inner { 2 | max-width: 1000px; 3 | margin: 0 auto; 4 | padding: 1rem; 5 | /* background-color: pink; */ 6 | } 7 | 8 | .rect.bar { 9 | fill: white; 10 | } 11 | 12 | #chart-area { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | } 17 | 18 | #chart-area svg { 19 | /* border: 1px solid gray; */ 20 | cursor: pointer; 21 | } 22 | 23 | 24 | .line__bubble { 25 | stroke: black; 26 | } 27 | 28 | 29 | .line { 30 | stroke: black; 31 | fill: none; 32 | stroke-width: 2px; 33 | } 34 | 35 | svg { 36 | cursor: pointer; 37 | } -------------------------------------------------------------------------------- /src/data/data_sample.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "countries": [ 4 | { 5 | "continent": "europe", 6 | "country": "Yugoslavia", 7 | "income": null, 8 | "life_exp": null, 9 | "population": 4687422 10 | }, 11 | { 12 | "continent": "asia", 13 | "country": "United Korea (former)", 14 | "income": null, 15 | "life_exp": null, 16 | "population": 13740000 17 | } 18 | ], 19 | "year": "1800" 20 | } 21 | ] 22 | 23 | -------------------------------------------------------------------------------- /dist/data/revenues.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "month": "January", 4 | "revenue": "13432", 5 | "profit": "8342" 6 | }, 7 | { 8 | "month": "February", 9 | "revenue": "19342", 10 | "profit": "10342" 11 | }, 12 | { 13 | "month": "March", 14 | "revenue": "17443", 15 | "profit": "15423" 16 | }, 17 | { 18 | "month": "April", 19 | "revenue": "26342", 20 | "profit": "18432" 21 | }, 22 | { 23 | "month": "May", 24 | "revenue": "34213", 25 | "profit": "29434" 26 | }, 27 | { 28 | "month": "June", 29 | "revenue": "50321", 30 | "profit": "45343" 31 | }, 32 | { 33 | "month": "July", 34 | "revenue": "54273", 35 | "profit": "47452" 36 | } 37 | ] -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: './src/index.js', // We wants our entry point to this path 5 | output: { 6 | path: path.join(__dirname, 'dist'), 7 | filename: 'main.js' 8 | }, 9 | module: { 10 | rules: [{ 11 | loader: 'babel-loader', 12 | test: /\.js?$/, // This will match either .js or .jsx 13 | exclude: /node_modules/, 14 | options: { 15 | presets: ["@babel/preset-env"] 16 | }, 17 | }] 18 | }, 19 | resolve: { 20 | extensions: ['.js', '.jsx'] 21 | }, 22 | devtool: 'inline-source-map', 23 | devServer: { 24 | contentBase: path.join(__dirname, 'public') 25 | }, 26 | watch: true 27 | }; 28 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Sort Visualizer 12 | 13 | 14 |
15 |
16 |

Sort Visualizer

17 | 18 | 21 |
22 | 23 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Sort Visualizer 12 | 13 | 14 |
15 |
16 |

Sort Visualizer

17 | 18 | 21 |
22 | 23 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js_project", 3 | "version": "1.0.0", 4 | "description": "visualizes notable sorting algorithms, written in JS & D3.js", 5 | "private": true, 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "webpack": "npx webpack --watch --mode=development" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/mrkchoi/sort-visualizer.git" 14 | }, 15 | "keywords": [ 16 | "sorting", 17 | "algorithms", 18 | "visualizer", 19 | "data", 20 | "visualization" 21 | ], 22 | "author": "Kenneth Choi", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/mrkchoi/sort-visualizer/issues" 26 | }, 27 | "homepage": "https://github.com/mrkchoi/sort-visualizer#readme", 28 | "dependencies": { 29 | "@babel/core": "^7.5.5", 30 | "@babel/preset-env": "^7.5.5", 31 | "babel-loader": "^8.0.6", 32 | "d3-scale": "^3.0.0", 33 | "d3-scale-chromatic": "^1.3.3", 34 | "js-sorting-algorithms": "^1.0.6", 35 | "lodash": "^4.17.14", 36 | "normalize.css": "^8.0.1", 37 | "regenerator-runtime": "^0.13.3", 38 | "sort-algorithms-js": "^2.1.2", 39 | "topojson": "^3.0.2", 40 | "webpack": "^4.36.1", 41 | "webpack-cli": "^3.3.6" 42 | }, 43 | "devDependencies": { 44 | "webpack-dev-server": "^3.7.2" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/algorithms/quick_sort.py: -------------------------------------------------------------------------------- 1 | # Python program for implementation of Quicksort 2 | 3 | # This function is same in both iterative and recursive 4 | def partition(arr,l,h): 5 | i = ( l - 1 ) 6 | x = arr[h] 7 | 8 | for j in range(l , h): 9 | if arr[j] <= x: 10 | 11 | # increment index of smaller element 12 | i = i+1 13 | arr[i],arr[j] = arr[j],arr[i] 14 | 15 | arr[i+1],arr[h] = arr[h],arr[i+1] 16 | return (i+1) 17 | 18 | # Function to do Quick sort 19 | # arr[] --> Array to be sorted, 20 | # l --> Starting index, 21 | # h --> Ending index 22 | def quickSortIterative(arr,l,h): 23 | 24 | # Create an auxiliary stack 25 | size = h - l + 1 26 | stack = [0] * (size) 27 | 28 | # initialize top of stack 29 | top = -1 30 | 31 | # push initial values of l and h to stack 32 | top = top + 1 33 | stack[top] = l 34 | top = top + 1 35 | stack[top] = h 36 | 37 | # Keep popping from stack while is not empty 38 | while top >= 0: 39 | 40 | # Pop h and l 41 | h = stack[top] 42 | top = top - 1 43 | l = stack[top] 44 | top = top - 1 45 | 46 | # Set pivot element at its correct position in 47 | # sorted array 48 | p = partition( arr, l, h ) 49 | 50 | # If there are elements on left side of pivot, 51 | # then push left side to stack 52 | if p-1 > l: 53 | top = top + 1 54 | stack[top] = l 55 | top = top + 1 56 | stack[top] = p - 1 57 | 58 | # If there are elements on right side of pivot, 59 | # then push right side to stack 60 | if p+1 < h: 61 | top = top + 1 62 | stack[top] = p + 1 63 | top = top + 1 64 | stack[top] = h 65 | 66 | # Driver code to test above 67 | arr = [4, 3, 5, 2, 1, 3, 2, 3] 68 | n = len(arr) 69 | quickSortIterative(arr, 0, n-1) 70 | print ("Sorted array is:") 71 | for i in range(n): 72 | print ("%d" %arr[i]), 73 | 74 | # This code is contributed by Mohit Kumra 75 | -------------------------------------------------------------------------------- /src/algorithms/merge_sort.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Merge sort an array of integers in increasing order. 3 | * 4 | * Iterative approach. 5 | */ 6 | import { setupRandomInput } from "./setup_input"; 7 | // console.log(setupRandomInput(50)); 8 | // console.log(mergeSort(setupRandomInput(50))); 9 | 10 | let arr = setupRandomInput(1000); 11 | let dataset = [arr]; 12 | 13 | 14 | function mergeSort(arr) { 15 | // if the array is length one or zero, return the array 16 | if (arr.length < 2) { 17 | return arr; 18 | } 19 | // figure out the middle point 20 | var middle = Math.floor(arr.length / 2); 21 | 22 | // create an array of the left half 23 | var left = arr.slice(0, middle); 24 | 25 | // create an array of right half 26 | var right = arr.slice(middle, arr.length); 27 | 28 | // call merge on a recursively called left half and right half 29 | return merge(mergeSort(left), mergeSort(right)); 30 | } 31 | 32 | function merge(left, right) { 33 | var result = []; 34 | 35 | // while both arrays have elements in them, zip them together 36 | while (left.length && right.length) { 37 | // if the left array first element is less than the right array first element, push to result 38 | if (left[0] <= right[0]) { 39 | result.push(left.shift()); 40 | // else push the right array first element to result 41 | } else { 42 | result.push(right.shift()); 43 | } 44 | } 45 | 46 | // if left is the only array with elements, push them all in 47 | while (left.length) { 48 | result.push(left.shift()); 49 | // if right is the only array with elements, push them all in 50 | } 51 | while (right.length) { 52 | result.push(right.shift()); 53 | } 54 | // return final result 55 | return result; 56 | } 57 | 58 | let t0 = performance.now(); 59 | console.log(mergeSort(arr)); 60 | let t1 = performance.now(); 61 | console.log(`mergeSort took ${t1 - t0} milliseconds`); 62 | 63 | -------------------------------------------------------------------------------- /src/d3.js: -------------------------------------------------------------------------------- 1 | 2 | // D3 test 3 | // d3.selectAll('p').style('color', 'darkblue'); 4 | 5 | // let fruits = ['apple', 'mango', 'banana', 'orange']; 6 | 7 | // d3.select('ul') 8 | // .selectAll('li') 9 | // .data(fruits) 10 | // .enter() 11 | // .append('li') 12 | // .text(d => d) 13 | 14 | // let svg = d3.select('svg'); 15 | 16 | // svg.append('rect') 17 | // .attr('x', 50) 18 | // .attr('y', 50) 19 | // .attr('width', 200) 20 | // .attr('height', 100) 21 | // .attr('fill', 'green'); 22 | 23 | //////////////////////// 24 | // Bar chart 25 | //////////////////////// 26 | 27 | // let data = [80, 100, 56, 120, 180, 30, 40, 120, 160]; 28 | // data = data.map(el => el / 10); 29 | 30 | // let svgWidth = 500; 31 | // let svgHeight = 300; 32 | // let barPadding = 5; 33 | 34 | // let barWidth = svgWidth / data.length; 35 | 36 | // let svg = d3.select('#svg1') 37 | // .attr('width', svgWidth) 38 | // .attr('height', svgHeight); 39 | 40 | // let yScale = d3.scaleLinear() 41 | // .domain([0, d3.max(data)]) 42 | // .range([0, svgHeight]); 43 | 44 | // let barChart = svg.selectAll('rect') 45 | // .data(data) 46 | // .enter() 47 | // .append('rect') 48 | // .attr('y', function(d) { 49 | // return svgHeight - yScale(d); 50 | // }) 51 | // .attr('height', function(d) { 52 | // return yScale(d); 53 | // }) 54 | // .attr('width', barWidth - barPadding) 55 | // .attr('class', 'bar') 56 | // .attr('transform', function(d, i) { 57 | // let translate = [barWidth * i, 0]; 58 | // return `translate(${translate})`; 59 | // }); 60 | 61 | // let text = svg.selectAll('text') 62 | // .data(data) 63 | // .enter() 64 | // .append("text") 65 | // .text(function(d) { 66 | // return d; 67 | // }) 68 | // .attr('y', function(d, i) { 69 | // return svgHeight - d - 2; 70 | // }) 71 | // .attr('x', function(d, i) { 72 | // return barWidth * i; 73 | // }) 74 | // .attr('fill', '#A64C38'); 75 | 76 | 77 | 78 | // //////////////////////// 79 | // // Shapes 80 | // //////////////////////// 81 | 82 | // let shapesContainer = d3.select('#svg2') -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## sort-visualizer 2 | ## Background and Overview 3 | A visual exploration of sorting algorithms written in JS & d3.js 4 | 5 | [Live Site](https://mrkchoi.github.io/sort-visualizer/) 6 | ## Functionality & MVP 7 | Users will be able to: 8 | - [X] Visualize sorting algorithms with realtime iterative stepping 9 | - [X] Compare time complexity of different sorting algorithms 10 | - [X] Display overview of Big(O) with lower + upper + actual time complexities 11 | 12 | The project will also include: 13 | - [X] Links to connect with me (GitHub, LinkedIn) 14 | - [X] A modal with algorithm introduction 15 | - [X] Data visualization built with d3.js 16 | 17 | ## Wireframes 18 | The app houses a primary d3.js container where algorithms are rendered in realtime. 19 | 20 | ![Realtime Processing](http://kchoi.io/assets/images/bubble-sort-vis.png) 21 | ![Comparison Chart](http://kchoi.io/assets/images/sort-visualizer-screenshot.png) 22 | 23 | 24 | ## Architecture & Technologies 25 | This app is implemented using the following technologies: 26 | * Vanilla JavaScript - structure and logic 27 | * d3.js - DOM manipulation and rendering 28 | * Babel for transpilation 29 | * Webpack for bundling scripts 30 | 31 | ## Implementation Timeline 32 | #### 5/17/2019: 33 | - [X] Tutorials on d3.js 34 | - [X] Setup `webpack`, `babel`, stylesheets, index.html, and `entry.js` file 35 | 36 | #### 5/18/2019: 37 | - [X] Continue d3.js documentation 38 | - [X] Complete sorting algorithms in JS 39 | - [X] Allow for local state history as nested dataset 40 | - [X] Color palette research 41 | - [X] Initial wireframes/mockups 42 | 43 | #### 5/19/2019: 44 | - [X] Complete d3.js documentation 45 | - [X] Narrow down visualization options 46 | - [X] Connect datasets to d3.js visualization w/ animated transitions 47 | - [X] Build out layout/mockups 48 | 49 | #### 5/20/2019: 50 | - [X] Build out the score, song progress, and winning/failing bar 51 | - [X] Implement sorting time complexity render 52 | - [X] Create interactive Big(O) overview chart 53 | - [X] Update introductory text + documentation 54 | 55 | #### 5/21/2019: 56 | - [X] Finalize userflow/testing 57 | - [X] Wrapup final styling 58 | - [X] Complete text animations + container/dataset transitions 59 | - [X] Production README.md 60 | - [X] Deploy to GitHub pages 61 | 62 | #### Bonus features: 63 | - [X] Add visualizations for selection, insertion & bogo sort 64 | -------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // import regeneratorRuntime from "regenerator-runtime"; 2 | import _ from 'lodash'; 3 | import './d3.js'; 4 | 5 | // import './visualize/sort'; 6 | 7 | import { runBubbleSort } from './algorithms/bubble_sort.js'; 8 | // import './algorithms/merge_sort'; 9 | // import './algorithms/bubble_sort'; 10 | 11 | // import './algorithms/quick_sort'; 12 | 13 | // import { setupRandomInput } from './algorithms/setup_input'; 14 | // import './test/test.js'; 15 | // import './test/starbreak.js'; 16 | // import './test/gapminder.js'; 17 | // import './algorithms/quick_sort'; 18 | // import './algorithms/big_o_chart'; 19 | // import './algorithms/all_sorts'; 20 | // import { generateChart } from './algorithms/big_o_chart'; 21 | // import { generateChart } from './algorithms/big_o_chart-test'; 22 | import { generateBubbleChart } from './graph/bubble_chart'; 23 | import './graph/gdp'; 24 | 25 | 26 | // let bubbleSortBtn = document.querySelector('.btn__bubblesort'); 27 | // bubbleSortBtn.addEventListener('click', handleSortClick); 28 | 29 | let svgCanvas = document.querySelector('#chart-area'); 30 | 31 | document.addEventListener('DOMContentLoaded', () => { 32 | // generateChart(); 33 | runBubbleSort(); 34 | 35 | // console.log(setupRandomInput(10)); 36 | generateBubbleChart(); 37 | 38 | }); 39 | 40 | 41 | // function handleSortClick(e) { 42 | // e.preventDefault(); 43 | 44 | // // reset svg canvas 45 | // svgCanvas.innerHTML = ''; 46 | 47 | // console.log("clicked!"); 48 | 49 | // // run sort 50 | // let targetClassList = e.target.classList; 51 | // if (targetClassList.contains("btn__bubblesort")) { 52 | // // generateBubbleChart(); 53 | // // generateChart(); 54 | // // runBubbleSort(); 55 | // } else if (targetClassList.contains("btn__quicksort")) { 56 | // // runQuickSort(); 57 | // } else if (targetClassList.contains("btn__mergesort")) { 58 | // // runMergeSort(); 59 | // } 60 | // } 61 | 62 | 63 | // console.log(setupRandomInput (20)); 64 | 65 | 66 | 67 | 68 | // import { setupRandomInput } from "./algorithms/setup_input"; 69 | 70 | // let arr = setupRandomInput(10); 71 | 72 | // let data = [arr]; 73 | 74 | // function qs(arr, leftPrint = [], pivotPrint = 0, rightPrint = []) { 75 | // if (arr.length < 2) { 76 | // // check if left or right is empty 77 | // // debugger 78 | // data.push(leftPrint.concat([pivotPrint]).concat(rightPrint)); 79 | // return arr; 80 | // } 81 | 82 | // let pivot = arr[0]; 83 | // let left = arr.slice(1).filter(el => el < pivot); 84 | // let right = arr.slice(1).filter(el => el >= pivot); 85 | 86 | 87 | 88 | // leftPrint = left; 89 | // pivotPrint = pivot; 90 | // rightPrint = right; 91 | // left = qs(left, leftPrint, pivotPrint, rightPrint); 92 | 93 | // // leftPrint = left; 94 | // // pivotPrint = pivot; 95 | // // rightPrint = rightPrint; 96 | // right = qs(right, leftPrint, pivotPrint, rightPrint); 97 | 98 | // data.push(leftPrint.concat([pivot]).concat(rightPrint)); 99 | // return left.concat([pivot]).concat(right); 100 | // } 101 | 102 | // console.log(qs(arr)); 103 | // console.log(data); 104 | 105 | -------------------------------------------------------------------------------- /src/algorithms/sort_states.js: -------------------------------------------------------------------------------- 1 | // sortStates = { 2 | // bubbleSort: [ 3 | // [4, 8, 7, 2, 3, 9, 10, 5, 1, 6], 4 | // [4, 7, 8, 2, 3, 9, 10, 5, 1, 6], 5 | // [4, 7, 2, 8, 3, 9, 10, 5, 1, 6], 6 | // [4, 7, 2, 3, 8, 9, 10, 5, 1, 6], 7 | // [4, 7, 2, 3, 8, 9, 10, 1, 5, 6], 8 | // [4, 2, 7, 3, 8, 9, 10, 1, 5, 6], 9 | // [4, 2, 3, 7, 8, 9, 10, 1, 5, 6], 10 | // [4, 2, 3, 7, 8, 9, 1, 10, 5, 6], 11 | // [4, 2, 3, 7, 8, 9, 1, 5, 10, 6], 12 | // [4, 2, 3, 7, 8, 9, 1, 5, 6, 10], 13 | // [2, 4, 3, 7, 8, 9, 1, 5, 6, 10], 14 | // [2, 3, 4, 7, 8, 9, 1, 5, 6, 10], 15 | // [2, 3, 4, 7, 8, 1, 9, 5, 6, 10], 16 | // [2, 3, 4, 7, 8, 1, 5, 9, 6, 10], 17 | // [2, 3, 4, 7, 8, 1, 5, 6, 9, 10], 18 | // [2, 3, 4, 7, 1, 8, 5, 6, 9, 10], 19 | // [2, 3, 4, 7, 1, 5, 8, 6, 9, 10], 20 | // [2, 3, 4, 7, 1, 5, 6, 8, 9, 10], 21 | // [2, 3, 4, 1, 7, 5, 6, 8, 9, 10], 22 | // [2, 3, 4, 1, 5, 7, 6, 8, 9, 10], 23 | // [2, 3, 4, 1, 5, 6, 7, 8, 9, 10], 24 | // [2, 3, 1, 4, 5, 6, 7, 8, 9, 10], 25 | // [2, 1, 3, 4, 5, 6, 7, 8, 9, 10], 26 | // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 27 | // ], 28 | // quickSort: [], 29 | // mergeSort: [], 30 | // insertionSort: [], 31 | // selectionSort: [] 32 | // }; 33 | 34 | 35 | 36 | // [4, 8, 7, 2, 3, 9, 10, 5, 1, 6], 37 | // [8,7,2,3,4,9,10,5,1,6], 38 | // [8,7,2,3,4,9,10,5,1,6], 39 | 40 | 41 | 42 | 43 | // [2, 3, 1], [4], [8, 7, 9, 10, 5, 6], 44 | // [1][2][3] [4] [5, 6, 7] [8] [9, 10] 45 | 46 | 47 | 48 | 49 | 50 | 51 | // example of data shape (json) 52 | 53 | [ 54 | { 55 | "sorts": [ 56 | { 57 | "sort": "bubble sort", 58 | "time": 10.4355523156, 59 | "input size": 100 60 | }, 61 | { 62 | "sort": "quick sort", 63 | "time": 2.4355523156, 64 | "input size": 100 65 | } 66 | ], 67 | "input size": 100 68 | }, 69 | ] 70 | 71 | [ 72 | { 73 | "sorts": [ 74 | { 75 | "sort": "bubble sort", 76 | "time": 17.148396998643875, 77 | "inputSize": 5000 78 | }, 79 | { 80 | "sort": "selection sort", 81 | "time": 10.055069983005524, 82 | "inputSize": 5000 83 | }, 84 | { 85 | "sort": "insertion sort", 86 | "time": 15.673156976699829, 87 | "inputSize": 5000 88 | }, 89 | { 90 | "sort": "radix sort", 91 | "time": 1.7403109967708588, 92 | "inputSize": 5000 93 | }, 94 | { 95 | "sort": "heap sort", 96 | "time": 0.8763439953327179, 97 | "inputSize": 5000 98 | }, 99 | { 100 | "sort": "quick sort", 101 | "time": 23.07947301864624, 102 | "inputSize": 5000 103 | }, 104 | { 105 | "sort": "merge sort", 106 | "time": 0.48159298300743103, 107 | "inputSize": 5000 108 | }, 109 | { 110 | "sort": "shell sort", 111 | "time": 69.4279719889164, 112 | "inputSize": 5000 113 | } 114 | ], 115 | "inputSize": 5000, 116 | "currentMaxTime": 69.4279719889164 117 | } 118 | ] 119 | 120 | // bubble sort: O(n^2) 121 | // selection sort: O(n^2) 122 | // insertion sort: O(n^2) 123 | // radix sort: O(n+k) 124 | // heap sort: O(n*log(n)) 125 | // quick sort: O(n^2) 126 | // merge sort: O(n*log(n)) 127 | // shell sort: O(n^2) -------------------------------------------------------------------------------- /dist/data/buildings2.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Burj Khalifa", 4 | "height": "350" 5 | }, 6 | { 7 | "name": "Shanghai Tower", 8 | "height": "263.34" 9 | }, 10 | { 11 | "name": "Abraj Al-Bait Clock Tower", 12 | "height": "254.04" 13 | }, 14 | { 15 | "name": "Ping An Finance Centre", 16 | "height": "253.20" 17 | }, 18 | { 19 | "name": "Lotte World Tower", 20 | "height": "230.16" 21 | }, 22 | { 23 | "name": "One World Trade Center", 24 | "height": "541.3" 25 | }, 26 | { 27 | "name": "Guangzhou CTF Finance Center", 28 | "height": "530" 29 | }, 30 | { 31 | "name": "Burk Khalifa", 32 | "height": "350" 33 | }, 34 | { 35 | "name": "Shanghhai Tower", 36 | "height": "263.34" 37 | }, 38 | { 39 | "name": "Abraaj Al-Bait Clock Tower", 40 | "height": "254.04" 41 | }, 42 | { 43 | "name": "Ping An Financae Centre", 44 | "height": "253.20" 45 | }, 46 | { 47 | "name": "Lottea World Tower", 48 | "height": "230.16" 49 | }, 50 | { 51 | "name": "One Worlda Trade Center", 52 | "height": "541.3" 53 | }, 54 | { 55 | "name": "Guangzhoou CTF Finance Center", 56 | "height": "530" 57 | }, 58 | { 59 | "name": "Burkg Khalifa", 60 | "height": "350" 61 | }, 62 | { 63 | "name": "Shagnghhai Tower", 64 | "height": "263.34" 65 | }, 66 | { 67 | "name": "Abragaj Al-Bait Clock Tower", 68 | "height": "254.04" 69 | }, 70 | { 71 | "name": "Ping Agn Financae Centre", 72 | "height": "253.20" 73 | }, 74 | { 75 | "name": "Lottgea World Tower", 76 | "height": "230.16" 77 | }, 78 | { 79 | "name": "One Worlgda Trade Center", 80 | "height": "541.3" 81 | }, 82 | { 83 | "name": "Guangzhogou CTF Finance Center", 84 | "height": "530" 85 | }, 86 | { 87 | "name": "Burj Khaddlifa", 88 | "height": "350" 89 | }, 90 | { 91 | "name": "Shanghai ddTower", 92 | "height": "263.34" 93 | }, 94 | { 95 | "name": "Abraj Al-Bddait Clock Tower", 96 | "height": "254.04" 97 | }, 98 | { 99 | "name": "Ping An Fiddnance Centre", 100 | "height": "253.20" 101 | }, 102 | { 103 | "name": "Lotte Worddld Tower", 104 | "height": "230.16" 105 | }, 106 | { 107 | "name": "One Worlddd Trade Center", 108 | "height": "541.3" 109 | }, 110 | { 111 | "name": "Guangzhddou CTF Finance Center", 112 | "height": "530" 113 | }, 114 | { 115 | "name": "Burk Khddalifa", 116 | "height": "350" 117 | }, 118 | { 119 | "name": "Shanghddhai Tower", 120 | "height": "263.34" 121 | }, 122 | { 123 | "name": "Abraddaj Al-Bait Clock Tower", 124 | "height": "254.04" 125 | }, 126 | { 127 | "name": "Pinddg An Financae Centre", 128 | "height": "253.20" 129 | }, 130 | { 131 | "name": "Lotddtea World Tower", 132 | "height": "230.16" 133 | }, 134 | { 135 | "name": "Ondde Worlda Trade Center", 136 | "height": "541.3" 137 | }, 138 | { 139 | "name": "Guaddngzhoou CTF Finance Center", 140 | "height": "530" 141 | }, 142 | { 143 | "name": "Bddurkg Khalifa", 144 | "height": "350" 145 | }, 146 | { 147 | "name": "Shagddnghhai Tower", 148 | "height": "263.34" 149 | }, 150 | { 151 | "name": "Abragddaj Al-Bait Clock Tower", 152 | "height": "254.04" 153 | }, 154 | { 155 | "name": "Piddng Agn Financae Centre", 156 | "height": "253.20" 157 | }, 158 | { 159 | "name": "Lotddtgea World Tower", 160 | "height": "230.16" 161 | }, 162 | { 163 | "name": "Ondde Worlgda Trade Center", 164 | "height": "541.3" 165 | }, 166 | { 167 | "name": "Guaddngzhogou CTF Finance Center", 168 | "height": "530" 169 | } 170 | ] 171 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /src/test/starbreak.js: -------------------------------------------------------------------------------- 1 | // /* 2 | // * main.js 3 | // * Mastering Data Visualization with D3.js 4 | // * 5.7 - D3 Transitions 5 | // */ 6 | 7 | // var margin = { left: 80, right: 20, top: 50, bottom: 100 }; 8 | 9 | // var width = 600 - margin.left - margin.right, 10 | // height = 400 - margin.top - margin.bottom; 11 | 12 | // var flag = true; 13 | 14 | // var t = d3.transition().duration(750); 15 | 16 | // var g = d3.select("#chart-area") 17 | // .append("svg") 18 | // .attr("width", width + margin.left + margin.right) 19 | // .attr("height", height + margin.top + margin.bottom) 20 | // .append("g") 21 | // .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 22 | 23 | // var xAxisGroup = g.append("g") 24 | // .attr("class", "x axis") 25 | // .attr("transform", "translate(0," + height + ")"); 26 | 27 | // var yAxisGroup = g.append("g") 28 | // .attr("class", "y axis"); 29 | 30 | // // X Scale 31 | // var x = d3.scaleBand() 32 | // .range([0, width]) 33 | // .padding(0.2); 34 | 35 | // // Y Scale 36 | // var y = d3.scaleLinear() 37 | // .range([height, 0]); 38 | 39 | // // X Label 40 | // g.append("text") 41 | // .attr("y", height + 50) 42 | // .attr("x", width / 2) 43 | // .attr("font-size", "20px") 44 | // .attr("text-anchor", "middle") 45 | // .text("Month"); 46 | 47 | // // Y Label 48 | // var yLabel = g.append("text") 49 | // .attr("y", -60) 50 | // .attr("x", -(height / 2)) 51 | // .attr("font-size", "20px") 52 | // .attr("text-anchor", "middle") 53 | // .attr("transform", "rotate(-90)") 54 | // .text("Revenue"); 55 | 56 | // d3.json("data/revenues.json").then(function (data) { 57 | // // console.log(data); 58 | 59 | // // Clean data 60 | // data.forEach(function (d) { 61 | // d.revenue = +d.revenue; 62 | // d.profit = +d.profit; 63 | // }); 64 | 65 | // d3.interval(function () { 66 | // var newData = flag ? data : data.slice(1); 67 | 68 | // update(newData) 69 | // flag = !flag 70 | // }, 1000); 71 | 72 | // // Run the vis for the first time 73 | // update(data); 74 | // }); 75 | 76 | // function update(data) { 77 | // var value = flag ? "revenue" : "profit"; 78 | 79 | // x.domain(data.map(function (d) { return d.month })); 80 | // y.domain([0, d3.max(data, function (d) { return d[value] })]) 81 | 82 | // // X Axis 83 | // var xAxisCall = d3.axisBottom(x); 84 | // xAxisGroup.transition(t).call(xAxisCall);; 85 | 86 | // // Y Axis 87 | // var yAxisCall = d3.axisLeft(y) 88 | // .tickFormat(function (d) { return "$" + d; }); 89 | // yAxisGroup.transition(t).call(yAxisCall); 90 | 91 | // // JOIN new data with old elements. 92 | // var circles = g.selectAll("circle") 93 | // .data(data, function (d) { 94 | // return d.month; 95 | // }); 96 | 97 | // // EXIT old elements not present in new data. 98 | // circles.exit() 99 | // .attr("fill", "red") 100 | // .transition(t) 101 | // .attr("cy", y(0)) 102 | // .attr("height", 0) 103 | // .remove(); 104 | 105 | // // ENTER new elements present in new data... 106 | // circles.enter() 107 | // .append("circle") 108 | // .attr("fill", "grey") 109 | // .attr("cy", y(0)) 110 | // .attr('r', 5) 111 | // .attr("cx", function (d) { return x(d.month) + x.bandwidth() / 2}) 112 | // // AND UPDATE old elements present in new data. 113 | // .merge(circles) 114 | // .transition(t) 115 | // .attr("cx", function (d) { return x(d.month) + x.bandwidth() / 2 }) 116 | // .attr("cy", function (d) { return y(d[value]); }) 117 | 118 | // var label = flag ? "Revenue" : "Profit"; 119 | // yLabel.text(label); 120 | 121 | // } 122 | 123 | 124 | -------------------------------------------------------------------------------- /src/test/gapminder.js: -------------------------------------------------------------------------------- 1 | let margin = { left: 80, right: 20, top: 50, bottom: 100 }; 2 | let height = 500 - margin.top - margin.bottom, 3 | width = 800 - margin.left - margin.right; 4 | 5 | let g = d3 6 | .select("#chart-area") 7 | .append("svg") 8 | .attr("width", width + margin.left + margin.right) 9 | .attr("height", height + margin.top + margin.bottom) 10 | .append("g") 11 | .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 12 | 13 | let time = 0; 14 | 15 | // Scales 16 | let x = d3 17 | .scaleLog() 18 | .base(10) 19 | .range([0, width]) 20 | .domain([142, 150000]); 21 | let y = d3 22 | .scaleLinear() 23 | .range([height, 0]) 24 | .domain([0, 90]); 25 | let area = d3 26 | .scaleLinear() 27 | .range([25 * Math.PI, 1500 * Math.PI]) 28 | .domain([2000, 1400000000]); 29 | // let continentColor = d3.scaleOrdinal(d3.schemePastel1); 30 | let continentColor = d3.scaleOrdinal([ 31 | "#8dd3c7", 32 | "#ffffb3", 33 | "#bebada", 34 | "#fb8072", 35 | "#80b1d3", 36 | "#fdb462", 37 | "#b3de69", 38 | "#fccde5", 39 | "#d9d9d9", 40 | "#bc80bd", 41 | "#ccebc5", 42 | "#ffed6f" 43 | ]); 44 | 45 | // Labels 46 | let xLabel = g 47 | .append("text") 48 | .attr("y", height + 50) 49 | .attr("x", width / 2) 50 | .attr("font-size", "20px") 51 | .attr("text-anchor", "middle") 52 | .text("GDP Per Capita ($)"); 53 | let yLabel = g 54 | .append("text") 55 | .attr("transform", "rotate(-90)") 56 | .attr("y", -40) 57 | .attr("x", -170) 58 | .attr("font-size", "20px") 59 | .attr("text-anchor", "middle") 60 | .text("Life Expectancy (Years)"); 61 | let timeLabel = g 62 | .append("text") 63 | .attr("y", height - 10) 64 | .attr("x", width - 40) 65 | .attr("font-size", "40px") 66 | .attr("opacity", "0.4") 67 | .attr("text-anchor", "middle") 68 | .text("1800"); 69 | 70 | // X Axis 71 | let xAxisCall = d3 72 | .axisBottom(x) 73 | .tickValues([400, 4000, 40000]) 74 | .tickFormat(d3.format("$")); 75 | g.append("g") 76 | .attr("class", "x axis") 77 | .attr("transform", "translate(0," + height + ")") 78 | .call(xAxisCall); 79 | 80 | // Y Axis 81 | let yAxisCall = d3.axisLeft(y).tickFormat(function(d) { 82 | return +d; 83 | }); 84 | g.append("g") 85 | .attr("class", "y axis") 86 | .call(yAxisCall); 87 | 88 | d3.json("../dist/data/gapminder.json").then(function(data) { 89 | console.log(data); 90 | 91 | // Clean data 92 | const formattedData = data.map(function(year) { 93 | return year["countries"] 94 | .filter(function(country) { 95 | let dataExists = country.income && country.life_exp; 96 | return dataExists; 97 | }) 98 | .map(function(country) { 99 | country.income = +country.income; 100 | country.life_exp = +country.life_exp; 101 | return country; 102 | }); 103 | }); 104 | 105 | // Run the code every 0.1 second 106 | d3.interval(function() { 107 | // At the end of our data, loop back 108 | time = time < 214 ? time + 1 : 0; 109 | update(formattedData[time]); 110 | }, 50); 111 | 112 | // First run of the visualization 113 | update(formattedData[0]); 114 | }); 115 | 116 | function update(data) { 117 | // Standard transition time for the visualization 118 | let t = d3.transition().duration(50); 119 | 120 | // JOIN new data with old elements. 121 | let circles = g.selectAll("circle").data(data, function(d) { 122 | return d.country; 123 | }); 124 | 125 | // EXIT old elements not present in new data. 126 | circles 127 | .exit() 128 | .attr("class", "exit") 129 | .remove(); 130 | 131 | // ENTER new elements present in new data. 132 | circles 133 | .enter() 134 | .append("circle") 135 | .attr("class", "enter") 136 | .attr("fill", function(d) { 137 | return continentColor(d.continent); 138 | }) 139 | .merge(circles) 140 | .transition(t) 141 | .attr("cy", function(d) { 142 | return y(d.life_exp); 143 | }) 144 | .attr("cx", function(d) { 145 | return x(d.income); 146 | }) 147 | .attr("r", function(d) { 148 | return Math.sqrt(area(d.population) / Math.PI); 149 | }); 150 | 151 | // Update the time label 152 | timeLabel.text(+(time + 1800)); 153 | } 154 | -------------------------------------------------------------------------------- /src/algorithms/big_o_chart-test.js: -------------------------------------------------------------------------------- 1 | // import { runAllSorts } from "./all_sorts"; 2 | // import { setupRandomInput } from "./setup_input"; 3 | 4 | // let inputs = setupRandomInput(6000); 5 | // let data = runAllSorts(inputs); 6 | // console.log(data); 7 | 8 | function generateChart() { 9 | // let inputs = setupRandomInput(6000); 10 | // let data = runAllSorts(inputs); 11 | // console.log(data); 12 | 13 | //////////////////////// 14 | // d3.js 15 | //////////////////////// 16 | 17 | var margin = { left: 80, right: 20, top: 50, bottom: 100 }; 18 | 19 | var width = 600 - margin.left - margin.right, 20 | height = 400 - margin.top - margin.bottom; 21 | 22 | var flag = true; 23 | 24 | var g = d3 25 | .select("#chart-area") 26 | .append("svg") 27 | .attr("width", width + margin.left + margin.right) 28 | .attr("height", height + margin.top + margin.bottom) 29 | .append("g") 30 | .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 31 | 32 | var xAxisGroup = g 33 | .append("g") 34 | .attr("class", "x axis") 35 | .attr("transform", "translate(0," + height + ")") 36 | 37 | var yAxisGroup = g.append("g").attr("class", "y axis"); 38 | 39 | // X Scale 40 | var x = d3 41 | .scaleBand() 42 | .range([0, width]) 43 | .padding(0.2); 44 | 45 | // Y Scale 46 | var y = d3.scaleLinear().range([height, 0]); 47 | 48 | // X Label 49 | g.append("text") 50 | .attr("y", height + 50) 51 | .attr("x", width / 2) 52 | .attr("font-size", "20px") 53 | .attr("text-anchor", "middle") 54 | .text("Input size"); 55 | 56 | // Y Label 57 | var yLabel = g 58 | .append("text") 59 | .attr("y", -60) 60 | .attr("x", -(height / 2)) 61 | .attr("font-size", "20px") 62 | .attr("text-anchor", "middle") 63 | .attr("transform", "rotate(-90)") 64 | .text("Time (milliseconds)"); 65 | 66 | d3.json("data/sortData.json").then(function(data) { 67 | // console.log(data); 68 | 69 | d3.interval(function() { 70 | update(data); 71 | flag = !flag; 72 | }, 500); 73 | 74 | // Run the vis for the first time 75 | update(data); 76 | }); 77 | 78 | function update(data) { 79 | // var value = flag ? "revenue" : "profit"; 80 | 81 | x.domain( 82 | data['inputSize'].map(function(d) { 83 | return d; 84 | }) 85 | ); 86 | y.domain([ 87 | 0, 88 | d3.max(data["maxTime"], function(d) { 89 | return d; 90 | }) 91 | ]); 92 | 93 | // X Axis 94 | var xAxisCall = d3.axisBottom(x); 95 | xAxisGroup.call(xAxisCall); 96 | 97 | // Y Axis 98 | var yAxisCall = d3.axisLeft(y).tickFormat(function(d) { 99 | return d; 100 | }); 101 | yAxisGroup.call(yAxisCall); 102 | 103 | 104 | let bubbleData = data["bubbleSort"]; 105 | console.log(bubbleData) 106 | 107 | let lineGenerator = d3.line(); 108 | let pathString = lineGenerator(bubbleData); 109 | 110 | d3.select('path') 111 | .attr('d', pathString) 112 | .attr('class', 'line__bubble'); 113 | 114 | // JOIN new data with old elements. 115 | var rects = g.selectAll("rect").data(data); 116 | 117 | // EXIT old elements not present in new data. 118 | rects.exit().remove(); 119 | 120 | // UPDATE old elements present in new data. 121 | rects 122 | .attr("y", function(d) { 123 | return y(d["maxTime"]); 124 | }) 125 | .attr("x", function(d, i) { 126 | return 20 * i; 127 | }) 128 | .attr("height", function(d) { 129 | return height; 130 | // return height - y(d['maxTime']); 131 | }) 132 | .attr("width", x.bandwidth); 133 | 134 | // ENTER new elements present in new data. 135 | rects 136 | .enter() 137 | .append("rect") 138 | .attr("y", function(d) { 139 | return y(d['inputSize']); 140 | }) 141 | .attr("x", function(d, i) { 142 | return x(d[i]); 143 | return 20 * i; 144 | }) 145 | .attr("height", function(d) { 146 | return height - y(d['inputSize']); 147 | return height; 148 | }) 149 | .attr("width", x.bandwidth) 150 | .attr("fill", "grey"); 151 | 152 | // var label = flag ? "Revenue" : "Profit"; 153 | // yLabel.text(label); 154 | } 155 | } 156 | 157 | 158 | module.exports = { 159 | generateChart: generateChart 160 | } -------------------------------------------------------------------------------- /dist/js/utils.js: -------------------------------------------------------------------------------- 1 | function hide_gui_folder(gui, folder_name, hide) { 2 | var folder = gui.__folders[folder_name]; 3 | folder.domElement.parentElement.hidden = hide; 4 | } 5 | 6 | function hide_gui_element(gui, property, hide) { 7 | for (var i = 0; i < gui.__controllers.length; i++) { 8 | var controller = gui.__controllers[i]; 9 | if (controller.property === property) { 10 | controller.domElement.parentElement.parentElement.hidden = hide; 11 | return; 12 | } 13 | } 14 | } 15 | 16 | function update_gui(gui) { 17 | for (var i = 0; i < gui.__controllers.length; i++) { 18 | gui.__controllers[i].updateDisplay(); 19 | } 20 | } 21 | 22 | function random_choice(list) { 23 | return list[Math.floor(Math.random() * list.length)]; 24 | } 25 | 26 | function shuffle(array, start, end) { 27 | var m = end - start; 28 | while (m) { 29 | var i = Math.floor(Math.random() * m--); 30 | var tmp = array[start + m]; 31 | array[start + m] = array[start + i]; 32 | array[start + i] = tmp; 33 | } 34 | } 35 | 36 | function init_shaders(gl, fs_source, vs_source) { 37 | var fragment_shader = gl.createShader(gl.FRAGMENT_SHADER); 38 | gl.shaderSource(fragment_shader, fs_source); 39 | gl.compileShader(fragment_shader); 40 | if (!gl.getShaderParameter(fragment_shader, gl.COMPILE_STATUS)) { 41 | console.log( 42 | "ERROR IN " + 43 | fragment_shader + 44 | "SHADER: " + 45 | gl.getShaderInfoLog(fragment_shader) 46 | ); 47 | return false; 48 | } 49 | 50 | var vertex_shader = gl.createShader(gl.VERTEX_SHADER); 51 | gl.shaderSource(vertex_shader, vs_source); 52 | gl.compileShader(vertex_shader); 53 | if (!gl.getShaderParameter(vertex_shader, gl.COMPILE_STATUS)) { 54 | console.log( 55 | "ERROR IN " + 56 | vertex_shader + 57 | "SHADER: " + 58 | gl.getShaderInfoLog(vertex_shader) 59 | ); 60 | return false; 61 | } 62 | 63 | var program_id = gl.createProgram(); 64 | gl.attachShader(program_id, fragment_shader); 65 | gl.attachShader(program_id, vertex_shader); 66 | 67 | gl.linkProgram(program_id); 68 | 69 | gl.deleteShader(fragment_shader); 70 | gl.deleteShader(vertex_shader); 71 | 72 | if (!gl.getProgramParameter(program_id, gl.LINK_STATUS)) { 73 | alert("Could not initialize shaders"); 74 | } 75 | 76 | program_id.position = gl.getAttribLocation(program_id, "vertexPos"); 77 | gl.enableVertexAttribArray(program_id.position); 78 | 79 | return program_id; 80 | } 81 | 82 | function download(filename, data) { 83 | var link = document.createElement("a"); 84 | link.setAttribute("href", data); 85 | link.setAttribute("download", filename); 86 | link.style.display = "none"; 87 | document.body.appendChild(link); 88 | link.click(); 89 | document.body.removeChild(link); 90 | } 91 | 92 | var SG_MAGICCONST = 1.0 + Math.log(4.5); 93 | var LOG4 = Math.log(4.0); 94 | 95 | function gamma_distribution(alpha, beta) { 96 | /*if (alpha <= 0.0 || beta <= 0.0) { 97 | throw new Error('gamma_distribution: alpha and beta must be > 0.0'); 98 | }*/ 99 | 100 | if (alpha > 1) { 101 | var ainv = Math.sqrt(2.0 * alpha - 1.0); 102 | var bbb = alpha - LOG4; 103 | var ccc = alpha + ainv; 104 | 105 | while (true) { 106 | var u1 = Math.random(); 107 | if (1e-7 > u1 || u1 > 0.9999999) { 108 | continue; 109 | } 110 | var u2 = 1.0 - Math.random(); 111 | var v = Math.log(u1 / (1.0 - u1)) / ainv; 112 | var x = alpha * Math.exp(v); 113 | var z = u1 * u1 * u2; 114 | var r = bbb + ccc * v - x; 115 | if (r + SG_MAGICCONST - 4.5 * z >= 0.0 || r >= Math.log(z)) { 116 | return x * beta; 117 | } 118 | } 119 | } else if (alpha === 1.0) { 120 | do { 121 | var u = Math.random(); 122 | } while (u <= 1e-7); 123 | return -Math.log(u) * beta; 124 | } else { 125 | while (true) { 126 | var u = Math.random(); 127 | var b = (Math.E + alpha) / Math.E; 128 | var p = b * u; 129 | if (p <= 1.0) { 130 | x = Math.pow(p, 1.0 / alpha); 131 | } else { 132 | x = -Math.log((b - p) / alpha); 133 | } 134 | var u1 = Math.random(); 135 | if (p > 1.0) { 136 | if (u1 <= Math.pow(x, alpha - 1.0)) { 137 | break; 138 | } 139 | } else if (u1 <= Math.exp(-x)) { 140 | break; 141 | } 142 | } 143 | return x * beta; 144 | } 145 | } 146 | 147 | function beta_distribution(alpha, beta) { 148 | var y = gamma_distribution(alpha, 1); 149 | if (y === 0) { 150 | return 0.0; 151 | } else { 152 | return y / (y + gamma_distribution(beta, 1)); 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /src/data/gdp.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "year": 1950, 4 | "states": [ 5 | { 6 | "state": "Alabama", 7 | "gdpPerCapita": 919 8 | }, 9 | { 10 | "state": "Alaska", 11 | "gdpPerCapita": 2899 12 | }, 13 | { 14 | "state": "Arizona", 15 | "gdpPerCapita": 1408 16 | }, 17 | { 18 | "state": "Arkansas", 19 | "gdpPerCapita": 849 20 | }, 21 | { 22 | "state": "California", 23 | "gdpPerCapita": 1947 24 | }, 25 | { 26 | "state": "Colorado", 27 | "gdpPerCapita": 1584 28 | }, 29 | { 30 | "state": "Connecticut", 31 | "gdpPerCapita": 1918 32 | }, 33 | { 34 | "state": "Delaware", 35 | "gdpPerCapita": 2082 36 | }, 37 | { 38 | "state": "Florida", 39 | "gdpPerCapita": 1351 40 | }, 41 | { 42 | "state": "Georgia", 43 | "gdpPerCapita": 1087 44 | }, 45 | { 46 | "state": "Hawaii", 47 | "gdpPerCapita": 1580 48 | }, 49 | { 50 | "state": "Idaho", 51 | "gdpPerCapita": 1352 52 | }, 53 | { 54 | "state": "Illinois", 55 | "gdpPerCapita": 1842 56 | }, 57 | { 58 | "state": "Indiana", 59 | "gdpPerCapita": 1525 60 | }, 61 | { 62 | "state": "Iowa", 63 | "gdpPerCapita": 1539 64 | }, 65 | { 66 | "state": "Kansas", 67 | "gdpPerCapita": 1481 68 | }, 69 | { 70 | "state": "Kentucky", 71 | "gdpPerCapita": 998 72 | }, 73 | { 74 | "state": "Louisiana", 75 | "gdpPerCapita": 1132 76 | }, 77 | { 78 | "state": "Maine", 79 | "gdpPerCapita": 1226 80 | }, 81 | { 82 | "state": "Maryland", 83 | "gdpPerCapita": 1702 84 | }, 85 | { 86 | "state": "Massachusetts", 87 | "gdpPerCapita": 1685 88 | }, 89 | { 90 | "state": "Michigan", 91 | "gdpPerCapita": 1717 92 | }, 93 | { 94 | "state": "Minnesota", 95 | "gdpPerCapita": 1447 96 | }, 97 | { 98 | "state": "Mississippi", 99 | "gdpPerCapita": 780 100 | }, 101 | { 102 | "state": "Missouri", 103 | "gdpPerCapita": 1438 104 | }, 105 | { 106 | "state": "Montana", 107 | "gdpPerCapita": 1678 108 | }, 109 | { 110 | "state": "Nebraska", 111 | "gdpPerCapita": 1583 112 | }, 113 | { 114 | "state": "Nevada", 115 | "gdpPerCapita": 2089 116 | }, 117 | { 118 | "state": "New Hampshire", 119 | "gdpPerCapita": 1373 120 | }, 121 | { 122 | "state": "New Jersey", 123 | "gdpPerCapita": 1820 124 | }, 125 | { 126 | "state": "New Mexico", 127 | "gdpPerCapita": 1260 128 | }, 129 | { 130 | "state": "New York", 131 | "gdpPerCapita": 1868 132 | }, 133 | { 134 | "state": "North Carolina", 135 | "gdpPerCapita": 1095 136 | }, 137 | { 138 | "state": "North Dakota", 139 | "gdpPerCapita": 1388 140 | }, 141 | { 142 | "state": "Ohio", 143 | "gdpPerCapita": 1611 144 | }, 145 | { 146 | "state": "Oklahoma", 147 | "gdpPerCapita": 1164 148 | }, 149 | { 150 | "state": "Oregon", 151 | "gdpPerCapita": 1695 152 | }, 153 | { 154 | "state": "Pennsylvania", 155 | "gdpPerCapita": 1552 156 | }, 157 | { 158 | "state": "Rhode Island", 159 | "gdpPerCapita": 1601 160 | }, 161 | { 162 | "state": "South Carolina", 163 | "gdpPerCapita": 943 164 | }, 165 | { 166 | "state": "South Dakota", 167 | "gdpPerCapita": 1298 168 | }, 169 | { 170 | "state": "Tennessee", 171 | "gdpPerCapita": 1040 172 | }, 173 | { 174 | "state": "Texas", 175 | "gdpPerCapita": 1392 176 | }, 177 | { 178 | "state": "Utah", 179 | "gdpPerCapita": 1391 180 | }, 181 | { 182 | "state": "Vermont", 183 | "gdpPerCapita": 1189 184 | }, 185 | { 186 | "state": "Virginia", 187 | "gdpPerCapita": 1327 188 | }, 189 | { 190 | "state": "Washington", 191 | "gdpPerCapita": 1797 192 | }, 193 | { 194 | "state": "West Virginia", 195 | "gdpPerCapita": 1051 196 | }, 197 | { 198 | "state": "Wisconsin", 199 | "gdpPerCapita": 1515 200 | }, 201 | { 202 | "state": "Wyoming", 203 | "gdpPerCapita": 179 204 | } 205 | ] 206 | } 207 | ] 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /src/algorithms/quick_sort.js: -------------------------------------------------------------------------------- 1 | 2 | import { setupRandomInput } from './setup_input'; 3 | 4 | 5 | let arr = setupRandomInput(1000); 6 | // console.log(arr); 7 | 8 | 9 | 10 | 11 | function quickSort(arr) { 12 | if (arr.length < 2) return arr; 13 | 14 | const pivot = arr[0]; 15 | let left = arr.slice(1).filter(el => el < pivot); 16 | let right = arr.slice(1).filter(el => el >= pivot); 17 | left = quickSort(left); 18 | right = quickSort(right); 19 | 20 | return left.concat([pivot]).concat(right); 21 | }; 22 | 23 | let t0 = performance.now(); 24 | quickSort(arr); 25 | let t1 = performance.now(); 26 | console.log(`quickSort took ${t1 -t0} milliseconds`); 27 | 28 | 29 | // (function quickSortSetup() { 30 | // var n = 120, 31 | // array = d3.shuffle(d3.range(n)); 32 | 33 | // var margin = { top: 60, right: 60, bottom: 60, left: 60 }, 34 | // width = 960 - margin.left - margin.right, 35 | // height = 180 - margin.top - margin.bottom; 36 | 37 | // var x = d3.scalePoint() 38 | // .domain(d3.range(n)) 39 | // .range([0, width]); 40 | 41 | // var a = d3.scaleLinear() 42 | // .domain([0, n - 1]) 43 | // .range([-45, 45]); 44 | 45 | // var p = d3.select("#quicksort").on("click", click); 46 | 47 | // var svg = p 48 | // .append("svg") 49 | // .attr("width", width + margin.left + margin.right) 50 | // .attr("height", height + margin.top + margin.bottom) 51 | // .append("g") 52 | // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 53 | 54 | // var gLine = svg.append("g").attr("class", "line"); 55 | 56 | // gLine 57 | // .selectAll("line") 58 | // .data(array) 59 | // .enter() 60 | // .append("line") 61 | // .attr("class", "line--inactive") 62 | // .attr("transform", transform) 63 | // .attr("y2", -height); 64 | 65 | // p.append("button").text("▶ Play"); 66 | 67 | // // whenFullyVisible(p.node(), click); 68 | 69 | // function click() { 70 | // var actions = quicksort(array.slice()).reverse(); 71 | 72 | // var line = gLine 73 | // .selectAll("line") 74 | // .attr("transform", transform) 75 | // .attr("class", "line--inactive") 76 | // .interrupt(); 77 | 78 | // var transition = svg 79 | // .transition() 80 | // .duration(150) 81 | // .each("start", function start() { 82 | // var action = actions.pop(); 83 | // switch (action.type) { 84 | // case "swap": { 85 | // var i = action[0], 86 | // j = action[1], 87 | // li = line[0][i], 88 | // lj = line[0][j]; 89 | // line[0][i] = lj; 90 | // line[0][j] = li; 91 | // transition.each(function() { 92 | // line.transition().attr("transform", transform); 93 | // }); 94 | // break; 95 | // } 96 | // case "partition": { 97 | // line.attr("class", function(d, i) { 98 | // return i === action.pivot 99 | // ? "line--active" 100 | // : action.left <= i && i < action.right 101 | // ? "line--inactive" 102 | // : null; 103 | // }); 104 | // break; 105 | // } 106 | // } 107 | // if (actions.length) 108 | // transition = transition.transition().each("start", start); 109 | // else 110 | // transition.each("end", function() { 111 | // line.attr("class", "line--inactive"); 112 | // }); 113 | // }); 114 | // } 115 | 116 | // function transform(d, i) { 117 | // return "translate(" + x(i) + "," + height + ")rotate(" + a(d) + ")"; 118 | // } 119 | 120 | // function quicksort(array) { 121 | // var actions = []; 122 | 123 | // function partition(left, right, pivot) { 124 | // var v = array[pivot]; 125 | // swap(pivot, --right); 126 | // for (var i = left; i < right; ++i) if (array[i] < v) swap(i, left++); 127 | // swap(left, right); 128 | // return left; 129 | // } 130 | 131 | // function swap(i, j) { 132 | // if (i === j) return; 133 | // var t = array[i]; 134 | // array[i] = array[j]; 135 | // array[j] = t; 136 | // actions.push({ type: "swap", "0": i, "1": j }); 137 | // } 138 | 139 | // function recurse(left, right) { 140 | // if (left < right - 1) { 141 | // var pivot = (left + right) >> 1; 142 | // actions.push({ 143 | // type: "partition", 144 | // left: left, 145 | // pivot: pivot, 146 | // right: right 147 | // }); 148 | // pivot = partition(left, right, pivot); 149 | // recurse(left, pivot); 150 | // recurse(pivot + 1, right); 151 | // } 152 | // } 153 | 154 | // recurse(0, array.length); 155 | // return actions; 156 | // } 157 | // })(); 158 | -------------------------------------------------------------------------------- /src/data/generateGdp.js: -------------------------------------------------------------------------------- 1 | let states = []; 2 | let gdp = []; 3 | 4 | let allGdpData = []; 5 | 6 | 7 | let current = { 8 | "year": 1950, 9 | "states": [ 10 | { 11 | "state": "Alabama", 12 | "gdpPerCapita": 919 13 | }, 14 | { 15 | "state": "Alaska", 16 | "gdpPerCapita": 2899 17 | }, 18 | { 19 | "state": "Arizona", 20 | "gdpPerCapita": 1408 21 | }, 22 | { 23 | "state": "Arkansas", 24 | "gdpPerCapita": 849 25 | }, 26 | { 27 | "state": "California", 28 | "gdpPerCapita": 1947 29 | }, 30 | { 31 | "state": "Colorado", 32 | "gdpPerCapita": 1584 33 | }, 34 | { 35 | "state": "Connecticut", 36 | "gdpPerCapita": 1918 37 | }, 38 | { 39 | "state": "Delaware", 40 | "gdpPerCapita": 2082 41 | }, 42 | { 43 | "state": "Florida", 44 | "gdpPerCapita": 1351 45 | }, 46 | { 47 | "state": "Georgia", 48 | "gdpPerCapita": 1087 49 | }, 50 | { 51 | "state": "Hawaii", 52 | "gdpPerCapita": 1580 53 | }, 54 | { 55 | "state": "Idaho", 56 | "gdpPerCapita": 1352 57 | }, 58 | { 59 | "state": "Illinois", 60 | "gdpPerCapita": 1842 61 | }, 62 | { 63 | "state": "Indiana", 64 | "gdpPerCapita": 1525 65 | }, 66 | { 67 | "state": "Iowa", 68 | "gdpPerCapita": 1539 69 | }, 70 | { 71 | "state": "Kansas", 72 | "gdpPerCapita": 1481 73 | }, 74 | { 75 | "state": "Kentucky", 76 | "gdpPerCapita": 998 77 | }, 78 | { 79 | "state": "Louisiana", 80 | "gdpPerCapita": 1132 81 | }, 82 | { 83 | "state": "Maine", 84 | "gdpPerCapita": 1226 85 | }, 86 | { 87 | "state": "Maryland", 88 | "gdpPerCapita": 1702 89 | }, 90 | { 91 | "state": "Massachusetts", 92 | "gdpPerCapita": 1685 93 | }, 94 | { 95 | "state": "Michigan", 96 | "gdpPerCapita": 1717 97 | }, 98 | { 99 | "state": "Minnesota", 100 | "gdpPerCapita": 1447 101 | }, 102 | { 103 | "state": "Mississippi", 104 | "gdpPerCapita": 780 105 | }, 106 | { 107 | "state": "Missouri", 108 | "gdpPerCapita": 1438 109 | }, 110 | { 111 | "state": "Montana", 112 | "gdpPerCapita": 1678 113 | }, 114 | { 115 | "state": "Nebraska", 116 | "gdpPerCapita": 1583 117 | }, 118 | { 119 | "state": "Nevada", 120 | "gdpPerCapita": 2089 121 | }, 122 | { 123 | "state": "New Hampshire", 124 | "gdpPerCapita": 1373 125 | }, 126 | { 127 | "state": "New Jersey", 128 | "gdpPerCapita": 1820 129 | }, 130 | { 131 | "state": "New Mexico", 132 | "gdpPerCapita": 1260 133 | }, 134 | { 135 | "state": "New York", 136 | "gdpPerCapita": 1868 137 | }, 138 | { 139 | "state": "North Carolina", 140 | "gdpPerCapita": 1095 141 | }, 142 | { 143 | "state": "North Dakota", 144 | "gdpPerCapita": 1388 145 | }, 146 | { 147 | "state": "Ohio", 148 | "gdpPerCapita": 1611 149 | }, 150 | { 151 | "state": "Oklahoma", 152 | "gdpPerCapita": 1164 153 | }, 154 | { 155 | "state": "Oregon", 156 | "gdpPerCapita": 1695 157 | }, 158 | { 159 | "state": "Pennsylvania", 160 | "gdpPerCapita": 1552 161 | }, 162 | { 163 | "state": "Rhode Island", 164 | "gdpPerCapita": 1601 165 | }, 166 | { 167 | "state": "South Carolina", 168 | "gdpPerCapita": 943 169 | }, 170 | { 171 | "state": "South Dakota", 172 | "gdpPerCapita": 1298 173 | }, 174 | { 175 | "state": "Tennessee", 176 | "gdpPerCapita": 1040 177 | }, 178 | { 179 | "state": "Texas", 180 | "gdpPerCapita": 1392 181 | }, 182 | { 183 | "state": "Utah", 184 | "gdpPerCapita": 1391 185 | }, 186 | { 187 | "state": "Vermont", 188 | "gdpPerCapita": 1189 189 | }, 190 | { 191 | "state": "Virginia", 192 | "gdpPerCapita": 1327 193 | }, 194 | { 195 | "state": "Washington", 196 | "gdpPerCapita": 1797 197 | }, 198 | { 199 | "state": "West Virginia", 200 | "gdpPerCapita": 1051 201 | }, 202 | { 203 | "state": "Wisconsin", 204 | "gdpPerCapita": 1515 205 | }, 206 | { 207 | "state": "Wyoming", 208 | "gdpPerCapita": 179 209 | } -------------------------------------------------------------------------------- /src/test/test.js: -------------------------------------------------------------------------------- 1 | // // import '../data/ages.csv'; 2 | 3 | // let margin = { left: 100, right: 10 ,top: 10, bottom: 160}; 4 | // let width = 900 - margin.left - margin.right; 5 | // let height = 600 - margin.top - margin.bottom; 6 | 7 | // let svg = d3.select('#chart-area').append('svg') 8 | // .attr("width", width + margin.left + margin.right) 9 | // .attr("height", height + margin.top + margin.bottom); 10 | 11 | // let g = svg.append('g') 12 | // .attr("transform", `translate(${margin.left}, ${margin.top})`) 13 | 14 | // let colors = ['blue', 'green', 'redorange', 'pink', 'gray', 'orange', 'red']; 15 | 16 | // d3.json('../dist/data/buildings2.json').then(data => { 17 | // data.forEach(datum => { 18 | // datum.height = +datum.height 19 | // }) 20 | // console.log(data); 21 | 22 | // let x = d3.scaleBand() 23 | // .domain(data.map(d => { 24 | // return d.name; 25 | // })) 26 | // .range([0, width]) 27 | // .paddingInner(0.3) 28 | // .paddingOuter(0.3); 29 | 30 | // let y = d3.scaleLinear() 31 | // .domain([0, d3.max(data, function(d) { 32 | // return d.height; 33 | // })]) 34 | // .range([height, 0]); 35 | 36 | // let leftAxis = d3.axisLeft(y) 37 | // .ticks(5) 38 | // .tickFormat(function(d) { 39 | // return `${d}m`; 40 | // }); 41 | // g.append('g') 42 | // .attr('class', 'left-axis') 43 | // .call(leftAxis); 44 | 45 | 46 | // let bottomAxis = d3.axisBottom(x); 47 | // g.append('g') 48 | // .attr('class', 'bottom-axis') 49 | // .attr('transform', `translate(0, ${height})`) 50 | // .call(bottomAxis) 51 | // .selectAll("text") 52 | // .attr("y", 10) 53 | // .attr("x", -5) 54 | // .attr("text-anchor", 'end') 55 | // .attr('transform', 'rotate(-40)'); 56 | 57 | // g.append('text') 58 | // .attr('class', 'y-axis-label') 59 | // .attr('x', -(height / 2)) 60 | // .attr('y', -60) 61 | // .attr('font-size', '20px') 62 | // .attr('text-anchor', 'middle') 63 | // .attr('transform', 'rotate(-90)') 64 | // .text('Height (m)'); 65 | 66 | // g.append('text') 67 | // .attr('class', 'x-axis-label') 68 | // .attr('x', width / 2) 69 | // .attr('y', height + 150) 70 | // .attr('font-size', '20px') 71 | // .attr('text-anchor', 'middle') 72 | // .text("The world's tallest buildings"); 73 | 74 | // let rects = g.selectAll('rect') 75 | // .data(data) 76 | // .enter() 77 | // .append('rect') 78 | // .attr('y', function(d) { 79 | // return y(d.height); 80 | // }) 81 | // .attr("x", function(d) { 82 | // return x(d.name); 83 | // }) 84 | // .attr('width', x.bandwidth()) 85 | // .attr('height', function(d, i) { 86 | // return height - y(d.height); 87 | // }) 88 | // .attr('fill', function(d, i) { 89 | // let colorMaxIdx = colors.length - 1; 90 | 91 | // return colors[(i % colorMaxIdx)]; 92 | // }) 93 | 94 | // }).catch(err => console.log(err)); 95 | 96 | 97 | 98 | 99 | // // CIRCLES 100 | // // let circle = svg.append('circle') 101 | // // .attr("cx", 100) 102 | // // .attr("cy", 250) 103 | // // .attr("r", 70) 104 | // // .attr("fill", 'gray') 105 | 106 | // // d3.csv('../dist/data/ages.csv').then(function(data) { 107 | 108 | // // data.forEach(function(d) { 109 | // // d.age = +d.age; 110 | // // }) 111 | // // console.log(data); 112 | 113 | // // let circles = svg.selectAll('circle') 114 | // // .data(data); 115 | 116 | // // circles.enter() 117 | // // .append('circle') 118 | // // .attr('cx', function(d, i) { 119 | // // return i * 50 + 100; 120 | // // }) 121 | // // .attr('cy', function(d, i) { 122 | // // return i * 50 + 100; 123 | // // }) 124 | // // .attr("r", function(d, i) { 125 | // // // console.log(d.age); 126 | // // return d.age * 3; 127 | // // }) 128 | // // .attr('fill', function (d, i) { 129 | // // return colors[i]; 130 | // // }); 131 | 132 | // // }).catch(function(err) { 133 | // // console.log(err); 134 | // // }); 135 | 136 | 137 | 138 | // // CIRCLES 139 | // // let data = [25, 20, 10, 12, 15, 25, 20, 10, 12, 15, 25, 20, 10, 12, 15]; 140 | // // let colors = ['blue', 'green', 'redorange', 'pink', 'gray']; 141 | // // let svg = d3.select("#chart-area") 142 | // // .append('svg') 143 | // // .attr('width', 500) 144 | // // .attr('height', 500); 145 | 146 | // // let circles = svg.selectAll('circle') 147 | // // .data(data); 148 | 149 | // // circles.enter() 150 | // // .append('circle') 151 | // // .attr('cx', function(d, i) { 152 | // // return d * 10; 153 | // // }) 154 | // // .attr('cy', function(d, i) { 155 | // // return d * 10; 156 | // // }) 157 | // // .attr("r", function(d, i) { 158 | // // return d * 3; 159 | // // }) 160 | // // .attr('stroke', function(d, i) { 161 | // // return colors[i] 162 | // // }) -------------------------------------------------------------------------------- /src/graph/bubble_chart.js: -------------------------------------------------------------------------------- 1 | module.exports.generateBubbleChart = function() { 2 | var margin = { left: 80, right: 150, top: 50, bottom: 100 }; 3 | var height = 500 - margin.top - margin.bottom, 4 | width = 900 - margin.left - margin.right; 5 | 6 | var g = d3 7 | .select("#chart-area") 8 | .append("svg") 9 | .attr("width", width + margin.left + margin.right) 10 | .attr("height", height + margin.top + margin.bottom) 11 | .append("g") 12 | .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 13 | 14 | var time = 0; 15 | 16 | // Scales 17 | var x = d3 18 | .scaleLinear() 19 | .range([0, width]) 20 | .domain([1, 5000]); 21 | // var y = d3 22 | // .scaleLog() 23 | // .base(10) 24 | // .range([height, 0]) 25 | // // .domain([0, 100]); 26 | var y = d3 27 | .scaleLinear() 28 | .range([height, 0]) 29 | .domain([0, 100]); 30 | var area = d3 31 | .scaleLinear() 32 | .range([0, 100]) 33 | .domain([0, 80]); 34 | var sortColor = d3.scaleOrdinal(d3.schemePastel2); 35 | 36 | // Labels 37 | var xLabel = g 38 | .append("text") 39 | .attr("y", height + 50) 40 | .attr("x", width / 2) 41 | .attr("font-size", "20px") 42 | .attr("text-anchor", "middle") 43 | .text("Input size"); 44 | var yLabel = g 45 | .append("text") 46 | .attr("transform", "rotate(-90)") 47 | .attr("y", -40) 48 | .attr("x", -170) 49 | .attr("font-size", "20px") 50 | .attr("text-anchor", "middle") 51 | .text("Computation (time in ms)"); 52 | var timeLabel = g 53 | .append("text") 54 | .attr("y", height - 10) 55 | .attr("x", width - 40) 56 | .attr("font-size", "40px") 57 | .attr("opacity", "0.4") 58 | .attr("text-anchor", "middle") 59 | .text("0"); 60 | 61 | // X Axis 62 | var xAxisCall = d3 63 | .axisBottom(x) 64 | .tickValues([0, 1000, 2000, 3000, 4000, 5000]); 65 | g.append("g") 66 | .attr("class", "x axis") 67 | .attr("transform", "translate(0," + height + ")") 68 | .call(xAxisCall); 69 | 70 | // Y Axis 71 | var yAxisCall = d3.axisLeft(y).tickFormat(function(d) { 72 | return +d; 73 | }); 74 | g.append("g") 75 | .attr("class", "y axis") 76 | .call(yAxisCall); 77 | 78 | let sortNames = [ 79 | "bubble sort", 80 | "selection sort", 81 | "insertion sort", 82 | "radix sort", 83 | "heap sort", 84 | "quick sort", 85 | "merge sort", 86 | "shell sort" 87 | ]; 88 | 89 | let legend = g 90 | .append("g") 91 | .attr("transform", `translate(${width + 125}, ${height - 225})`); 92 | 93 | sortNames.forEach(function(sort, i) { 94 | let legendRow = legend 95 | .append("g") 96 | .attr("transform", `translate(0, ${i * 20})`); 97 | 98 | legendRow 99 | .append("rect") 100 | .attr("width", 10) 101 | .attr("height", 10) 102 | .attr("fill", sortColor(sort)); 103 | legendRow 104 | .append("text") 105 | .attr("x", -10) 106 | .attr("y", 10) 107 | .attr("text-anchor", "end") 108 | .style("text-transform", "capitalize") 109 | .text(sort); 110 | }); 111 | 112 | d3.json("data/allSortData.json").then(function(data) { 113 | console.log(data); 114 | 115 | // let formattedData = data.map(function(inputSize) { 116 | // debugger 117 | // console.log(inputSize.sorts); 118 | // return inputSize.sorts; 119 | // }) 120 | // Run the code every 0.1 second 121 | let interval = d3.interval(function() { 122 | // At the end of our data, loop back 123 | time = time < 5000 ? time + 10 : 0; 124 | if (time === 5000) { 125 | interval.stop(); 126 | } 127 | update(data[time/10]); 128 | }, 25); 129 | 130 | // First run of the visualization 131 | update(data[0]); 132 | }); 133 | 134 | function update(data) { 135 | // debugger 136 | 137 | // y.domain(data.currentMaxTime); 138 | // debugger; 139 | // sortColor.domain([0, data.length + 1]); 140 | 141 | let formattedData = data["sorts"]; 142 | // Standard transition time for the visualization 143 | var t = d3.transition().duration(25); 144 | 145 | // JOIN new data with old elements. 146 | // debugger 147 | var circles = g.selectAll("circle").data(formattedData, function(d) { 148 | return d["sort"]; 149 | }); 150 | 151 | 152 | // debugger; 153 | // EXIT old elements not present in new data. 154 | circles 155 | .exit() 156 | .attr("class", "exit") 157 | .remove(); 158 | 159 | // ENTER new elements present in new data. 160 | circles 161 | .enter() 162 | .append("circle") 163 | .attr("class", "enter") 164 | .attr("fill", function(d) { 165 | return sortColor(d.sort); 166 | }) 167 | .merge(circles) 168 | .transition(t) 169 | .attr("cy", function(d) { 170 | return y(d["time"]); 171 | }) 172 | .attr("cx", function(d) { 173 | // debugger 174 | return x(d["inputSize"]); 175 | }) 176 | .attr("r", function(d) { 177 | // debugger; 178 | return 10; 179 | // return Math.sqrt(area(d.time * 100) / Math.PI); 180 | }); 181 | // debugger; 182 | // Update the time label 183 | timeLabel.text(+(time) + 10); 184 | } 185 | }; 186 | -------------------------------------------------------------------------------- /src/algorithms/all_sorts.js: -------------------------------------------------------------------------------- 1 | const sorter = require("sort-algorithms-js"); 2 | const jssort = require("js-sorting-algorithms"); 3 | // import { setupRandomInput } from '../algorithms/setup_input'; 4 | const { PerformanceObserver, performance } = require("perf_hooks"); 5 | let fs = require('fs'); 6 | 7 | const setupRandomInput = function(inputSize) { 8 | let arr = []; 9 | for (let i = 1; i <= inputSize; i++) { 10 | arr.push(i); 11 | } 12 | 13 | // shuffle setup 14 | function shuffle(arr) { 15 | let len = arr.length - 1; 16 | let temp; 17 | let idx; 18 | 19 | while (len > 0) { 20 | idx = Math.floor(Math.random() * len); 21 | temp = arr[len]; 22 | arr[len] = arr[idx]; 23 | arr[idx] = temp; 24 | len -= 1; 25 | } 26 | 27 | return arr; 28 | } 29 | 30 | return shuffle(arr); 31 | }; 32 | 33 | // module.exports.runAllSorts = function(input) { 34 | // let allSorts = { 35 | // inputSize: [], 36 | // maxTime: [], 37 | // bubbleSort: [], 38 | // selectionSort: [], 39 | // insertionSort: [], 40 | // radixSort: [], 41 | // heapSort: [], 42 | // quickSort: [], 43 | // mergeSort: [], 44 | // shellSort: [] 45 | // }; 46 | 47 | let allData = []; 48 | 49 | 50 | 51 | function createResultsObjects() { 52 | let inputSizes = []; 53 | 54 | for (let i = 0; i <= 5000; i += 100) { 55 | inputSizes.push(i); 56 | } 57 | 58 | 59 | 60 | for (let i = 0; i < inputSizes.length; i++) { 61 | allData.push(runAllSorts(inputSizes[i])); 62 | } 63 | 64 | return allData; 65 | } 66 | 67 | // console.log(createResultsObjects()); 68 | let res = createResultsObjects(); 69 | fs.writeFile("allSortData.json", JSON.stringify(res), function(err) { 70 | if (err) { 71 | console.log(err); 72 | } 73 | }); 74 | 75 | function runAllSorts(inputSize) { 76 | let currentData = { 77 | "sorts": [], 78 | "inputSize": inputSize 79 | }; 80 | 81 | let randommizedInput = setupRandomInput(inputSize); 82 | 83 | // bubble sort 84 | let t0Bubble = performance.now(); 85 | sorter.bubbleSort( 86 | randommizedInput 87 | ); 88 | let t1Bubble = performance.now(); 89 | let timeBubble = 90 | t1Bubble - 91 | t0Bubble; 92 | 93 | // console.log( 94 | // `bubbleSort took: ${timeBubble} milliseconds` 95 | // ); 96 | 97 | // selection sort 98 | let t0Selection = performance.now(); 99 | sorter.selectionSort( 100 | randommizedInput 101 | ); 102 | let t1Selection = performance.now(); 103 | let timeSelection = 104 | t1Selection - 105 | t0Selection; 106 | 107 | // console.log( 108 | // `selectionSort took: ${timeSelection} milliseconds` 109 | // ); 110 | 111 | // insertion sort 112 | let t0Insertion = performance.now(); 113 | sorter.insertionSort( 114 | randommizedInput 115 | ); 116 | let t1Insertion = performance.now(); 117 | let timeInsertion = 118 | t1Insertion - 119 | t0Insertion; 120 | 121 | // console.log( 122 | // `insertionSort took: ${timeInsertion} milliseconds` 123 | // ); 124 | 125 | // radix sort 126 | let t0Radix = performance.now(); 127 | sorter.radixSort( 128 | randommizedInput 129 | ); 130 | let t1Radix = performance.now(); 131 | let timeRadix = 132 | t1Radix - 133 | t0Radix; 134 | 135 | // console.log( 136 | // `radixSort took: ${timeRadix} milliseconds` 137 | // ); 138 | 139 | // // heap sort 140 | let t0Heap = performance.now(); 141 | jssort.heapSort( 142 | randommizedInput 143 | ); 144 | let t1Heap = performance.now(); 145 | let timeHeap = 146 | t1Heap - 147 | t0Heap; 148 | 149 | // console.log( 150 | // `heapSort took: ${timeHeap} milliseconds` 151 | // ); 152 | 153 | // quick sort 154 | let t0Quick = performance.now(); 155 | sorter.quickSort( 156 | randommizedInput 157 | ); 158 | let t1Quick = performance.now(); 159 | let timeQuick = 160 | t1Quick - 161 | t0Quick; 162 | 163 | // console.log( 164 | // `quickSort took: ${timeQuick} milliseconds` 165 | // ); 166 | 167 | // merge sort 168 | let t0Merge = performance.now(); 169 | sorter.mergeSort( 170 | randommizedInput 171 | ); 172 | let t1Merge = performance.now(); 173 | let timeMerge = 174 | t1Merge - 175 | t0Merge; 176 | 177 | // console.log( 178 | // `mergeSort took: ${timeMerge} milliseconds` 179 | // ); 180 | 181 | // shell sort 182 | let t0Shell = performance.now(); 183 | jssort.shellSort( 184 | randommizedInput 185 | ); 186 | let t1Shell = performance.now(); 187 | let timeShell = 188 | t1Shell - 189 | t0Shell; 190 | 191 | // console.log( 192 | // `shellSort took: ${timeShell} milliseconds` 193 | // ); 194 | 195 | 196 | // Format data shape 197 | 198 | let sortNames = [ 199 | 'bubble sort', 200 | 'selection sort', 201 | 'insertion sort', 202 | 'radix sort', 203 | 'heap sort', 204 | 'quick sort', 205 | 'merge sort', 206 | 'shell sort' 207 | ]; 208 | let allTimes = [ 209 | timeBubble, 210 | timeSelection, 211 | timeInsertion, 212 | timeRadix, 213 | timeHeap, 214 | timeQuick, 215 | timeMerge, 216 | timeShell 217 | ]; 218 | 219 | sortNames.forEach((name, idx) => { 220 | currentData["sorts"].push( 221 | { 222 | "sort": sortNames[idx], 223 | "time": allTimes[idx], 224 | "inputSize": inputSize 225 | } 226 | ); 227 | }); 228 | 229 | let currentMaxTime = Math.max(...allTimes); 230 | 231 | currentData["currentMaxTime"] = currentMaxTime; 232 | 233 | 234 | return currentData; 235 | } 236 | 237 | // runAllSort(6000); 238 | 239 | -------------------------------------------------------------------------------- /src/algorithms/big_o_chart.js: -------------------------------------------------------------------------------- 1 | // import { runAllSorts } from "./all_sorts"; 2 | // import { setupRandomInput } from "./setup_input"; 3 | 4 | // let inputs = setupRandomInput(6000); 5 | // let data = runAllSorts(inputs); 6 | // console.log(data); 7 | 8 | function generateChart() { 9 | // let inputs = setupRandomInput(6000); 10 | // let data = runAllSorts(inputs); 11 | // console.log(data); 12 | 13 | //////////////////////// 14 | // d3.js 15 | //////////////////////// 16 | 17 | var margin = { left: 80, right: 20, top: 50, bottom: 100 }; 18 | 19 | var width = 600 - margin.left - margin.right, 20 | height = 400 - margin.top - margin.bottom; 21 | 22 | var flag = true; 23 | 24 | // var g = d3 25 | // .select("#chart-area") 26 | // .append("svg") 27 | // .attr("width", width + margin.left + margin.right) 28 | // .attr("height", height + margin.top + margin.bottom) 29 | // .append("g") 30 | // .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 31 | 32 | // var xAxisGroup = g 33 | // .append("g") 34 | // .attr("class", "x axis") 35 | // .attr("transform", "translate(0," + height + ")"); 36 | 37 | // var yAxisGroup = g.append("g").attr("class", "y axis"); 38 | 39 | // // X Scale 40 | // var x = d3.scaleLinear().range([0, width]); 41 | 42 | // // Y Scale 43 | // var y = d3.scaleLinear().range([height, 0]); 44 | 45 | // var g = d3 46 | // .select("#chart-area") 47 | // .append("svg") 48 | // .attr("width", width + margin.left + margin.right) 49 | // .attr("height", height + margin.top + margin.bottom) 50 | // .append("g") 51 | // .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 52 | 53 | // // X Label 54 | // g.append("text") 55 | // .attr("y", height + 50) 56 | // .attr("x", width / 2) 57 | // .attr("font-size", "20px") 58 | // .attr("text-anchor", "middle") 59 | // .text("Input size"); 60 | 61 | // // Y Label 62 | // var yLabel = g 63 | // .append("text") 64 | // .attr("y", -60) 65 | // .attr("x", -(height / 2)) 66 | // .attr("font-size", "20px") 67 | // .attr("text-anchor", "middle") 68 | // .attr("transform", "rotate(-90)") 69 | // .text("Time (milliseconds)"); 70 | 71 | d3.json("data/sortData.json").then(function(data) { 72 | let bubbleData = data["bubbleSort"]; 73 | console.log(bubbleData); 74 | // debugger 75 | let count = 0; 76 | let interval = d3.interval(function() { 77 | update(bubbleData); 78 | flag = !flag; 79 | count += 1; 80 | if (count === bubbleData.length) { 81 | interval.stop(); 82 | return; 83 | } 84 | }, 500); 85 | 86 | 87 | // Run the vis for the first time 88 | update(bubbleData); 89 | }); 90 | 91 | function update(data) { 92 | // // var value = flag ? "revenue" : "profit"; 93 | 94 | // x.domain([0, d3.max(data, d => d[0])]); 95 | // y.domain([0, d3.max(data, d => d[1])]); 96 | 97 | // // X Axis 98 | // var xAxisCall = d3.axisBottom(x); 99 | // xAxisGroup.call(xAxisCall); 100 | 101 | // // Y Axis 102 | // var yAxisCall = d3.axisLeft(y).tickFormat(function(d) { 103 | // return d; 104 | // }); 105 | // yAxisGroup.call(yAxisCall); 106 | 107 | // let lineGenerator = d3.line(); 108 | // let pathString = lineGenerator(data); 109 | 110 | // g.append('path') 111 | // .attr('d', pathString); 112 | 113 | // // g.append("svg:path").attr('d', line(data)); 114 | // // let pathString = lineGenerator(data); 115 | 116 | // // d3.select("path") 117 | // // .attr("d", lineGenerator) 118 | // // .attr("class", "line__bubble"); 119 | 120 | // // 2. Use the margin convention practice 121 | // var margin = { top: 50, right: 50, bottom: 50, left: 50 }, 122 | // width = window.innerWidth - margin.left - margin.right, // Use the window's width 123 | // height = window.innerHeight - margin.top - margin.bottom; // Use the window's height 124 | 125 | // The number of datapoints 126 | var n = data.length; 127 | console.log(data); 128 | 129 | // 5. X scale will use the index of our data 130 | var xScale = d3 131 | .scaleLinear() 132 | .domain([0, d3.max(data, d => d[0])]) // input 133 | .range([0, width]); // output 134 | 135 | // 6. Y scale will use the randomly generate number 136 | var yScale = d3 137 | .scaleLinear() 138 | .domain([0, d3.max(data, d => d[1])]) // input 139 | .range([height, 0]); // output 140 | 141 | // 7. d3's line generator 142 | var line = d3 143 | .line() 144 | .x(function(d, i) { 145 | return xScale(d[0]); 146 | }) // set the x values for the line generator 147 | .y(function(d) { 148 | return yScale(d[1]); 149 | }) // set the y values for the line generator 150 | .curve(d3.curveMonotoneX); // apply smoothing to the line 151 | 152 | // 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number 153 | var dataset = data; 154 | 155 | // 1. Add the SVG to the page and employ #2 156 | var svg = d3 157 | .select("#chart-area") 158 | .append("svg") 159 | .attr("width", width + margin.left + margin.right) 160 | .attr("height", height + margin.top + margin.bottom) 161 | .append("g") 162 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 163 | 164 | // 3. Call the x axis in a group tag 165 | svg 166 | .append("g") 167 | .attr("class", "x axis") 168 | .attr("transform", "translate(0," + height + ")") 169 | .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom 170 | 171 | // 4. Call the y axis in a group tag 172 | svg 173 | .append("g") 174 | .attr("class", "y axis") 175 | .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft 176 | 177 | 178 | 179 | 180 | // var g = d3 181 | // .select("#chart-area") 182 | // .append("svg") 183 | // .attr("width", width + margin.left + margin.right) 184 | // .attr("height", height + margin.top + margin.bottom) 185 | // .append("g") 186 | // .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 187 | 188 | // X Label 189 | svg.append("text") 190 | .attr("y", height + 50) 191 | .attr("x", width / 2) 192 | .attr("font-size", "20px") 193 | .attr("text-anchor", "middle") 194 | .text("Input size"); 195 | 196 | // Y Label 197 | svg.append("text") 198 | .attr("y", -60) 199 | .attr("x", -(height / 2)) 200 | .attr("font-size", "20px") 201 | .attr("text-anchor", "middle") 202 | .attr("transform", "rotate(-90)") 203 | .text("Time (milliseconds)"); 204 | 205 | 206 | 207 | 208 | 209 | // 9. Append the path, bind the data, and call the line generator 210 | svg 211 | .append("path") 212 | .datum(data) // 10. Binds data to the line 213 | .attr("class", "line") // Assign a class for styling 214 | .attr("d", line); // 11. Calls the line generator 215 | 216 | // 12. Appends a circle for each datapoint 217 | svg 218 | .selectAll(".dot") 219 | .data(data) 220 | .enter() 221 | .append("circle") // Uses the enter().append() method 222 | .attr("class", "dot") // Assign a class for styling 223 | .attr("cx", function(d, i) { 224 | return xScale(d[0]); 225 | }) 226 | .attr("cy", function(d) { 227 | return yScale(d[1]); 228 | }) 229 | .attr("r", 2); 230 | } 231 | } 232 | 233 | module.exports = { 234 | generateChart: generateChart 235 | }; 236 | -------------------------------------------------------------------------------- /src/algorithms/bubble_sort.js: -------------------------------------------------------------------------------- 1 | const { setupRandomInput } = require('./setup_input'); 2 | 3 | // /////////////// 4 | // // bubble sort 5 | // /////////////// 6 | 7 | // array creation 8 | function runBubbleSort() { 9 | // let shuffledArr = [ 10 | // 9, 11 | // 8, 12 | // 12, 13 | // 16, 14 | // 14, 15 | // 13, 16 | // 11, 17 | // 10, 18 | // 20, 19 | // 19, 20 | // 15, 21 | // 7, 22 | // 1, 23 | // 6, 24 | // 17, 25 | // 5, 26 | // 2, 27 | // 4, 28 | // 18, 29 | // 3 30 | // ]; 31 | let shuffledArr = setupRandomInput(55); 32 | 33 | // this is our final input data 34 | let data = []; 35 | // this is our final input data 36 | 37 | // algorithm 38 | const bubbleSort = arr => { 39 | let sorted = false; 40 | 41 | while (!sorted) { 42 | sorted = true; 43 | 44 | for (let i = 0; i < arr.length - 1; i++) { 45 | if (arr[i] > arr[i + 1]) { 46 | sorted = false; 47 | [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]; 48 | let curState = [...arr]; 49 | data.push(curState); 50 | } 51 | } 52 | } 53 | 54 | data.push(arr); 55 | }; 56 | 57 | // invoke algorithm and create sorted states in a 2d array 58 | let t0 = performance.now(); 59 | bubbleSort(shuffledArr); 60 | let t1 = performance.now(); 61 | console.log(`bubbleSort took ${t1 - t0} milliseconds`); 62 | 63 | // data = [ 64 | // [4, 8, 7, 2, 3, 9, 10, 5, 1, 6], 65 | // [4, 7, 8, 2, 3, 9, 10, 5, 1, 6], 66 | // [4, 7, 2, 8, 3, 9, 10, 5, 1, 6], 67 | // [4, 7, 2, 3, 8, 9, 10, 5, 1, 6], 68 | // [4, 7, 2, 3, 8, 9, 10, 1, 5, 6], 69 | // [4, 2, 7, 3, 8, 9, 10, 1, 5, 6], 70 | // [4, 2, 3, 7, 8, 9, 10, 1, 5, 6], 71 | // [4, 2, 3, 7, 8, 9, 1, 10, 5, 6], 72 | // [4, 2, 3, 7, 8, 9, 1, 5, 10, 6], 73 | // [4, 2, 3, 7, 8, 9, 1, 5, 6, 10], 74 | // [2, 4, 3, 7, 8, 9, 1, 5, 6, 10], 75 | // [2, 3, 4, 7, 8, 9, 1, 5, 6, 10], 76 | // [2, 3, 4, 7, 8, 1, 9, 5, 6, 10], 77 | // [2, 3, 4, 7, 8, 1, 5, 9, 6, 10], 78 | // [2, 3, 4, 7, 8, 1, 5, 6, 9, 10], 79 | // [2, 3, 4, 7, 1, 8, 5, 6, 9, 10], 80 | // [2, 3, 4, 7, 1, 5, 8, 6, 9, 10], 81 | // [2, 3, 4, 7, 1, 5, 6, 8, 9, 10], 82 | // [2, 3, 4, 1, 7, 5, 6, 8, 9, 10], 83 | // [2, 3, 4, 1, 5, 7, 6, 8, 9, 10], 84 | // [2, 3, 4, 1, 5, 6, 7, 8, 9, 10], 85 | // [2, 3, 1, 4, 5, 6, 7, 8, 9, 10], 86 | // [2, 1, 3, 4, 5, 6, 7, 8, 9, 10], 87 | // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 88 | // ]; 89 | 90 | 91 | //////////////////////// 92 | // d3.js 93 | //////////////////////// 94 | 95 | // setup 96 | 97 | let margin = { left: 0, right: 0, top: 0, bottom: 100 }; 98 | let height = 500 - margin.top - margin.bottom; 99 | let width = 800 - margin.left - margin.right; 100 | 101 | let g = d3 102 | .select("#chart-area") 103 | .append("svg") 104 | .attr("width", width + margin.left + margin.right) 105 | .attr("height", height + margin.top + margin.bottom) 106 | .append("g") 107 | .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 108 | 109 | let time = 0; 110 | let iteration = 0; 111 | 112 | // Scales 113 | // let x = d3 114 | // .scaleBand() 115 | // .domain([0, data[0].length]) 116 | // .range([0, width]) 117 | // .padding(.1); 118 | let x = d3 119 | .scaleBand() 120 | // .domain([0, data[0].length]) 121 | .range([0, width]); 122 | 123 | let y = d3 124 | .scaleLinear() 125 | .domain([0, data[0].length]) 126 | .range([height, 0]); 127 | let area = d3 128 | .scaleLinear() 129 | .domain([0, data.length]) 130 | .range([0, 10]); 131 | // let color = d3 132 | // .scaleSequential(d3.interpolateViridis) 133 | // .domain([0, data[0].length]); 134 | let color = d3 135 | .scaleSequential(d3.interpolateCubehelixDefault) 136 | .domain([0, data[0].length+1]); 137 | // let color = d3.scaleOrdinal(d3.schemePastel1); 138 | // let color = d3.scaleOrdinal([ 139 | // "#8dd3c7", 140 | // "#ffffb3", 141 | // "#bebada", 142 | // "#fb8072", 143 | // "#80b1d3", 144 | // "#fdb462", 145 | // "#b3de69", 146 | // "#fccde5", 147 | // "#d9d9d9", 148 | // "#bc80bd", 149 | // "#ccebc5", 150 | // "#ffed6f" 151 | // ]); 152 | 153 | // // Labels 154 | // let xLabel = g 155 | // .append("text") 156 | // .attr("y", height + 50) 157 | // .attr("x", width / 2) 158 | // .attr("font-size", "20px") 159 | // .attr("text-anchor", "middle") 160 | // .text("order"); 161 | // let yLabel = g 162 | // .append("text") 163 | // .attr("transform", "rotate(-90)") 164 | // .attr("y", -40) 165 | // .attr("x", -170) 166 | // .attr("font-size", "20px") 167 | // .attr("text-anchor", "middle") 168 | // .text("value"); 169 | let timeLabel = g 170 | .append("text") 171 | .attr("y", height + 60) 172 | .attr("x", width - 80) 173 | .attr("font-size", "40px") 174 | .attr("opacity", "0.4") 175 | .attr("text-anchor", "middle") 176 | .text("0"); 177 | 178 | // // X Axis 179 | // let xAxisCall = d3 180 | // .axisBottom(x); 181 | // g.append("g") 182 | // .attr("class", "x axis") 183 | // .attr("transform", "translate(0," + height + ")") 184 | // .call(xAxisCall); 185 | 186 | // // Y Axis 187 | // let yAxisCall = d3.axisLeft(y).tickFormat(function(d) { 188 | // return +d; 189 | // }); 190 | // g.append("g") 191 | // .attr("class", "y axis") 192 | // .call(yAxisCall); 193 | 194 | // d3.data(data).then(function(data) { 195 | // Run the code every 0.1 second 196 | let interval = d3.interval(function() { 197 | // At the end of our data, loop back 198 | time = time < data.length ? time + 1 : 0; 199 | // iteration = iteration < data[0].length ? iteration + 1 : 0; 200 | // console.log(data); 201 | update(data[time]); 202 | if (time === data.length - 1) { 203 | interval.stop(); 204 | } 205 | }, 1); 206 | 207 | // First run of the visualization 208 | update(data[0]); 209 | // }); 210 | 211 | function update(curData) { 212 | console.log(curData); 213 | // Standard transition time for the visualization 214 | let t = d3.transition().duration(1); 215 | 216 | x.domain(curData); 217 | 218 | // JOIN new data with old elements. 219 | let rects = g.selectAll("rect").data(curData, function(d) { 220 | return d; 221 | }); 222 | 223 | // EXIT old elements not present in new data. 224 | rects 225 | .exit() 226 | .attr("class", "exit") 227 | .remove(); 228 | 229 | // ENTER new elements present in new data. 230 | // debugger 231 | rects 232 | .enter() 233 | .append("rect") 234 | .attr("class", "enter") 235 | .attr("fill", function(d) { 236 | return color(d); 237 | }) 238 | .attr("x", function(d, i) { 239 | return x(i); 240 | }) 241 | .attr("y", function(d, i) { 242 | // return 0; 243 | return y(d); 244 | }) 245 | .merge(rects) 246 | .transition(t) 247 | .attr("y", function(d, i) { 248 | // return 0; 249 | return y(d); 250 | }) 251 | .attr("x", function(d, i) { 252 | return x(i+1); 253 | }) 254 | .attr("width", function(d) { 255 | return x.bandwidth(); 256 | // return d; 257 | }) 258 | .attr("height", function(d) { 259 | // return height; 260 | return height - y(d); 261 | }); 262 | 263 | // Update the time label 264 | timeLabel.text(+time); 265 | } 266 | 267 | // console.log(data); 268 | 269 | } 270 | 271 | module.exports = { 272 | runBubbleSort: runBubbleSort 273 | }; 274 | -------------------------------------------------------------------------------- /src/data/sortData.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "inputSize": 10, 4 | "bubbleSort": 0.03408300161361694, 5 | "selectionSort": 0.046555012464523315, 6 | "insertionSort": 0.041141003370285034, 7 | "radixSort": 0.3472449779510498, 8 | "heapSort": 0.16334298253059387, 9 | "quickSort": 0.09092599153518677, 10 | "mergeSort": 0.14705199003219604, 11 | "shellSort": 0.08006599545478821 12 | }, 13 | { 14 | "inputSize": 50, 15 | "bubbleSort": 0.053216010332107544, 16 | "selectionSort": 0.045010000467300415, 17 | "insertionSort": 0.06822800636291504, 18 | "radixSort": 0.1822659969329834, 19 | "heapSort": 0.08837997913360596, 20 | "quickSort": 0.04547199606895447, 21 | "mergeSort": 0.03893601894378662, 22 | "shellSort": 0.09587901830673218 23 | }, 24 | { 25 | "inputSize": 100, 26 | "bubbleSort": 0.09234299659729004, 27 | "selectionSort": 0.16228002309799194, 28 | "insertionSort": 0.2758540213108063, 29 | "radixSort": 0.11173999309539795, 30 | "heapSort": 0.20328998565673828, 31 | "quickSort": 0.15389800071716309, 32 | "mergeSort": 0.07828900218009949, 33 | "shellSort": 0.25446900725364685 34 | }, 35 | { 36 | "inputSize": 150, 37 | "bubbleSort": 0.0599869966506958, 38 | "selectionSort": 1.3759739995002747, 39 | "insertionSort": 1.065157026052475, 40 | "radixSort": 0.16816702485084534, 41 | "heapSort": 0.3404489755630493, 42 | "quickSort": 0.5877810120582581, 43 | "mergeSort": 0.8005750179290771, 44 | "shellSort": 1.3619730174541473 45 | }, 46 | { 47 | "inputSize": 200, 48 | "bubbleSort": 0.0167200148105621, 49 | "selectionSort": 1.1979529857635498, 50 | "insertionSort": 1.2936089932918549, 51 | "radixSort": 0.21979200839996338, 52 | "heapSort": 0.7273960113525391, 53 | "quickSort": 0.05598801374435425, 54 | "mergeSort": 0.16979199647903442, 55 | "shellSort": 1.630845993757248 56 | }, 57 | { 58 | "inputSize": 250, 59 | "bubbleSort": 0.05385202169418335, 60 | "selectionSort": 0.03848502039909363, 61 | "insertionSort": 0.047867000102996826, 62 | "radixSort": 0.24958398938179016, 63 | "heapSort": 0.0911099910736084, 64 | "quickSort": 0.07751798629760742, 65 | "mergeSort": 0.21629399061203003, 66 | "shellSort": 0.15932700037956238 67 | }, 68 | { 69 | "inputSize": 300, 70 | "bubbleSort": 0.07231998443603516, 71 | "selectionSort": 0.051942020654678345, 72 | "insertionSort": 0.06787899136543274, 73 | "radixSort": 0.2831540107727051, 74 | "heapSort": 0.1100969910621643, 75 | "quickSort": 0.10583499073982239, 76 | "mergeSort": 0.5351560115814209, 77 | "shellSort": 0.20112201571464539 78 | }, 79 | { 80 | "inputSize": 350, 81 | "bubbleSort": 0.0983400046825409, 82 | "selectionSort": 0.11615899205207825, 83 | "insertionSort": 0.09047698974609375, 84 | "radixSort": 0.41366100311279297, 85 | "heapSort": 0.1337990164756775, 86 | "quickSort": 0.15208700299263, 87 | "mergeSort": 0.16593199968338013, 88 | "shellSort": 0.24320900440216064 89 | }, 90 | { 91 | "inputSize": 400, 92 | "bubbleSort": 0.12810200452804565, 93 | "selectionSort": 0.09105297923088074, 94 | "insertionSort": 0.11621701717376709, 95 | "radixSort": 0.3634060025215149, 96 | "heapSort": 0.199631005525589, 97 | "quickSort": 0.1885789930820465, 98 | "mergeSort": 0.17127001285552979, 99 | "shellSort": 0.5512279868125916 100 | }, 101 | { 102 | "inputSize": 500, 103 | "bubbleSort": 0.19063401222229004, 104 | "selectionSort": 0.1334879994392395, 105 | "insertionSort": 0.18260100483894348, 106 | "radixSort": 0.4325060248374939, 107 | "heapSort": 0.1852799952030182, 108 | "quickSort": 0.28689900040626526, 109 | "mergeSort": 0.23118898272514343, 110 | "shellSort": 0.7990669906139374 111 | }, 112 | { 113 | "inputSize": 600, 114 | "bubbleSort": 0.2689169943332672, 115 | "selectionSort": 0.18858501315116882, 116 | "insertionSort": 0.2670939862728119, 117 | "radixSort": 0.6128909885883331, 118 | "heapSort": 0.17957401275634766, 119 | "quickSort": 0.3862850069999695, 120 | "mergeSort": 0.7729069888591766, 121 | "shellSort": 1.0169329941272736 122 | }, 123 | { 124 | "inputSize": 700, 125 | "bubbleSort": 0.31888699531555176, 126 | "selectionSort": 0.30835700035095215, 127 | "insertionSort": 0.3392060101032257, 128 | "radixSort": 0.3110789954662323, 129 | "heapSort": 0.29426997900009155, 130 | "quickSort": 0.5276269912719727, 131 | "mergeSort": 0.5001050233840942, 132 | "shellSort": 1.3138720095157623 133 | }, 134 | { 135 | "inputSize": 800, 136 | "bubbleSort": 0.5053710043430328, 137 | "selectionSort": 0.3297310173511505, 138 | "insertionSort": 0.45275598764419556, 139 | "radixSort": 0.3650059998035431, 140 | "heapSort": 0.8676559925079346, 141 | "quickSort": 0.726142019033432, 142 | "mergeSort": 0.10112699866294861, 143 | "shellSort": 1.5645299851894379 144 | }, 145 | { 146 | "inputSize": 900, 147 | "bubbleSort": 0.6017040014266968, 148 | "selectionSort": 0.3983129858970642, 149 | "insertionSort": 0.5754550099372864, 150 | "radixSort": 0.5255970060825348, 151 | "heapSort": 0.13838499784469604, 152 | "quickSort": 0.8571679890155792, 153 | "mergeSort": 0.22040200233459473, 154 | "shellSort": 1.8025540113449097 155 | }, 156 | { 157 | "inputSize": 1000, 158 | "bubbleSort": 0.7133089900016785, 159 | "selectionSort": 0.5248909890651703, 160 | "insertionSort": 0.7052449882030487, 161 | "radixSort": 0.945559024810791, 162 | "heapSort": 0.1561729907989502, 163 | "quickSort": 1.0760760009288788, 164 | "mergeSort": 0.07594099640846252, 165 | "shellSort": 2.0732289850711823 166 | }, 167 | { 168 | "inputSize": 1250, 169 | "bubbleSort": 1.069720983505249, 170 | "selectionSort": 0.7429490089416504, 171 | "insertionSort": 1.077012985944748, 172 | "radixSort": 0.8155780136585236, 173 | "heapSort": 0.22048398852348328, 174 | "quickSort": 1.637605994939804, 175 | "mergeSort": 0.10482698678970337, 176 | "shellSort": 5.0700730085372925 177 | }, 178 | { 179 | "inputSize": 1500, 180 | "bubbleSort": 1.3896659910678864, 181 | "selectionSort": 0.9465709924697876, 182 | "insertionSort": 1.4112149775028229, 183 | "radixSort": 0.5756310224533081, 184 | "heapSort": 0.22650301456451416, 185 | "quickSort": 2.108817994594574, 186 | "mergeSort": 0.20161402225494385, 187 | "shellSort": 6.4454329907894135 188 | }, 189 | { 190 | "inputSize": 1750, 191 | "bubbleSort": 2.066987007856369, 192 | "selectionSort": 1.2691549956798553, 193 | "insertionSort": 1.9148969948291779, 194 | "radixSort": 0.7288230061531067, 195 | "heapSort": 0.26698899269104004, 196 | "quickSort": 2.860689014196396, 197 | "mergeSort": 0.1511169970035553, 198 | "shellSort": 8.347510993480682 199 | }, 200 | { 201 | "inputSize": 2000, 202 | "bubbleSort": 2.5227670073509216, 203 | "selectionSort": 1.6491339802742004, 204 | "insertionSort": 2.707157999277115, 205 | "radixSort": 0.8247269988059998, 206 | "heapSort": 0.3109399974346161, 207 | "quickSort": 3.705401986837387, 208 | "mergeSort": 0.1432570219039917, 209 | "shellSort": 9.843248009681702 210 | }, 211 | { 212 | "inputSize": 2250, 213 | "bubbleSort": 3.0568279922008514, 214 | "selectionSort": 2.0631259977817535, 215 | "insertionSort": 3.107805013656616, 216 | "radixSort": 0.8804120123386383, 217 | "heapSort": 0.3645150065422058, 218 | "quickSort": 4.651758998632431, 219 | "mergeSort": 0.1627499759197235, 220 | "shellSort": 11.539276987314224 221 | }, 222 | { 223 | "inputSize": 2500, 224 | "bubbleSort": 3.7859619855880737, 225 | "selectionSort": 2.5335310101509094, 226 | "insertionSort": 3.798684984445572, 227 | "radixSort": 0.8730030059814453, 228 | "heapSort": 0.3988270163536072, 229 | "quickSort": 5.801993012428284, 230 | "mergeSort": 0.18182098865509033, 231 | "shellSort": 13.197738021612167 232 | }, 233 | { 234 | "inputSize": 2750, 235 | "bubbleSort": 4.591495007276535, 236 | "selectionSort": 3.0612289905548096, 237 | "insertionSort": 4.635080009698868, 238 | "radixSort": 1.026163011789322, 239 | "heapSort": 0.4509359896183014, 240 | "quickSort": 6.938324004411697, 241 | "mergeSort": 0.2962130010128021, 242 | "shellSort": 14.902232021093369 243 | }, 244 | { 245 | "inputSize": 3000, 246 | "bubbleSort": 5.6250819861888885, 247 | "selectionSort": 3.7574790120124817, 248 | "insertionSort": 5.476842999458313, 249 | "radixSort": 1.1368599832057953, 250 | "heapSort": 0.49486401677131653, 251 | "quickSort": 8.292906016111374, 252 | "mergeSort": 0.2377380132675171, 253 | "shellSort": 16.743066996335983 254 | }, 255 | { 256 | "inputSize": 3250, 257 | "bubbleSort": 6.47960901260376, 258 | "selectionSort": 4.242965012788773, 259 | "insertionSort": 6.786526024341583, 260 | "radixSort": 1.2385019958019257, 261 | "heapSort": 0.539309024810791, 262 | "quickSort": 9.712673991918564, 263 | "mergeSort": 0.3360390067100525, 264 | "shellSort": 18.34664797782898 265 | }, 266 | { 267 | "inputSize": 3500, 268 | "bubbleSort": 7.779190003871918, 269 | "selectionSort": 4.934657007455826, 270 | "insertionSort": 7.737533986568451, 271 | "radixSort": 1.2178399860858917, 272 | "heapSort": 0.584773987531662, 273 | "quickSort": 11.185528010129929, 274 | "mergeSort": 0.3380109965801239, 275 | "shellSort": 37.77567398548126 276 | }, 277 | { 278 | "inputSize": 3750, 279 | "bubbleSort": 8.939678996801376, 280 | "selectionSort": 5.739237010478973, 281 | "insertionSort": 9.164033979177475, 282 | "radixSort": 1.3839530050754547, 283 | "heapSort": 0.6323659718036652, 284 | "quickSort": 12.898299008607864, 285 | "mergeSort": 0.3962569832801819, 286 | "shellSort": 43.04168900847435 287 | }, 288 | { 289 | "inputSize": 4000, 290 | "bubbleSort": 10.218459993600845, 291 | "selectionSort": 6.44172802567482, 292 | "insertionSort": 10.219899982213974, 293 | "radixSort": 1.3830389976501465, 294 | "heapSort": 0.6789880096912384, 295 | "quickSort": 14.708895981311798, 296 | "mergeSort": 0.3767240047454834, 297 | "shellSort": 47.91363400220871 298 | }, 299 | { 300 | "inputSize": 4250, 301 | "bubbleSort": 11.876161992549896, 302 | "selectionSort": 7.193464010953903, 303 | "insertionSort": 10.954557001590729, 304 | "radixSort": 1.550102025270462, 305 | "heapSort": 0.7423069775104523, 306 | "quickSort": 16.57462301850319, 307 | "mergeSort": 0.5632649958133698, 308 | "shellSort": 53.19608300924301 309 | }, 310 | { 311 | "inputSize": 4500, 312 | "bubbleSort": 13.483884006738663, 313 | "selectionSort": 8.125009983778, 314 | "insertionSort": 12.497310012578964, 315 | "radixSort": 1.8255019783973694, 316 | "heapSort": 0.7865719795227051, 317 | "quickSort": 18.783951997756958, 318 | "mergeSort": 1.1611349880695343, 319 | "shellSort": 58.22043001651764 320 | }, 321 | { 322 | "inputSize": 4750, 323 | "bubbleSort": 15.315670996904373, 324 | "selectionSort": 9.210393011569977, 325 | "insertionSort": 13.889329016208649, 326 | "radixSort": 1.7681510150432587, 327 | "heapSort": 0.8421500027179718, 328 | "quickSort": 21.493404000997543, 329 | "mergeSort": 1.2931620180606842, 330 | "shellSort": 66.79984298348427 331 | }, 332 | { 333 | "inputSize": 5000, 334 | "bubbleSort": 17.145826011896133, 335 | "selectionSort": 10.407766997814178, 336 | "insertionSort": 15.271871000528336, 337 | "radixSort": 1.8179340064525604, 338 | "heapSort": 0.9278430044651031, 339 | "quickSort": 26.647259026765823, 340 | "mergeSort": 0.6287899911403656, 341 | "shellSort": 78.3242290019989 342 | }, 343 | { 344 | "inputSize": 5250, 345 | "bubbleSort": 20.57056200504303, 346 | "selectionSort": 11.178968012332916, 347 | "insertionSort": 16.836408019065857, 348 | "radixSort": 1.8188529908657074, 349 | "heapSort": 0.9239449799060822, 350 | "quickSort": 25.15886300802231, 351 | "mergeSort": 0.5686140060424805, 352 | "shellSort": 73.15972200036049 353 | }, 354 | { 355 | "inputSize": 5500, 356 | "bubbleSort": 20.88630700111389, 357 | "selectionSort": 12.459059000015259, 358 | "insertionSort": 20.692070990800858, 359 | "radixSort": 2.326182007789612, 360 | "heapSort": 0.9486120045185089, 361 | "quickSort": 30.90429800748825, 362 | "mergeSort": 0.6968129873275757, 363 | "shellSort": 79.94338899850845 364 | }, 365 | { 366 | "inputSize": 5750, 367 | "bubbleSort": 23.437466979026794, 368 | "selectionSort": 13.120029002428055, 369 | "insertionSort": 20.174179017543793, 370 | "radixSort": 1.9921820163726807, 371 | "heapSort": 1.0244179964065552, 372 | "quickSort": 30.312805980443954, 373 | "mergeSort": 0.5407010018825531, 374 | "shellSort": 83.3344230055809 375 | }, 376 | { 377 | "inputSize": 6000, 378 | "bubbleSort": 25.741364985704422, 379 | "selectionSort": 14.31241300702095, 380 | "insertionSort": 21.875046014785767, 381 | "radixSort": 2.1214300096035004, 382 | "heapSort": 1.16116601228714, 383 | "quickSort": 33.22289299964905, 384 | "mergeSort": 0.5275930166244507, 385 | "shellSort": 89.15658602118492 386 | } 387 | ] 388 | -------------------------------------------------------------------------------- /dist/data/sortData.json: -------------------------------------------------------------------------------- 1 | { 2 | "inputSize": [ 3 | 10, 4 | 50, 5 | 100, 6 | 150, 7 | 200, 8 | 250, 9 | 300, 10 | 350, 11 | 400, 12 | 500, 13 | 600, 14 | 700, 15 | 800, 16 | 900, 17 | 1000, 18 | 1250, 19 | 1500, 20 | 1750, 21 | 2000, 22 | 2250, 23 | 2500, 24 | 2750, 25 | 3000, 26 | 3250, 27 | 3500, 28 | 3750, 29 | 4000, 30 | 4250, 31 | 4500, 32 | 4750, 33 | 5000, 34 | 5250, 35 | 5500, 36 | 5750, 37 | 6000 38 | ], 39 | "maxTime": [ 40 | 0.3388639986515045, 41 | 0.095645010471344, 42 | 0.2615779936313629, 43 | 1.2753599882125854, 44 | 1.3855570256710052, 45 | 0.20840999484062195, 46 | 0.45566999912261963, 47 | 0.280098021030426, 48 | 0.48018699884414673, 49 | 0.6993429958820343, 50 | 0.9418010115623474, 51 | 1.1702130138874054, 52 | 1.4809470176696777, 53 | 1.6194159984588623, 54 | 1.8651989996433258, 55 | 4.753466993570328, 56 | 6.4552329778671265, 57 | 8.138727992773056, 58 | 9.836380004882812, 59 | 11.324403017759323, 60 | 12.973637998104095, 61 | 14.52563300728798, 62 | 16.589136004447937, 63 | 18.310252994298935, 64 | 36.99218699336052, 65 | 42.351171016693115, 66 | 47.041734993457794, 67 | 52.02256199717522, 68 | 57.44292399287224, 69 | 62.236698001623154, 70 | 66.89537599682808, 71 | 72.92098501324654, 72 | 78.25195300579071, 73 | 84.28107997775078, 74 | 88.62779900431633 75 | ], 76 | "bubbleSort": [ 77 | [10, 0.10837501287460327], 78 | [50, 0.05119800567626953], 79 | [100, 0.19018098711967468], 80 | [150, 0.1771399974822998], 81 | [200, 0.1440710127353668], 82 | [250, 0.04760599136352539], 83 | [300, 0.0661429762840271], 84 | [350, 0.0841900110244751], 85 | [400, 0.11311101913452148], 86 | [500, 0.17048898339271545], 87 | [600, 0.23596999049186707], 88 | [700, 0.3201900124549866], 89 | [800, 0.43615397810935974], 90 | [900, 0.5261759757995605], 91 | [1000, 0.6377519965171814], 92 | [1250, 1.0106300115585327], 93 | [1500, 1.3544670045375824], 94 | [1750, 1.8758260011672974], 95 | [2000, 2.4836699962615967], 96 | [2250, 3.0667259991168976], 97 | [2500, 3.8543460071086884], 98 | [2750, 4.627283990383148], 99 | [3000, 5.529830992221832], 100 | [3250, 6.517351984977722], 101 | [3500, 7.67671400308609], 102 | [3750, 8.71374499797821], 103 | [4000, 10.086914986371994], 104 | [4250, 11.64139899611473], 105 | [4500, 13.69435802102089], 106 | [4750, 14.841834008693695], 107 | [5000, 16.715560019016266], 108 | [5250, 18.508691996335983], 109 | [5500, 20.50517100095749], 110 | [5750, 22.95057499408722], 111 | [6000, 26.63873401284218] 112 | ], 113 | "selectionSort": [ 114 | 10, 115 | 0.046512991189956665, 116 | 50, 117 | 0.045065999031066895, 118 | 100, 119 | 0.16267597675323486, 120 | 150, 121 | 1.2753599882125854, 122 | 200, 123 | 1.0314069986343384, 124 | 250, 125 | 0.03354501724243164, 126 | 300, 127 | 0.0455780029296875, 128 | 350, 129 | 0.05938798189163208, 130 | 400, 131 | 0.08007597923278809, 132 | 500, 133 | 0.11703699827194214, 134 | 600, 135 | 0.16245701909065247, 136 | 700, 137 | 0.22464001178741455, 138 | 800, 139 | 0.28340399265289307, 140 | 900, 141 | 0.3575740158557892, 142 | 1000, 143 | 0.45594102144241333, 144 | 1250, 145 | 0.6618680059909821, 146 | 1500, 147 | 0.9411309957504272, 148 | 1750, 149 | 1.268664002418518, 150 | 2000, 151 | 1.6451629996299744, 152 | 2250, 153 | 2.070017993450165, 154 | 2500, 155 | 2.4725250005722046, 156 | 2750, 157 | 2.9807170033454895, 158 | 3000, 159 | 3.537240982055664, 160 | 3250, 161 | 4.246937990188599, 162 | 3500, 163 | 4.94556400179863, 164 | 3750, 165 | 5.472263008356094, 166 | 4000, 167 | 6.447797000408173, 168 | 4250, 169 | 7.080096006393433, 170 | 4500, 171 | 7.936254024505615, 172 | 4750, 173 | 8.973499983549118, 174 | 5000, 175 | 9.916045010089874, 176 | 5250, 177 | 10.648669987916946, 178 | 5500, 179 | 12.278986990451813, 180 | 5750, 181 | 12.881801009178162, 182 | 6000, 183 | 14.065596997737885 184 | ], 185 | "insertionSort": [ 186 | 10, 187 | 0.04152101278305054, 188 | 50, 189 | 0.06613299250602722, 190 | 100, 191 | 0.25915300846099854, 192 | 150, 193 | 1.0240910053253174, 194 | 200, 195 | 1.0520319938659668, 196 | 250, 197 | 0.042251020669937134, 198 | 300, 199 | 0.05898800492286682, 200 | 350, 201 | 0.07898500561714172, 202 | 400, 203 | 0.10561099648475647, 204 | 500, 205 | 0.15787097811698914, 206 | 600, 207 | 0.241907000541687, 208 | 700, 209 | 0.31456002593040466, 210 | 800, 211 | 0.4038819968700409, 212 | 900, 213 | 0.5118109881877899, 214 | 1000, 215 | 0.6311459839344025, 216 | 1250, 217 | 1.1285569965839386, 218 | 1500, 219 | 1.379632979631424, 220 | 1750, 221 | 2.0670460164546967, 222 | 2000, 223 | 2.6966899931430817, 224 | 2250, 225 | 3.148476004600525, 226 | 2500, 227 | 4.447587996721268, 228 | 2750, 229 | 4.664133995771408, 230 | 3000, 231 | 5.594861000776291, 232 | 3250, 233 | 6.4213400185108185, 234 | 3500, 235 | 7.7272399961948395, 236 | 3750, 237 | 8.471197992563248, 238 | 4000, 239 | 9.470992982387543, 240 | 4250, 241 | 10.686117023229599, 242 | 4500, 243 | 12.217922002077103, 244 | 4750, 245 | 13.635425001382828, 246 | 5000, 247 | 15.410194009542465, 248 | 5250, 249 | 16.53873100876808, 250 | 5500, 251 | 18.361880004405975, 252 | 5750, 253 | 19.820524990558624, 254 | 6000, 255 | 21.801020979881287 256 | ], 257 | "radixSort": [ 258 | 10, 259 | 0.3388639986515045, 260 | 50, 261 | 0.05923202633857727, 262 | 100, 263 | 0.10636597871780396, 264 | 150, 265 | 0.15820497274398804, 266 | 200, 267 | 0.31954702734947205, 268 | 250, 269 | 0.20840999484062195, 270 | 300, 271 | 0.24609899520874023, 272 | 350, 273 | 0.280098021030426, 274 | 400, 275 | 0.35725900530815125, 276 | 500, 277 | 0.44892099499702454, 278 | 600, 279 | 0.7693009972572327, 280 | 700, 281 | 0.24848300218582153, 282 | 800, 283 | 0.2794780135154724, 284 | 900, 285 | 0.42659100890159607, 286 | 1000, 287 | 0.6614609956741333, 288 | 1250, 289 | 0.7222830057144165, 290 | 1500, 291 | 0.5640240013599396, 292 | 1750, 293 | 0.6259999871253967, 294 | 2000, 295 | 0.7920510172843933, 296 | 2250, 297 | 0.8716470003128052, 298 | 2500, 299 | 1.0157899856567383, 300 | 2750, 301 | 1.0274380147457123, 302 | 3000, 303 | 1.1757140159606934, 304 | 3250, 305 | 1.1240430176258087, 306 | 3500, 307 | 1.2320869863033295, 308 | 3750, 309 | 1.3788059949874878, 310 | 4000, 311 | 1.4249999821186066, 312 | 4250, 313 | 1.8308099806308746, 314 | 4500, 315 | 1.7411690056324005, 316 | 4750, 317 | 1.734614998102188, 318 | 5000, 319 | 1.746641993522644, 320 | 5250, 321 | 1.8571880161762238, 322 | 5500, 323 | 1.898749977350235, 324 | 5750, 325 | 2.200874000787735, 326 | 6000, 327 | 2.2238929867744446 328 | ], 329 | "heapSort": [ 330 | 10, 331 | 0.16380998492240906, 332 | 50, 333 | 0.0882599949836731, 334 | 100, 335 | 0.2045689821243286, 336 | 150, 337 | 0.3403150141239166, 338 | 200, 339 | 0.607026994228363, 340 | 250, 341 | 0.08401501178741455, 342 | 300, 343 | 0.09633898735046387, 344 | 350, 345 | 0.16788899898529053, 346 | 400, 347 | 0.09947201609611511, 348 | 500, 349 | 0.16024500131607056, 350 | 600, 351 | 0.15019699931144714, 352 | 700, 353 | 0.23936501145362854, 354 | 800, 355 | 0.7526340186595917, 356 | 900, 357 | 0.12526801228523254, 358 | 1000, 359 | 0.14349499344825745, 360 | 1250, 361 | 0.23957699537277222, 362 | 1500, 363 | 0.23985400795936584, 364 | 1750, 365 | 0.2678219974040985, 366 | 2000, 367 | 0.3112509846687317, 368 | 2250, 369 | 0.36130398511886597, 370 | 2500, 371 | 0.3887609839439392, 372 | 2750, 373 | 0.43984001874923706, 374 | 3000, 375 | 0.48180699348449707, 376 | 3250, 377 | 0.543861985206604, 378 | 3500, 379 | 0.5899370014667511, 380 | 3750, 381 | 0.6228040158748627, 382 | 4000, 383 | 0.7131629884243011, 384 | 4250, 385 | 0.7130270004272461, 386 | 4500, 387 | 0.761341005563736, 388 | 4750, 389 | 0.8260090053081512, 390 | 5000, 391 | 0.9591259956359863, 392 | 5250, 393 | 0.9097169935703278, 394 | 5500, 395 | 0.9541650116443634, 396 | 5750, 397 | 1.0019629895687103, 398 | 6000, 399 | 1.0874040126800537 400 | ], 401 | "quickSort": [ 402 | 10, 403 | 0.11141699552536011, 404 | 50, 405 | 0.045387983322143555, 406 | 100, 407 | 0.1535000205039978, 408 | 150, 409 | 0.5336440205574036, 410 | 200, 411 | 0.04617300629615784, 412 | 250, 413 | 0.06678301095962524, 414 | 300, 415 | 0.09390398859977722, 416 | 350, 417 | 0.13032099604606628, 418 | 400, 419 | 0.15625, 420 | 500, 421 | 0.2503899931907654, 422 | 600, 423 | 0.35870298743247986, 424 | 700, 425 | 0.4808860123157501, 426 | 800, 427 | 0.6237280070781708, 428 | 900, 429 | 0.7671380043029785, 430 | 1000, 431 | 0.9400849938392639, 432 | 1250, 433 | 1.4726849794387817, 434 | 1500, 435 | 2.0873799920082092, 436 | 1750, 437 | 2.845689982175827, 438 | 2000, 439 | 3.7021550238132477, 440 | 2250, 441 | 4.712168991565704, 442 | 2500, 443 | 5.696210980415344, 444 | 2750, 445 | 7.4794720113277435, 446 | 3000, 447 | 8.219862014055252, 448 | 3250, 449 | 9.713468998670578, 450 | 3500, 451 | 11.234825998544693, 452 | 3750, 453 | 12.731887012720108, 454 | 4000, 455 | 14.413150995969772, 456 | 4250, 457 | 16.304957002401352, 458 | 4500, 459 | 19.046564996242523, 460 | 4750, 461 | 20.773816019296646, 462 | 5000, 463 | 22.42322400212288, 464 | 5250, 465 | 24.941599994897842, 466 | 5500, 467 | 27.35844999551773, 468 | 5750, 469 | 29.979654997587204, 470 | 6000, 471 | 33.133037984371185 472 | ], 473 | "mergeSort": [ 474 | 10, 475 | 0.14990100264549255, 476 | 50, 477 | 0.038913995027542114, 478 | 100, 479 | 0.07836800813674927, 480 | 150, 481 | 0.6777369976043701, 482 | 200, 483 | 0.15046101808547974, 484 | 250, 485 | 0.1905370056629181, 486 | 300, 487 | 0.45566999912261963, 488 | 350, 489 | 0.11677899956703186, 490 | 400, 491 | 0.15164601802825928, 492 | 500, 493 | 0.20837900042533875, 494 | 600, 495 | 0.6357479989528656, 496 | 700, 497 | 0.42880699038505554, 498 | 800, 499 | 0.11335599422454834, 500 | 900, 501 | 0.19891300797462463, 502 | 1000, 503 | 0.06738099455833435, 504 | 1250, 505 | 0.08824899792671204, 506 | 1500, 507 | 0.18253901600837708, 508 | 1750, 509 | 0.12202399969100952, 510 | 2000, 511 | 0.14006099104881287, 512 | 2250, 513 | 0.16374999284744263, 514 | 2500, 515 | 0.18191400170326233, 516 | 2750, 517 | 0.4207819998264313, 518 | 3000, 519 | 0.24128997325897217, 520 | 3250, 521 | 0.3159559965133667, 522 | 3500, 523 | 0.35539498925209045, 524 | 3750, 525 | 0.33823099732398987, 526 | 4000, 527 | 0.5094639956951141, 528 | 4250, 529 | 0.8567460179328918, 530 | 4500, 531 | 1.096021980047226, 532 | 4750, 533 | 0.4804549813270569, 534 | 5000, 535 | 0.49967899918556213, 536 | 5250, 537 | 0.5604760050773621, 538 | 5500, 539 | 0.5165989995002747, 540 | 5750, 541 | 0.5450610220432281, 542 | 6000, 543 | 0.473037987947464 544 | ], 545 | "shellSort": [ 546 | 10, 547 | 0.08215799927711487, 548 | 50, 549 | 0.095645010471344, 550 | 100, 551 | 0.2615779936313629, 552 | 150, 553 | 1.20906001329422, 554 | 200, 555 | 1.3855570256710052, 556 | 250, 557 | 0.13947999477386475, 558 | 300, 559 | 0.17590102553367615, 560 | 350, 561 | 0.2121570110321045, 562 | 400, 563 | 0.48018699884414673, 564 | 500, 565 | 0.6993429958820343, 566 | 600, 567 | 0.9418010115623474, 568 | 700, 569 | 1.1702130138874054, 570 | 800, 571 | 1.4809470176696777, 572 | 900, 573 | 1.6194159984588623, 574 | 1000, 575 | 1.8651989996433258, 576 | 1250, 577 | 4.753466993570328, 578 | 1500, 579 | 6.4552329778671265, 580 | 1750, 581 | 8.138727992773056, 582 | 2000, 583 | 9.836380004882812, 584 | 2250, 585 | 11.324403017759323, 586 | 2500, 587 | 12.973637998104095, 588 | 2750, 589 | 14.52563300728798, 590 | 3000, 591 | 16.589136004447937, 592 | 3250, 593 | 18.310252994298935, 594 | 3500, 595 | 36.99218699336052, 596 | 3750, 597 | 42.351171016693115, 598 | 4000, 599 | 47.041734993457794, 600 | 4250, 601 | 52.02256199717522, 602 | 4500, 603 | 57.44292399287224, 604 | 4750, 605 | 62.236698001623154, 606 | 5000, 607 | 66.89537599682808, 608 | 5250, 609 | 72.92098501324654, 610 | 5500, 611 | 78.25195300579071, 612 | 5750, 613 | 84.28107997775078, 614 | 6000, 615 | 88.62779900431633 616 | ] 617 | } 618 | -------------------------------------------------------------------------------- /src/algorithms/sortData.json: -------------------------------------------------------------------------------- 1 | { 2 | "inputSize": [ 3 | 10, 4 | 50, 5 | 100, 6 | 150, 7 | 200, 8 | 250, 9 | 300, 10 | 350, 11 | 400, 12 | 500, 13 | 600, 14 | 700, 15 | 800, 16 | 900, 17 | 1000, 18 | 1250, 19 | 1500, 20 | 1750, 21 | 2000, 22 | 2250, 23 | 2500, 24 | 2750, 25 | 3000, 26 | 3250, 27 | 3500, 28 | 3750, 29 | 4000, 30 | 4250, 31 | 4500, 32 | 4750, 33 | 5000, 34 | 5250, 35 | 5500, 36 | 5750, 37 | 6000 38 | ], 39 | "maxTime": [ 40 | 0.3388639986515045, 41 | 0.095645010471344, 42 | 0.2615779936313629, 43 | 1.2753599882125854, 44 | 1.3855570256710052, 45 | 0.20840999484062195, 46 | 0.45566999912261963, 47 | 0.280098021030426, 48 | 0.48018699884414673, 49 | 0.6993429958820343, 50 | 0.9418010115623474, 51 | 1.1702130138874054, 52 | 1.4809470176696777, 53 | 1.6194159984588623, 54 | 1.8651989996433258, 55 | 4.753466993570328, 56 | 6.4552329778671265, 57 | 8.138727992773056, 58 | 9.836380004882812, 59 | 11.324403017759323, 60 | 12.973637998104095, 61 | 14.52563300728798, 62 | 16.589136004447937, 63 | 18.310252994298935, 64 | 36.99218699336052, 65 | 42.351171016693115, 66 | 47.041734993457794, 67 | 52.02256199717522, 68 | 57.44292399287224, 69 | 62.236698001623154, 70 | 66.89537599682808, 71 | 72.92098501324654, 72 | 78.25195300579071, 73 | 84.28107997775078, 74 | 88.62779900431633 75 | ], 76 | "bubbleSort": [ 77 | [10, 0.10837501287460327], 78 | [50, 0.05119800567626953], 79 | [100, 0.19018098711967468], 80 | [150, 0.1771399974822998], 81 | [200, 0.1440710127353668], 82 | [250, 0.04760599136352539], 83 | [300, 0.0661429762840271], 84 | [350, 0.0841900110244751], 85 | [400, 0.11311101913452148], 86 | [500, 0.17048898339271545], 87 | [600, 0.23596999049186707], 88 | [700, 0.3201900124549866], 89 | [800, 0.43615397810935974], 90 | [900, 0.5261759757995605], 91 | [1000, 0.6377519965171814], 92 | [1250, 1.0106300115585327], 93 | [1500, 1.3544670045375824], 94 | [1750, 1.8758260011672974], 95 | [2000, 2.4836699962615967], 96 | [2250, 3.0667259991168976], 97 | [2500, 3.8543460071086884], 98 | [2750, 4.627283990383148], 99 | [3000, 5.529830992221832], 100 | [3250, 6.517351984977722], 101 | [3500, 7.67671400308609], 102 | [3750, 8.71374499797821], 103 | [4000, 10.086914986371994], 104 | [4250, 11.64139899611473], 105 | [4500, 13.69435802102089], 106 | [4750, 14.841834008693695], 107 | [5000, 16.715560019016266], 108 | [5250, 18.508691996335983], 109 | [5500, 20.50517100095749], 110 | [5750, 22.95057499408722], 111 | [6000, 26.63873401284218] 112 | ], 113 | "selectionSort": [ 114 | 10, 115 | 0.046512991189956665, 116 | 50, 117 | 0.045065999031066895, 118 | 100, 119 | 0.16267597675323486, 120 | 150, 121 | 1.2753599882125854, 122 | 200, 123 | 1.0314069986343384, 124 | 250, 125 | 0.03354501724243164, 126 | 300, 127 | 0.0455780029296875, 128 | 350, 129 | 0.05938798189163208, 130 | 400, 131 | 0.08007597923278809, 132 | 500, 133 | 0.11703699827194214, 134 | 600, 135 | 0.16245701909065247, 136 | 700, 137 | 0.22464001178741455, 138 | 800, 139 | 0.28340399265289307, 140 | 900, 141 | 0.3575740158557892, 142 | 1000, 143 | 0.45594102144241333, 144 | 1250, 145 | 0.6618680059909821, 146 | 1500, 147 | 0.9411309957504272, 148 | 1750, 149 | 1.268664002418518, 150 | 2000, 151 | 1.6451629996299744, 152 | 2250, 153 | 2.070017993450165, 154 | 2500, 155 | 2.4725250005722046, 156 | 2750, 157 | 2.9807170033454895, 158 | 3000, 159 | 3.537240982055664, 160 | 3250, 161 | 4.246937990188599, 162 | 3500, 163 | 4.94556400179863, 164 | 3750, 165 | 5.472263008356094, 166 | 4000, 167 | 6.447797000408173, 168 | 4250, 169 | 7.080096006393433, 170 | 4500, 171 | 7.936254024505615, 172 | 4750, 173 | 8.973499983549118, 174 | 5000, 175 | 9.916045010089874, 176 | 5250, 177 | 10.648669987916946, 178 | 5500, 179 | 12.278986990451813, 180 | 5750, 181 | 12.881801009178162, 182 | 6000, 183 | 14.065596997737885 184 | ], 185 | "insertionSort": [ 186 | 10, 187 | 0.04152101278305054, 188 | 50, 189 | 0.06613299250602722, 190 | 100, 191 | 0.25915300846099854, 192 | 150, 193 | 1.0240910053253174, 194 | 200, 195 | 1.0520319938659668, 196 | 250, 197 | 0.042251020669937134, 198 | 300, 199 | 0.05898800492286682, 200 | 350, 201 | 0.07898500561714172, 202 | 400, 203 | 0.10561099648475647, 204 | 500, 205 | 0.15787097811698914, 206 | 600, 207 | 0.241907000541687, 208 | 700, 209 | 0.31456002593040466, 210 | 800, 211 | 0.4038819968700409, 212 | 900, 213 | 0.5118109881877899, 214 | 1000, 215 | 0.6311459839344025, 216 | 1250, 217 | 1.1285569965839386, 218 | 1500, 219 | 1.379632979631424, 220 | 1750, 221 | 2.0670460164546967, 222 | 2000, 223 | 2.6966899931430817, 224 | 2250, 225 | 3.148476004600525, 226 | 2500, 227 | 4.447587996721268, 228 | 2750, 229 | 4.664133995771408, 230 | 3000, 231 | 5.594861000776291, 232 | 3250, 233 | 6.4213400185108185, 234 | 3500, 235 | 7.7272399961948395, 236 | 3750, 237 | 8.471197992563248, 238 | 4000, 239 | 9.470992982387543, 240 | 4250, 241 | 10.686117023229599, 242 | 4500, 243 | 12.217922002077103, 244 | 4750, 245 | 13.635425001382828, 246 | 5000, 247 | 15.410194009542465, 248 | 5250, 249 | 16.53873100876808, 250 | 5500, 251 | 18.361880004405975, 252 | 5750, 253 | 19.820524990558624, 254 | 6000, 255 | 21.801020979881287 256 | ], 257 | "radixSort": [ 258 | 10, 259 | 0.3388639986515045, 260 | 50, 261 | 0.05923202633857727, 262 | 100, 263 | 0.10636597871780396, 264 | 150, 265 | 0.15820497274398804, 266 | 200, 267 | 0.31954702734947205, 268 | 250, 269 | 0.20840999484062195, 270 | 300, 271 | 0.24609899520874023, 272 | 350, 273 | 0.280098021030426, 274 | 400, 275 | 0.35725900530815125, 276 | 500, 277 | 0.44892099499702454, 278 | 600, 279 | 0.7693009972572327, 280 | 700, 281 | 0.24848300218582153, 282 | 800, 283 | 0.2794780135154724, 284 | 900, 285 | 0.42659100890159607, 286 | 1000, 287 | 0.6614609956741333, 288 | 1250, 289 | 0.7222830057144165, 290 | 1500, 291 | 0.5640240013599396, 292 | 1750, 293 | 0.6259999871253967, 294 | 2000, 295 | 0.7920510172843933, 296 | 2250, 297 | 0.8716470003128052, 298 | 2500, 299 | 1.0157899856567383, 300 | 2750, 301 | 1.0274380147457123, 302 | 3000, 303 | 1.1757140159606934, 304 | 3250, 305 | 1.1240430176258087, 306 | 3500, 307 | 1.2320869863033295, 308 | 3750, 309 | 1.3788059949874878, 310 | 4000, 311 | 1.4249999821186066, 312 | 4250, 313 | 1.8308099806308746, 314 | 4500, 315 | 1.7411690056324005, 316 | 4750, 317 | 1.734614998102188, 318 | 5000, 319 | 1.746641993522644, 320 | 5250, 321 | 1.8571880161762238, 322 | 5500, 323 | 1.898749977350235, 324 | 5750, 325 | 2.200874000787735, 326 | 6000, 327 | 2.2238929867744446 328 | ], 329 | "heapSort": [ 330 | 10, 331 | 0.16380998492240906, 332 | 50, 333 | 0.0882599949836731, 334 | 100, 335 | 0.2045689821243286, 336 | 150, 337 | 0.3403150141239166, 338 | 200, 339 | 0.607026994228363, 340 | 250, 341 | 0.08401501178741455, 342 | 300, 343 | 0.09633898735046387, 344 | 350, 345 | 0.16788899898529053, 346 | 400, 347 | 0.09947201609611511, 348 | 500, 349 | 0.16024500131607056, 350 | 600, 351 | 0.15019699931144714, 352 | 700, 353 | 0.23936501145362854, 354 | 800, 355 | 0.7526340186595917, 356 | 900, 357 | 0.12526801228523254, 358 | 1000, 359 | 0.14349499344825745, 360 | 1250, 361 | 0.23957699537277222, 362 | 1500, 363 | 0.23985400795936584, 364 | 1750, 365 | 0.2678219974040985, 366 | 2000, 367 | 0.3112509846687317, 368 | 2250, 369 | 0.36130398511886597, 370 | 2500, 371 | 0.3887609839439392, 372 | 2750, 373 | 0.43984001874923706, 374 | 3000, 375 | 0.48180699348449707, 376 | 3250, 377 | 0.543861985206604, 378 | 3500, 379 | 0.5899370014667511, 380 | 3750, 381 | 0.6228040158748627, 382 | 4000, 383 | 0.7131629884243011, 384 | 4250, 385 | 0.7130270004272461, 386 | 4500, 387 | 0.761341005563736, 388 | 4750, 389 | 0.8260090053081512, 390 | 5000, 391 | 0.9591259956359863, 392 | 5250, 393 | 0.9097169935703278, 394 | 5500, 395 | 0.9541650116443634, 396 | 5750, 397 | 1.0019629895687103, 398 | 6000, 399 | 1.0874040126800537 400 | ], 401 | "quickSort": [ 402 | 10, 403 | 0.11141699552536011, 404 | 50, 405 | 0.045387983322143555, 406 | 100, 407 | 0.1535000205039978, 408 | 150, 409 | 0.5336440205574036, 410 | 200, 411 | 0.04617300629615784, 412 | 250, 413 | 0.06678301095962524, 414 | 300, 415 | 0.09390398859977722, 416 | 350, 417 | 0.13032099604606628, 418 | 400, 419 | 0.15625, 420 | 500, 421 | 0.2503899931907654, 422 | 600, 423 | 0.35870298743247986, 424 | 700, 425 | 0.4808860123157501, 426 | 800, 427 | 0.6237280070781708, 428 | 900, 429 | 0.7671380043029785, 430 | 1000, 431 | 0.9400849938392639, 432 | 1250, 433 | 1.4726849794387817, 434 | 1500, 435 | 2.0873799920082092, 436 | 1750, 437 | 2.845689982175827, 438 | 2000, 439 | 3.7021550238132477, 440 | 2250, 441 | 4.712168991565704, 442 | 2500, 443 | 5.696210980415344, 444 | 2750, 445 | 7.4794720113277435, 446 | 3000, 447 | 8.219862014055252, 448 | 3250, 449 | 9.713468998670578, 450 | 3500, 451 | 11.234825998544693, 452 | 3750, 453 | 12.731887012720108, 454 | 4000, 455 | 14.413150995969772, 456 | 4250, 457 | 16.304957002401352, 458 | 4500, 459 | 19.046564996242523, 460 | 4750, 461 | 20.773816019296646, 462 | 5000, 463 | 22.42322400212288, 464 | 5250, 465 | 24.941599994897842, 466 | 5500, 467 | 27.35844999551773, 468 | 5750, 469 | 29.979654997587204, 470 | 6000, 471 | 33.133037984371185 472 | ], 473 | "mergeSort": [ 474 | 10, 475 | 0.14990100264549255, 476 | 50, 477 | 0.038913995027542114, 478 | 100, 479 | 0.07836800813674927, 480 | 150, 481 | 0.6777369976043701, 482 | 200, 483 | 0.15046101808547974, 484 | 250, 485 | 0.1905370056629181, 486 | 300, 487 | 0.45566999912261963, 488 | 350, 489 | 0.11677899956703186, 490 | 400, 491 | 0.15164601802825928, 492 | 500, 493 | 0.20837900042533875, 494 | 600, 495 | 0.6357479989528656, 496 | 700, 497 | 0.42880699038505554, 498 | 800, 499 | 0.11335599422454834, 500 | 900, 501 | 0.19891300797462463, 502 | 1000, 503 | 0.06738099455833435, 504 | 1250, 505 | 0.08824899792671204, 506 | 1500, 507 | 0.18253901600837708, 508 | 1750, 509 | 0.12202399969100952, 510 | 2000, 511 | 0.14006099104881287, 512 | 2250, 513 | 0.16374999284744263, 514 | 2500, 515 | 0.18191400170326233, 516 | 2750, 517 | 0.4207819998264313, 518 | 3000, 519 | 0.24128997325897217, 520 | 3250, 521 | 0.3159559965133667, 522 | 3500, 523 | 0.35539498925209045, 524 | 3750, 525 | 0.33823099732398987, 526 | 4000, 527 | 0.5094639956951141, 528 | 4250, 529 | 0.8567460179328918, 530 | 4500, 531 | 1.096021980047226, 532 | 4750, 533 | 0.4804549813270569, 534 | 5000, 535 | 0.49967899918556213, 536 | 5250, 537 | 0.5604760050773621, 538 | 5500, 539 | 0.5165989995002747, 540 | 5750, 541 | 0.5450610220432281, 542 | 6000, 543 | 0.473037987947464 544 | ], 545 | "shellSort": [ 546 | 10, 547 | 0.08215799927711487, 548 | 50, 549 | 0.095645010471344, 550 | 100, 551 | 0.2615779936313629, 552 | 150, 553 | 1.20906001329422, 554 | 200, 555 | 1.3855570256710052, 556 | 250, 557 | 0.13947999477386475, 558 | 300, 559 | 0.17590102553367615, 560 | 350, 561 | 0.2121570110321045, 562 | 400, 563 | 0.48018699884414673, 564 | 500, 565 | 0.6993429958820343, 566 | 600, 567 | 0.9418010115623474, 568 | 700, 569 | 1.1702130138874054, 570 | 800, 571 | 1.4809470176696777, 572 | 900, 573 | 1.6194159984588623, 574 | 1000, 575 | 1.8651989996433258, 576 | 1250, 577 | 4.753466993570328, 578 | 1500, 579 | 6.4552329778671265, 580 | 1750, 581 | 8.138727992773056, 582 | 2000, 583 | 9.836380004882812, 584 | 2250, 585 | 11.324403017759323, 586 | 2500, 587 | 12.973637998104095, 588 | 2750, 589 | 14.52563300728798, 590 | 3000, 591 | 16.589136004447937, 592 | 3250, 593 | 18.310252994298935, 594 | 3500, 595 | 36.99218699336052, 596 | 3750, 597 | 42.351171016693115, 598 | 4000, 599 | 47.041734993457794, 600 | 4250, 601 | 52.02256199717522, 602 | 4500, 603 | 57.44292399287224, 604 | 4750, 605 | 62.236698001623154, 606 | 5000, 607 | 66.89537599682808, 608 | 5250, 609 | 72.92098501324654, 610 | 5500, 611 | 78.25195300579071, 612 | 5750, 613 | 84.28107997775078, 614 | 6000, 615 | 88.62779900431633 616 | ] 617 | } 618 | -------------------------------------------------------------------------------- /src/visualize/sort.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | // const { PerformanceObserver, performance } = require("perf_hooks"); 3 | // let fs = require('fs'); 4 | import regeneratorRuntime from "regenerator-runtime"; 5 | 6 | 7 | var color_maps = { 8 | hsl: function(x) { 9 | return "hsl(" + (x * 360) + ", 100%, 50%)"; 10 | }, 11 | grayscale: function(x) { 12 | var y = x * 255; 13 | return 'rgb(' + [y, y, y].join() + ')'; 14 | }, 15 | inferno: function(x) { 16 | var data = ['#000004', '#010005', '#010106', '#010108', '#02010a', '#02020c', '#02020e', '#030210', '#040312', '#040314', '#050417', '#060419', '#07051b', '#08051d', '#09061f', '#0a0722', '#0b0724', '#0c0826', '#0d0829', '#0e092b', '#10092d', '#110a30', '#120a32', '#140b34', '#150b37', '#160b39', '#180c3c', '#190c3e', '#1b0c41', '#1c0c43', '#1e0c45', '#1f0c48', '#210c4a', '#230c4c', '#240c4f', '#260c51', '#280b53', '#290b55', '#2b0b57', '#2d0b59', '#2f0a5b', '#310a5c', '#320a5e', '#340a5f', '#360961', '#380962', '#390963', '#3b0964', '#3d0965', '#3e0966', '#400a67', '#420a68', '#440a68', '#450a69', '#470b6a', '#490b6a', '#4a0c6b', '#4c0c6b', '#4d0d6c', '#4f0d6c', '#510e6c', '#520e6d', '#540f6d', '#550f6d', '#57106e', '#59106e', '#5a116e', '#5c126e', '#5d126e', '#5f136e', '#61136e', '#62146e', '#64156e', '#65156e', '#67166e', '#69166e', '#6a176e', '#6c186e', '#6d186e', '#6f196e', '#71196e', '#721a6e', '#741a6e', '#751b6e', '#771c6d', '#781c6d', '#7a1d6d', '#7c1d6d', '#7d1e6d', '#7f1e6c', '#801f6c', '#82206c', '#84206b', '#85216b', '#87216b', '#88226a', '#8a226a', '#8c2369', '#8d2369', '#8f2469', '#902568', '#922568', '#932667', '#952667', '#972766', '#982766', '#9a2865', '#9b2964', '#9d2964', '#9f2a63', '#a02a63', '#a22b62', '#a32c61', '#a52c60', '#a62d60', '#a82e5f', '#a92e5e', '#ab2f5e', '#ad305d', '#ae305c', '#b0315b', '#b1325a', '#b3325a', '#b43359', '#b63458', '#b73557', '#b93556', '#ba3655', '#bc3754', '#bd3853', '#bf3952', '#c03a51', '#c13a50', '#c33b4f', '#c43c4e', '#c63d4d', '#c73e4c', '#c83f4b', '#ca404a', '#cb4149', '#cc4248', '#ce4347', '#cf4446', '#d04545', '#d24644', '#d34743', '#d44842', '#d54a41', '#d74b3f', '#d84c3e', '#d94d3d', '#da4e3c', '#db503b', '#dd513a', '#de5238', '#df5337', '#e05536', '#e15635', '#e25734', '#e35933', '#e45a31', '#e55c30', '#e65d2f', '#e75e2e', '#e8602d', '#e9612b', '#ea632a', '#eb6429', '#eb6628', '#ec6726', '#ed6925', '#ee6a24', '#ef6c23', '#ef6e21', '#f06f20', '#f1711f', '#f1731d', '#f2741c', '#f3761b', '#f37819', '#f47918', '#f57b17', '#f57d15', '#f67e14', '#f68013', '#f78212', '#f78410', '#f8850f', '#f8870e', '#f8890c', '#f98b0b', '#f98c0a', '#f98e09', '#fa9008', '#fa9207', '#fa9407', '#fb9606', '#fb9706', '#fb9906', '#fb9b06', '#fb9d07', '#fc9f07', '#fca108', '#fca309', '#fca50a', '#fca60c', '#fca80d', '#fcaa0f', '#fcac11', '#fcae12', '#fcb014', '#fcb216', '#fcb418', '#fbb61a', '#fbb81d', '#fbba1f', '#fbbc21', '#fbbe23', '#fac026', '#fac228', '#fac42a', '#fac62d', '#f9c72f', '#f9c932', '#f9cb35', '#f8cd37', '#f8cf3a', '#f7d13d', '#f7d340', '#f6d543', '#f6d746', '#f5d949', '#f5db4c', '#f4dd4f', '#f4df53', '#f4e156', '#f3e35a', '#f3e55d', '#f2e661', '#f2e865', '#f2ea69', '#f1ec6d', '#f1ed71', '#f1ef75', '#f1f179', '#f2f27d', '#f2f482', '#f3f586', '#f3f68a', '#f4f88e', '#f5f992', '#f6fa96', '#f8fb9a', '#f9fc9d', '#fafda1', '#fcffa4']; 17 | return data[Math.floor(x * 255)]; 18 | }, 19 | magma: function(x) { 20 | var data = ['#000004', '#010005', '#010106', '#010108', '#020109', '#02020b', '#02020d', '#03030f', '#030312', '#040414', '#050416', '#060518', '#06051a', '#07061c', '#08071e', '#090720', '#0a0822', '#0b0924', '#0c0926', '#0d0a29', '#0e0b2b', '#100b2d', '#110c2f', '#120d31', '#130d34', '#140e36', '#150e38', '#160f3b', '#180f3d', '#19103f', '#1a1042', '#1c1044', '#1d1147', '#1e1149', '#20114b', '#21114e', '#221150', '#241253', '#251255', '#271258', '#29115a', '#2a115c', '#2c115f', '#2d1161', '#2f1163', '#311165', '#331067', '#341069', '#36106b', '#38106c', '#390f6e', '#3b0f70', '#3d0f71', '#3f0f72', '#400f74', '#420f75', '#440f76', '#451077', '#471078', '#491078', '#4a1079', '#4c117a', '#4e117b', '#4f127b', '#51127c', '#52137c', '#54137d', '#56147d', '#57157e', '#59157e', '#5a167e', '#5c167f', '#5d177f', '#5f187f', '#601880', '#621980', '#641a80', '#651a80', '#671b80', '#681c81', '#6a1c81', '#6b1d81', '#6d1d81', '#6e1e81', '#701f81', '#721f81', '#732081', '#752181', '#762181', '#782281', '#792282', '#7b2382', '#7c2382', '#7e2482', '#802582', '#812581', '#832681', '#842681', '#862781', '#882781', '#892881', '#8b2981', '#8c2981', '#8e2a81', '#902a81', '#912b81', '#932b80', '#942c80', '#962c80', '#982d80', '#992d80', '#9b2e7f', '#9c2e7f', '#9e2f7f', '#a02f7f', '#a1307e', '#a3307e', '#a5317e', '#a6317d', '#a8327d', '#aa337d', '#ab337c', '#ad347c', '#ae347b', '#b0357b', '#b2357b', '#b3367a', '#b5367a', '#b73779', '#b83779', '#ba3878', '#bc3978', '#bd3977', '#bf3a77', '#c03a76', '#c23b75', '#c43c75', '#c53c74', '#c73d73', '#c83e73', '#ca3e72', '#cc3f71', '#cd4071', '#cf4070', '#d0416f', '#d2426f', '#d3436e', '#d5446d', '#d6456c', '#d8456c', '#d9466b', '#db476a', '#dc4869', '#de4968', '#df4a68', '#e04c67', '#e24d66', '#e34e65', '#e44f64', '#e55064', '#e75263', '#e85362', '#e95462', '#ea5661', '#eb5760', '#ec5860', '#ed5a5f', '#ee5b5e', '#ef5d5e', '#f05f5e', '#f1605d', '#f2625d', '#f2645c', '#f3655c', '#f4675c', '#f4695c', '#f56b5c', '#f66c5c', '#f66e5c', '#f7705c', '#f7725c', '#f8745c', '#f8765c', '#f9785d', '#f9795d', '#f97b5d', '#fa7d5e', '#fa7f5e', '#fa815f', '#fb835f', '#fb8560', '#fb8761', '#fc8961', '#fc8a62', '#fc8c63', '#fc8e64', '#fc9065', '#fd9266', '#fd9467', '#fd9668', '#fd9869', '#fd9a6a', '#fd9b6b', '#fe9d6c', '#fe9f6d', '#fea16e', '#fea36f', '#fea571', '#fea772', '#fea973', '#feaa74', '#feac76', '#feae77', '#feb078', '#feb27a', '#feb47b', '#feb67c', '#feb77e', '#feb97f', '#febb81', '#febd82', '#febf84', '#fec185', '#fec287', '#fec488', '#fec68a', '#fec88c', '#feca8d', '#fecc8f', '#fecd90', '#fecf92', '#fed194', '#fed395', '#fed597', '#fed799', '#fed89a', '#fdda9c', '#fddc9e', '#fddea0', '#fde0a1', '#fde2a3', '#fde3a5', '#fde5a7', '#fde7a9', '#fde9aa', '#fdebac', '#fcecae', '#fceeb0', '#fcf0b2', '#fcf2b4', '#fcf4b6', '#fcf6b8', '#fcf7b9', '#fcf9bb', '#fcfbbd', '#fcfdbf']; 21 | return data[Math.floor(x * 255)]; 22 | }, 23 | plasma: function(x) { 24 | var data = ['#0d0887', '#100788', '#130789', '#16078a', '#19068c', '#1b068d', '#1d068e', '#20068f', '#220690', '#240691', '#260591', '#280592', '#2a0593', '#2c0594', '#2e0595', '#2f0596', '#310597', '#330597', '#350498', '#370499', '#38049a', '#3a049a', '#3c049b', '#3e049c', '#3f049c', '#41049d', '#43039e', '#44039e', '#46039f', '#48039f', '#4903a0', '#4b03a1', '#4c02a1', '#4e02a2', '#5002a2', '#5102a3', '#5302a3', '#5502a4', '#5601a4', '#5801a4', '#5901a5', '#5b01a5', '#5c01a6', '#5e01a6', '#6001a6', '#6100a7', '#6300a7', '#6400a7', '#6600a7', '#6700a8', '#6900a8', '#6a00a8', '#6c00a8', '#6e00a8', '#6f00a8', '#7100a8', '#7201a8', '#7401a8', '#7501a8', '#7701a8', '#7801a8', '#7a02a8', '#7b02a8', '#7d03a8', '#7e03a8', '#8004a8', '#8104a7', '#8305a7', '#8405a7', '#8606a6', '#8707a6', '#8808a6', '#8a09a5', '#8b0aa5', '#8d0ba5', '#8e0ca4', '#8f0da4', '#910ea3', '#920fa3', '#9410a2', '#9511a1', '#9613a1', '#9814a0', '#99159f', '#9a169f', '#9c179e', '#9d189d', '#9e199d', '#a01a9c', '#a11b9b', '#a21d9a', '#a31e9a', '#a51f99', '#a62098', '#a72197', '#a82296', '#aa2395', '#ab2494', '#ac2694', '#ad2793', '#ae2892', '#b02991', '#b12a90', '#b22b8f', '#b32c8e', '#b42e8d', '#b52f8c', '#b6308b', '#b7318a', '#b83289', '#ba3388', '#bb3488', '#bc3587', '#bd3786', '#be3885', '#bf3984', '#c03a83', '#c13b82', '#c23c81', '#c33d80', '#c43e7f', '#c5407e', '#c6417d', '#c7427c', '#c8437b', '#c9447a', '#ca457a', '#cb4679', '#cc4778', '#cc4977', '#cd4a76', '#ce4b75', '#cf4c74', '#d04d73', '#d14e72', '#d24f71', '#d35171', '#d45270', '#d5536f', '#d5546e', '#d6556d', '#d7566c', '#d8576b', '#d9586a', '#da5a6a', '#da5b69', '#db5c68', '#dc5d67', '#dd5e66', '#de5f65', '#de6164', '#df6263', '#e06363', '#e16462', '#e26561', '#e26660', '#e3685f', '#e4695e', '#e56a5d', '#e56b5d', '#e66c5c', '#e76e5b', '#e76f5a', '#e87059', '#e97158', '#e97257', '#ea7457', '#eb7556', '#eb7655', '#ec7754', '#ed7953', '#ed7a52', '#ee7b51', '#ef7c51', '#ef7e50', '#f07f4f', '#f0804e', '#f1814d', '#f1834c', '#f2844b', '#f3854b', '#f3874a', '#f48849', '#f48948', '#f58b47', '#f58c46', '#f68d45', '#f68f44', '#f79044', '#f79143', '#f79342', '#f89441', '#f89540', '#f9973f', '#f9983e', '#f99a3e', '#fa9b3d', '#fa9c3c', '#fa9e3b', '#fb9f3a', '#fba139', '#fba238', '#fca338', '#fca537', '#fca636', '#fca835', '#fca934', '#fdab33', '#fdac33', '#fdae32', '#fdaf31', '#fdb130', '#fdb22f', '#fdb42f', '#fdb52e', '#feb72d', '#feb82c', '#feba2c', '#febb2b', '#febd2a', '#febe2a', '#fec029', '#fdc229', '#fdc328', '#fdc527', '#fdc627', '#fdc827', '#fdca26', '#fdcb26', '#fccd25', '#fcce25', '#fcd025', '#fcd225', '#fbd324', '#fbd524', '#fbd724', '#fad824', '#fada24', '#f9dc24', '#f9dd25', '#f8df25', '#f8e125', '#f7e225', '#f7e425', '#f6e626', '#f6e826', '#f5e926', '#f5eb27', '#f4ed27', '#f3ee27', '#f3f027', '#f2f227', '#f1f426', '#f1f525', '#f0f724', '#f0f921']; 25 | return data[Math.floor(x * 255)]; 26 | }, 27 | viridis: function(x) { 28 | var data = ['#440154', '#440256', '#450457', '#450559', '#46075a', '#46085c', '#460a5d', '#460b5e', '#470d60', '#470e61', '#471063', '#471164', '#471365', '#481467', '#481668', '#481769', '#48186a', '#481a6c', '#481b6d', '#481c6e', '#481d6f', '#481f70', '#482071', '#482173', '#482374', '#482475', '#482576', '#482677', '#482878', '#482979', '#472a7a', '#472c7a', '#472d7b', '#472e7c', '#472f7d', '#46307e', '#46327e', '#46337f', '#463480', '#453581', '#453781', '#453882', '#443983', '#443a83', '#443b84', '#433d84', '#433e85', '#423f85', '#424086', '#424186', '#414287', '#414487', '#404588', '#404688', '#3f4788', '#3f4889', '#3e4989', '#3e4a89', '#3e4c8a', '#3d4d8a', '#3d4e8a', '#3c4f8a', '#3c508b', '#3b518b', '#3b528b', '#3a538b', '#3a548c', '#39558c', '#39568c', '#38588c', '#38598c', '#375a8c', '#375b8d', '#365c8d', '#365d8d', '#355e8d', '#355f8d', '#34608d', '#34618d', '#33628d', '#33638d', '#32648e', '#32658e', '#31668e', '#31678e', '#31688e', '#30698e', '#306a8e', '#2f6b8e', '#2f6c8e', '#2e6d8e', '#2e6e8e', '#2e6f8e', '#2d708e', '#2d718e', '#2c718e', '#2c728e', '#2c738e', '#2b748e', '#2b758e', '#2a768e', '#2a778e', '#2a788e', '#29798e', '#297a8e', '#297b8e', '#287c8e', '#287d8e', '#277e8e', '#277f8e', '#27808e', '#26818e', '#26828e', '#26828e', '#25838e', '#25848e', '#25858e', '#24868e', '#24878e', '#23888e', '#23898e', '#238a8d', '#228b8d', '#228c8d', '#228d8d', '#218e8d', '#218f8d', '#21908d', '#21918c', '#20928c', '#20928c', '#20938c', '#1f948c', '#1f958b', '#1f968b', '#1f978b', '#1f988b', '#1f998a', '#1f9a8a', '#1e9b8a', '#1e9c89', '#1e9d89', '#1f9e89', '#1f9f88', '#1fa088', '#1fa188', '#1fa187', '#1fa287', '#20a386', '#20a486', '#21a585', '#21a685', '#22a785', '#22a884', '#23a983', '#24aa83', '#25ab82', '#25ac82', '#26ad81', '#27ad81', '#28ae80', '#29af7f', '#2ab07f', '#2cb17e', '#2db27d', '#2eb37c', '#2fb47c', '#31b57b', '#32b67a', '#34b679', '#35b779', '#37b878', '#38b977', '#3aba76', '#3bbb75', '#3dbc74', '#3fbc73', '#40bd72', '#42be71', '#44bf70', '#46c06f', '#48c16e', '#4ac16d', '#4cc26c', '#4ec36b', '#50c46a', '#52c569', '#54c568', '#56c667', '#58c765', '#5ac864', '#5cc863', '#5ec962', '#60ca60', '#63cb5f', '#65cb5e', '#67cc5c', '#69cd5b', '#6ccd5a', '#6ece58', '#70cf57', '#73d056', '#75d054', '#77d153', '#7ad151', '#7cd250', '#7fd34e', '#81d34d', '#84d44b', '#86d549', '#89d548', '#8bd646', '#8ed645', '#90d743', '#93d741', '#95d840', '#98d83e', '#9bd93c', '#9dd93b', '#a0da39', '#a2da37', '#a5db36', '#a8db34', '#aadc32', '#addc30', '#b0dd2f', '#b2dd2d', '#b5de2b', '#b8de29', '#bade28', '#bddf26', '#c0df25', '#c2df23', '#c5e021', '#c8e020', '#cae11f', '#cde11d', '#d0e11c', '#d2e21b', '#d5e21a', '#d8e219', '#dae319', '#dde318', '#dfe318', '#e2e418', '#e5e419', '#e7e419', '#eae51a', '#ece51b', '#efe51c', '#f1e51d', '#f4e61e', '#f6e620', '#f8e621', '#fbe723', '#fde725']; 29 | return data[Math.floor(x * 255)]; 30 | } 31 | }; 32 | 33 | function random() { 34 | do { 35 | var ret = beta_distribution(options.distribution.alpha, options.distribution.beta); 36 | } while (ret >= 1); 37 | return ret; 38 | } 39 | 40 | function SortingVisualization(data, options, ctx) { 41 | this.original_data = []; 42 | this.swaps = []; 43 | for (var i = 0; i < data.length; i++) { 44 | this.original_data.push(data[i].slice()); 45 | this.swaps.push([]); 46 | // debugger 47 | } 48 | 49 | this.data = data; 50 | 51 | this.options = options; 52 | this.ctx = ctx; 53 | } 54 | 55 | SortingVisualization.prototype.cmp = function(x, y) { 56 | return x < y; 57 | }; 58 | 59 | SortingVisualization.prototype.swap = function(y, x1, x2) { 60 | var temp = this.data[y][x1]; 61 | this.data[y][x1] = this.data[y][x2]; 62 | this.data[y][x2] = temp; 63 | 64 | this.swaps[y].push([x1, x2]); 65 | }; 66 | 67 | let steps1 = []; 68 | let steps2 = []; 69 | SortingVisualization.prototype.compare_and_swap = async function(y, x1, x2) { 70 | if (this.cmp(this.data[y][x1], this.data[y][x2])) { 71 | this.swap(y, x1, x2); 72 | // debugger 73 | console.log(this.original_data); 74 | // console.log(this.data); 75 | steps1.push(this.original_data); 76 | steps2.push(this.data); 77 | return true; 78 | } 79 | return false; 80 | }; 81 | 82 | SortingVisualization.prototype.is_sorted = async function(y) { 83 | // debugger 84 | for (var i = 0; i < this.data[y].length - 1; i++) { 85 | if (!this.cmp(this.data[y][i], this.data[y][i + 1])) { 86 | // debugger 87 | // steps.push(this.data); 88 | return false; 89 | } 90 | } 91 | 92 | // debugger 93 | await console.log(steps1); 94 | await console.log(steps2); 95 | return true; 96 | } 97 | 98 | SortingVisualization.prototype.sort_end = async function() { 99 | for (var y = 0; y < this.swaps.length; y++) { 100 | this.swaps[y].reverse(); 101 | } 102 | await console.log(steps1); 103 | await console.log(steps2); 104 | // debugger; 105 | 106 | this.data = this.original_data; 107 | // debugger 108 | // console.log(steps); 109 | }; 110 | 111 | SortingVisualization.prototype.step = async function() { 112 | // let steps = []; 113 | var swapped = false; 114 | var zoom = this.options.zoom; 115 | 116 | for (var y = 0; y < this.swaps.length; y++) { 117 | if (this.swaps[y].length) { 118 | swapped = true; 119 | 120 | var step = this.swaps[y].pop(); 121 | var x1 = step[0], x2 = step[1]; 122 | 123 | var temp = this.original_data[y][x1]; 124 | this.original_data[y][x1] = this.original_data[y][x2]; 125 | this.original_data[y][x2] = temp; 126 | // debugger 127 | console.log(this.original_data); 128 | console.log(this.data); 129 | steps1.push(this.original_data); 130 | steps2.push(this.data); 131 | 132 | 133 | this.ctx.fillStyle = color_maps[this.options.color_map](this.original_data[y][x1] / this.original_data[y].length); 134 | this.ctx.fillRect(x1 * zoom, y * zoom, zoom, zoom); 135 | 136 | this.ctx.fillStyle = color_maps[this.options.color_map](this.original_data[y][x2] / this.original_data[y].length); 137 | this.ctx.fillRect(x2 * zoom, y * zoom, zoom, zoom); 138 | } 139 | } 140 | 141 | // fs.writeFile("sortData.json", JSON.stringify(steps), function(err) { 142 | // if (err) { 143 | // console.log(err); 144 | // } 145 | // }); 146 | // console.log(steps); 147 | return !swapped; 148 | }; 149 | 150 | 151 | function NonSwappingSortingVisualization() { 152 | SortingVisualization.apply(this, arguments); 153 | this.stack = []; 154 | for (var i = 0; i < this.data.length; i++) { 155 | this.stack.push([]); 156 | } 157 | } 158 | 159 | NonSwappingSortingVisualization.prototype = Object.create(SortingVisualization.prototype); 160 | NonSwappingSortingVisualization.prototype.constructor = SortingVisualization; 161 | 162 | NonSwappingSortingVisualization.prototype.sort_end = function() { 163 | SortingVisualization.prototype.sort_end.apply(this, arguments); 164 | for (var y = 0; y < this.stack.length; y++) { 165 | this.stack[y].reverse(); 166 | } 167 | 168 | this.data = this.original_data; 169 | draw(this.ctx, this.data, false); 170 | }; 171 | 172 | NonSwappingSortingVisualization.prototype.step = function(have_to_draw) { 173 | for (var y = 0; y < this.stack.length; y++) { 174 | if (!this.stack[y].length) { 175 | draw(this.ctx, this.data, false); 176 | return true; 177 | } 178 | 179 | var data = this.stack[y].pop(); 180 | var left = data[0], result = data[1]; 181 | 182 | for (var i = 0; i < result.length; i++) { 183 | this.data[y][left + i] = result[i]; 184 | } 185 | } 186 | 187 | if (have_to_draw) { 188 | console.log(this.data); 189 | draw(this.ctx, this.data, false); 190 | } 191 | 192 | return false; 193 | }; 194 | 195 | 196 | function BubbleSort() { 197 | SortingVisualization.apply(this, arguments); 198 | } 199 | 200 | BubbleSort.prototype = Object.create(SortingVisualization.prototype); 201 | BubbleSort.prototype.constructor = SortingVisualization; 202 | 203 | BubbleSort.prototype.sort = function(y, left, right) { 204 | for (; left <= right; left++) { 205 | for (var x = left; x <= right; x++) { 206 | this.compare_and_swap(y, x, left); 207 | } 208 | } 209 | }; 210 | 211 | 212 | function InsertionSort() { 213 | SortingVisualization.apply(this, arguments); 214 | } 215 | 216 | InsertionSort.prototype = Object.create(SortingVisualization.prototype); 217 | InsertionSort.prototype.constructor = SortingVisualization; 218 | 219 | InsertionSort.prototype.sort = function(y, left, right) { 220 | for (; left <= right; left++) { 221 | var j = left; 222 | while (j > 0 && this.cmp(this.data[y][j], this.data[y][j - 1])) { 223 | this.swap(y, j, j - 1); 224 | j--; 225 | } 226 | } 227 | }; 228 | 229 | 230 | function StoogeSort() { 231 | SortingVisualization.apply(this, arguments); 232 | } 233 | 234 | StoogeSort.prototype = Object.create(SortingVisualization.prototype); 235 | StoogeSort.prototype.constructor = SortingVisualization; 236 | 237 | StoogeSort.prototype.sort = function(y, left, right) { 238 | this.compare_and_swap(y, right, left); 239 | 240 | if (right - left >= 2) { 241 | var t = Math.round((right - left) / 3); 242 | this.sort(y, left, right - t); 243 | this.sort(y, left + t, right); 244 | this.sort(y, left, right - t); 245 | } 246 | }; 247 | 248 | 249 | function SelectionSort() { 250 | SortingVisualization.apply(this, arguments); 251 | } 252 | 253 | SelectionSort.prototype = Object.create(SortingVisualization.prototype); 254 | SelectionSort.prototype.constructor = SortingVisualization; 255 | 256 | SelectionSort.prototype.sort = function(y, left, right) { 257 | for (; left <= right; left++) { 258 | var min_i = left; 259 | for (var i = left + 1; i <= right; i++) { 260 | if (this.cmp(this.data[y][i], this.data[y][min_i])) { 261 | min_i = i; 262 | } 263 | } 264 | this.swap(y, left, min_i); 265 | } 266 | }; 267 | 268 | 269 | function CocktailSort() { 270 | SortingVisualization.apply(this, arguments); 271 | } 272 | 273 | CocktailSort.prototype = Object.create(SortingVisualization.prototype); 274 | CocktailSort.prototype.constructor = SortingVisualization; 275 | 276 | CocktailSort.prototype.sort = function(y, left, right) { 277 | var swapped = true; 278 | while (swapped) { 279 | swapped = false; 280 | for (var i = left; i < right - 1; i++) { 281 | swapped = this.compare_and_swap(y, i + 1, i) || swapped; 282 | } 283 | if (!swapped) { 284 | break; 285 | } 286 | swapped = false; 287 | for (var i = right - 1; i >= 0; i--) { 288 | swapped = this.compare_and_swap(y, i + 1, i) || swapped; 289 | } 290 | } 291 | }; 292 | 293 | 294 | function OddEvenSort() { 295 | SortingVisualization.apply(this, arguments); 296 | } 297 | 298 | OddEvenSort.prototype = Object.create(SortingVisualization.prototype); 299 | OddEvenSort.prototype.constructor = SortingVisualization; 300 | 301 | OddEvenSort.prototype.sort = function(y, left, right) { 302 | var sorted = false; 303 | while (!sorted) { 304 | sorted = true; 305 | for (var i = left + 1; i < right; i += 2) { 306 | sorted = !this.compare_and_swap(y, i + 1, i) && sorted; 307 | } 308 | 309 | for (var i = left; i < right; i += 2) { 310 | sorted = !this.compare_and_swap(y, i + 1, i) && sorted; 311 | } 312 | } 313 | }; 314 | 315 | 316 | function ShellSort() { 317 | SortingVisualization.apply(this, arguments); 318 | } 319 | 320 | ShellSort.prototype = Object.create(SortingVisualization.prototype); 321 | ShellSort.prototype.constructor = SortingVisualization; 322 | 323 | ShellSort.prototype.sort = function(y, left, right) { 324 | var gaps = options.gaps.split(','); 325 | for (var i = 0; i < gaps.length; i++) { 326 | gaps[i] = parseInt(gaps[i]); 327 | } 328 | gaps.sort(function(a, b) {return b - a}); 329 | 330 | for (var k = 0; k < gaps.length; k++) { 331 | var gap = gaps[k]; 332 | for (var i = gap; i <= right; i++) { 333 | var temp = this.data[y][i]; 334 | for (var j = i; j >= gap && this.cmp(temp, this.data[y][j - gap]); j -= gap) { 335 | this.swap(y, j, j - gap); 336 | } 337 | //this.data[y][j] = temp; 338 | } 339 | } 340 | }; 341 | 342 | 343 | function CombSort() { 344 | SortingVisualization.apply(this, arguments); 345 | } 346 | 347 | CombSort.prototype = Object.create(SortingVisualization.prototype); 348 | CombSort.prototype.constructor = SortingVisualization; 349 | 350 | CombSort.prototype.sort = function(y, left, right) { 351 | var gap = right - left; 352 | var sorted = false; 353 | 354 | while (!sorted) { 355 | gap = Math.max(Math.floor(gap / options.shrink_factor), 1); 356 | sorted = gap === 1; 357 | 358 | for (var i = left; i + gap <= right; i++) { 359 | sorted = !this.compare_and_swap(y, i + gap, i) && sorted; 360 | } 361 | } 362 | }; 363 | 364 | 365 | function QuickSort() { 366 | SortingVisualization.apply(this, arguments); 367 | } 368 | 369 | QuickSort.prototype = Object.create(SortingVisualization.prototype); 370 | QuickSort.prototype.constructor = SortingVisualization; 371 | 372 | QuickSort.prototype.pivot = function(y, left, right) { 373 | if (options.pivot === 'Start') { 374 | return left; 375 | } else if (options.pivot === 'Middle') { 376 | return left + Math.floor((right - left) / 2); 377 | } else if (options.pivot === 'End') { 378 | return right; 379 | } else if (options.pivot === 'Random') { 380 | return left + Math.floor(random() * (right - left)); 381 | } 382 | } 383 | 384 | QuickSort.prototype.partition = function(y, pivot, left, right) { 385 | var store_index = left, 386 | pivot_value = this.data[y][pivot]; 387 | 388 | this.swap(y, pivot, right); 389 | 390 | for (var v = left; v < right; v++) { 391 | if (this.cmp(this.data[y][v], pivot_value)) { 392 | this.swap(y, v, store_index++); 393 | } 394 | } 395 | 396 | this.swap(y, right, store_index); 397 | 398 | return store_index; 399 | }; 400 | 401 | QuickSort.prototype.sort = function(y, left, right) { 402 | if (left > right) { 403 | return; 404 | } 405 | 406 | var pivot = this.pivot(y, left, right); 407 | var new_pivot = this.partition(y, pivot, left, right); 408 | 409 | this.sort(y, left, new_pivot - 1); 410 | this.sort(y, new_pivot + 1, right); 411 | }; 412 | 413 | 414 | function MergeSort() { 415 | NonSwappingSortingVisualization.apply(this, arguments); 416 | } 417 | 418 | MergeSort.prototype = Object.create(NonSwappingSortingVisualization.prototype); 419 | MergeSort.prototype.constructor = NonSwappingSortingVisualization; 420 | 421 | MergeSort.prototype.merge = function(y, left_start, left_end, right_start, right_end) { 422 | var result = []; 423 | 424 | while (left_start <= left_end || right_start <= right_end) { 425 | if (left_start <= left_end && right_start <= right_end) { 426 | if (this.cmp(this.data[y][left_start], this.data[y][right_start])) { 427 | result.push(this.data[y][left_start++]); 428 | } else { 429 | result.push(this.data[y][right_start++]); 430 | } 431 | } else if (left_start <= left_end) { 432 | result.push(this.data[y][left_start++]); 433 | } else { 434 | result.push(this.data[y][right_start++]); 435 | } 436 | } 437 | 438 | return result; 439 | } 440 | 441 | MergeSort.prototype.sort = function(y, left, right) { 442 | if (right > left) { 443 | var mid = Math.floor((right + left) / 2); 444 | this.sort(y, left, mid); 445 | this.sort(y, mid + 1, right); 446 | var merge = this.merge(y, left, mid, mid + 1, right); 447 | for (var i = 0; i < merge.length; i++) { 448 | this.data[y][left + i] = merge[i]; 449 | this.stack[y].push([left + i, [merge[i]]]); 450 | } 451 | } 452 | }; 453 | 454 | 455 | function HeapSort() { 456 | SortingVisualization.apply(this, arguments); 457 | } 458 | 459 | HeapSort.prototype = Object.create(SortingVisualization.prototype); 460 | HeapSort.prototype.constructor = SortingVisualization; 461 | 462 | HeapSort.prototype.max_heapify = function(y, i, length) { 463 | while (true) { 464 | var left = i * 2 + 1; 465 | var right = i * 2 + 2; 466 | var largest = i; 467 | 468 | if (left < length && this.cmp(this.data[y][largest], this.data[y][left])) { 469 | largest = left; 470 | } 471 | 472 | if (right < length && this.cmp(this.data[y][largest], this.data[y][right])) { 473 | largest = right; 474 | } 475 | 476 | if (i === largest) { 477 | break; 478 | } 479 | 480 | this.swap(y, i, largest); 481 | i = largest; 482 | } 483 | }; 484 | 485 | HeapSort.prototype.heapify = function(y, length) { 486 | for (var i = Math.floor(length / 2); i >= 0; i--) { 487 | this.max_heapify(y, i, length); 488 | } 489 | }; 490 | 491 | HeapSort.prototype.sort = function(y, left, right) { 492 | this.heapify(y, right); 493 | 494 | for (var i = right; i > 0; i--) { 495 | this.swap(y, i, 0); 496 | this.max_heapify(y, 0, i - 1); 497 | } 498 | }; 499 | 500 | 501 | function RadixSort() { 502 | NonSwappingSortingVisualization.apply(this, arguments); 503 | } 504 | 505 | RadixSort.prototype = Object.create(NonSwappingSortingVisualization.prototype); 506 | RadixSort.prototype.constructor = NonSwappingSortingVisualization; 507 | 508 | RadixSort.prototype.sort = function(y, left, right) { 509 | var data = this.data[y]; 510 | 511 | var maxval = Math.max.apply(null, this.data[y].slice(left, right + 1)); 512 | 513 | var it = 0; 514 | while (Math.pow(this.options.base, it) <= maxval) { 515 | var buckets = []; 516 | for (var i = 0; i < this.options.base; i++) { 517 | buckets.push([]); 518 | } 519 | 520 | for (var i = left; i <= right; i++) { 521 | var digit = Math.floor(data[i] / Math.pow(this.options.base, it)) % this.options.base; 522 | buckets[digit].push(data[i]); 523 | } 524 | 525 | data = []; 526 | var start = left; 527 | for (var i = 0; i < buckets.length; i++) { 528 | for (var j = 0; j < buckets[i].length; j++) { 529 | data.push(buckets[i][j]); 530 | this.stack[y].push([start++, [buckets[i][j]]]); 531 | } 532 | } 533 | 534 | it++; 535 | } 536 | }; 537 | 538 | 539 | function SlowSort() { 540 | SortingVisualization.apply(this, arguments); 541 | } 542 | 543 | SlowSort.prototype = Object.create(SortingVisualization.prototype); 544 | SlowSort.prototype.constructor = SortingVisualization; 545 | 546 | SlowSort.prototype.sort = function(y, left, right) { 547 | if (right - left >= 1) { 548 | var m = Math.floor((right + left) / 2); 549 | this.sort(y, left, m); 550 | this.sort(y, m + 1, right); 551 | this.compare_and_swap(y, right, m); 552 | this.sort(y, left, right - 1); 553 | } 554 | }; 555 | 556 | 557 | function BogoSort() { 558 | SortingVisualization.apply(this, arguments); 559 | } 560 | 561 | BogoSort.prototype = Object.create(SortingVisualization.prototype); 562 | BogoSort.prototype.constructor = SortingVisualization; 563 | 564 | BogoSort.prototype.sort = function(y, left, right) { 565 | }; 566 | 567 | BogoSort.prototype.step = function(have_to_draw) { 568 | // Can't create a list of swaps, as it would create on average O(n!) elements 569 | var all_sorted = true; 570 | for (var y = 0; y < this.data.length; y++) { 571 | if (!this.is_sorted(y)) { 572 | all_sorted = false; 573 | shuffle(this.data[y], 0, this.data[y].length); 574 | } 575 | } 576 | 577 | if (all_sorted || have_to_draw) { 578 | draw(this.ctx, this.data, false); 579 | } 580 | 581 | return all_sorted; 582 | } 583 | 584 | 585 | var options; 586 | 587 | function draw(ctx, data, resize) { 588 | if (resize) { 589 | ctx.canvas.width = options.width * options.zoom; 590 | ctx.canvas.height = options.height * options.zoom; 591 | 592 | ctx.canvas.style.width = canvas.width + 'px'; 593 | ctx.canvas.style.height = canvas.height + 'px'; 594 | } 595 | 596 | for (var y = 0; y < data.length; y++) { 597 | for (var x = 0; x < data[y].length; x++) { 598 | ctx.fillStyle = color_maps[options.color_map](data[y][x] / data[y].length); 599 | ctx.fillRect(x * options.zoom, y * options.zoom, options.zoom, options.zoom); 600 | } 601 | } 602 | } 603 | 604 | document.addEventListener('DOMContentLoaded', function() { 605 | // debugger 606 | var canvas = document.getElementById('canvas'); 607 | var ctx = canvas.getContext('2d'); 608 | 609 | var timelapse_canvas = document.getElementById('timelapse_canvas'); 610 | var timelapse_ctx = timelapse_canvas.getContext('2d'); 611 | 612 | var processing = false; 613 | 614 | var data, sort_visualization; 615 | 616 | var algorithms = { 617 | "Bubble sort": BubbleSort, 618 | "Insertion sort": InsertionSort, 619 | "Stooge sort": StoogeSort, 620 | "Selection sort": SelectionSort, 621 | "Cocktail sort": CocktailSort, 622 | "Odd-even sort": OddEvenSort, 623 | "Shell sort": ShellSort, 624 | "Comb sort": CombSort, 625 | "Quick sort": QuickSort, 626 | "Merge sort": MergeSort, 627 | "Heap sort": HeapSort, 628 | "Radix sort": RadixSort, 629 | "Slow sort": SlowSort, 630 | "Bogo sort": BogoSort 631 | } 632 | 633 | options = { 634 | algorithm: 'Bubble sort', 635 | pivot: 'Start', 636 | shrink_factor: 1.3, 637 | base: 2, 638 | gaps: '701, 301, 132, 57, 23, 10, 4, 1', 639 | generate: 'Increasing', 640 | shuffle: function() { 641 | for (var y = 0; y < data.length; y++) { 642 | shuffle(data[y], 0, data[y].length); 643 | } 644 | draw(ctx, data, false); 645 | }, 646 | width: 50, 647 | height: 1, 648 | speed: 25, 649 | zoom: 4, 650 | color_map: 'viridis', 651 | start: function() { 652 | hide_gui_element(gui, 'shuffle', true); 653 | hide_gui_element(gui, 'start', true); 654 | hide_gui_element(gui, 'stop', false); 655 | 656 | processing = true; 657 | 658 | var algorithm = algorithms[options.algorithm]; 659 | sort_visualization = new algorithm(data, options, ctx); 660 | 661 | for (var y = 0; y < options.height; y++) { 662 | sort_visualization.sort(y, 0, options.width - 1); 663 | } 664 | sort_visualization.sort_end(); 665 | 666 | var total_frames = (sort_visualization.stack || sort_visualization.swaps)[0].length; 667 | 668 | var captures = Math.min( 669 | total_frames, 670 | Math.max(sort_visualization.data.length, sort_visualization.data[0].length) 671 | ); 672 | 673 | var current_frame = 0; 674 | var timelapse_y = 0; 675 | 676 | timelapse_canvas.width = canvas.width; 677 | timelapse_canvas.height = captures * options.zoom; 678 | timelapse_canvas.style.width = timelapse_canvas.width + 'px'; 679 | timelapse_canvas.style.height = timelapse_canvas.height + 'px'; 680 | 681 | function step() { 682 | if (!processing) { 683 | return; 684 | } 685 | for (var i = 0; i < options.speed; i++) { 686 | if (sort_visualization.step(i === options.speed - 1)) { 687 | options.stop(); 688 | return; 689 | } 690 | 691 | if (Math.floor(current_frame / total_frames * captures) !== Math.floor((current_frame + 1) / total_frames * captures)) { 692 | for (var x = 0; x < sort_visualization.data[0].length; x++) { 693 | timelapse_ctx.fillStyle = color_maps[options.color_map](sort_visualization.data[0][x] / sort_visualization.data[0].length); 694 | timelapse_ctx.fillRect(x * options.zoom, timelapse_y * options.zoom, options.zoom, options.zoom); 695 | } 696 | timelapse_y++; 697 | } 698 | 699 | current_frame++; 700 | } 701 | requestAnimationFrame(step); 702 | } 703 | 704 | step(); 705 | }, 706 | stop: function() { 707 | hide_gui_element(gui, 'shuffle', false); 708 | hide_gui_element(gui, 'start', false); 709 | hide_gui_element(gui, 'stop', true); 710 | 711 | data = sort_visualization.data; 712 | 713 | processing = false; 714 | }, 715 | distribution: { 716 | alpha: 1, 717 | beta: 1 718 | } 719 | }; 720 | 721 | function resize() { 722 | if (processing) { 723 | return; 724 | } 725 | 726 | data = []; 727 | for (var y = 0; y < options.height; y++) { 728 | data.push([]); 729 | if (options.generate === 'Increasing') { 730 | for (var x = 0; x < options.width; x++) { 731 | data[y].push(x); 732 | } 733 | } else if (options.generate === 'Decreasing') { 734 | for (var x = options.width - 1; x >= 0; x--) { 735 | data[y].push(x); 736 | } 737 | } 738 | } 739 | 740 | draw(ctx, data, true); 741 | } 742 | 743 | resize(); 744 | 745 | var gui = new dat.GUI(); 746 | gui.add(options, 'algorithm', Object.keys(algorithms)).name('Algorithm').onChange(function() { 747 | hide_gui_element(gui, 'pivot', options.algorithm !== 'Quick sort'); 748 | hide_gui_element(gui, 'shrink_factor', options.algorithm !== 'Comb sort'); 749 | hide_gui_element(gui, 'base', options.algorithm !== 'Radix sort'); 750 | hide_gui_element(gui, 'gaps', options.algorithm !== 'Shell sort'); 751 | }); 752 | gui.add(options, 'pivot', ['Start', 'Middle', 'End', 'Random']).name('Pivot'); 753 | gui.add(options, 'shrink_factor', 1.001, 3).name('Shrink factor'); 754 | gui.add(options, 'base', 2, 10, 1).name('Base'); 755 | gui.add(options, 'gaps').name('Gaps'); 756 | gui.add(options, 'generate', ['Increasing', 'Decreasing']).name('Generate').onChange(resize); 757 | gui.add(options, 'shuffle').name('Shuffle'); 758 | 759 | gui.add(options, 'width', 1, window.innerWidth, 1).name('Width').onChange(resize); 760 | gui.add(options, 'height', 1, window.innerHeight, 1).name('Height').onChange(resize); 761 | gui.add(options, 'speed', 1, 25, 1).name('Speed'); 762 | gui.add(options, 'zoom', 1, 10, 1).name('Zoom').onChange(function() { 763 | draw(ctx, processing ? sort_visualization.data : data, true); 764 | }); 765 | gui.add(options, 'color_map', Object.keys(color_maps)).name('Color map').onChange(function() { 766 | draw(ctx, processing ? sort_visualization.data : data, false); 767 | }); 768 | 769 | gui.add(options, 'start').name('Start'); 770 | gui.add(options, 'stop').name('Stop'); 771 | 772 | var distribution_folder = gui.addFolder('Beta distribution'); 773 | distribution_folder.add(options.distribution, 'alpha', 0.01).name('Alpha'); 774 | distribution_folder.add(options.distribution, 'beta', 0.01).name('Beta'); 775 | 776 | hide_gui_element(gui, 'stop', true); 777 | hide_gui_element(gui, 'pivot', true); 778 | hide_gui_element(gui, 'shrink_factor', true); 779 | hide_gui_element(gui, 'base', true); 780 | hide_gui_element(gui, 'gaps', true); 781 | }); 782 | --------------------------------------------------------------------------------