diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..403adbc --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..d3aa313 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Najmul H. Bappy + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..09deec5 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# algo + +## Project setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm run serve +``` + +### Compiles and minifies for production +``` +npm run build +``` + +### Lints and fixes files +``` +npm run lint +``` + +### Customize configuration +See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..e955840 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/base.js b/base.js deleted file mode 100644 index be58444..0000000 --- a/base.js +++ /dev/null @@ -1,116 +0,0 @@ -// class for sorting -class sortData { - constructor(data) { - this.data = data; - } - selectionSort() {} - bubbleSort() {} - stopSort() { - return false; - } -} - -//get selected algorithm -function getAlgo() { - var algo = document.getElementsByName("algo-name"); - for (var i = 0; i < algo.length; i++) { - if (algo[i].checked) { - return algo[i].value; - } - } -} - -// function for changing specific bar color filtering with data -// d => single data, color => hexa color code -function changeBarColor(d, color) { - var smi = heightScale(d); - svg.selectAll("rect").each(function (d, i) { - if (smi == d3.select(this).attr("height")) { - d3.select(this).style("fill", color); - } - }); -} - -// function for generating random data -function randomData(max, range) { - data = []; - n = 0; - while (n < max) { - d = Math.floor(Math.random() * range) + 1; - if (data.includes(d) != true) { - data.push(d); - n++; - } - } - return data; -} - -//function for creating chart. Note: data is an array of integer value -function createChart(data) { - svg = d3.select("#chart").append("svg"); - - bandScale = d3.scaleBand().domain(data).range([0, areaWidth]).padding(0.1); - - svg.attr("width", areaWidth).attr("height", areaHeight); - - svg - .selectAll("rect") - .data(data) - .enter() - .append("rect") - .attr("x", function (d, i) { - return bandScale(d); - }) - .attr("y", function (d) { - return areaHeight - heightScale(d); - }) - .attr("width", function () { - return bandScale.bandwidth(); - }) - .attr("height", function (d) { - return heightScale(d); - }) - .style("fill", "rgb(173, 216, 230)"); - - svg - .selectAll("text") - .data(data) - .enter() - .append("text") - .text(function (d) { - return d; - }) - .attr("x", function (d, i) { - return bandScale(d) + 10; - }) - .attr("y", function (d) { - return areaHeight - 15; - }) - .style("width", bandScale.bandwidth) - .style("fill", "black") - .style("font-size", areaWidth / data.length / 3) - .style("font-family", "sans-serif") - .style("z-index", 1); -} - -// bar visualization while sorting. Bar Swapping -function swapBar(data) { - var dOrder = data.map(function (d) { - return d; - }); - bandScale.domain(dOrder); - svg - .transition() - .duration(750) - .selectAll("rect") - .attr("x", function (d) { - return bandScale(d); - }); - svg - .transition() - .duration(750) - .selectAll("text") - .attr("x", function (d) { - return bandScale(d) + 5; - }); -} diff --git a/function.js b/function.js deleted file mode 100644 index 71ad81e..0000000 --- a/function.js +++ /dev/null @@ -1,121 +0,0 @@ -var svg, - bandScale, - text, - maxElement = 15, - dataRange = maxElement * 2, - areaHeight = 150, - areaWidth = 800, - time = 300, - traverseColor = "#ffcaa1", - smallestColor = "#ab87ff", - unsortedColor = "#add8e6"; - -// generating random data -var data = randomData(maxElement, dataRange); -function setSpeed() { - time = document.getElementById("speed").value; -} -//a d3 function for scaling height for all the data this function -var heightScale = d3 - .scaleLinear() - .domain([0, d3.max(data)]) - .range([0, areaHeight]); - -// initialized a chart with random value -createChart(data); - -let Sort = new sortData(data); -Sort.selectionSort = function () { - const timer = (ms) => new Promise((res) => setTimeout(res, ms)); - async function sort() { - // We need to wrap the loop into an async function for this to work - for (var i = 0; i < data.length; i++) { - smallest = data[i]; - pos = i; - changeBarColor(smallest, smallestColor); - await timer(time); - for (var j = i + 1; j < data.length; j++) { - changeBarColor(data[j], traverseColor); - if (smallest > data[j]) { - await timer(time); - changeBarColor(smallest, unsortedColor); - smallest = data[j]; - pos = j; - } - - changeBarColor(smallest, smallestColor); - await timer(time); - changeBarColor(data[j], unsortedColor); - } - if (data[i] != smallest) { - temp = data[i]; - data[i] = smallest; - data[pos] = temp; - - var swooshAudio = new Audio( - "/algorithm-visualizer/sound-effects/swoosh.mp3" - ); - swooshAudio.play(); - } - changeBarColor(smallest, "#56b4d3"); - swapBar(data); - await timer(time); // then the created Promise can be awaited - } - svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio( - "/algorithm-visualizer/sound-effects/complete.mp3" - ); - completeAudio.play(); - } - sort(); -}; - -Sort.bubbleSort = function () { - const timer = (ms) => new Promise((res) => setTimeout(res, ms)); - async function sort() { - var temp; - for (i = 0; i < data.length - 1; i++) { - changeBarColor(data[0], smallestColor); - await timer(time); - for (j = 0; j < data.length - i - 1; j++) { - await timer(time); - changeBarColor(data[j + 1], traverseColor); - await timer(time); - if (data[j] > data[j + 1]) { - temp = data[j]; - data[j] = data[j + 1]; - data[j + 1] = temp; - changeBarColor(data[j + 1], smallestColor); - var swooshAudio = new Audio("./sound-effects/swoosh.mp3"); - swooshAudio.play(); - swapBar(data); - await timer(time); - } else { - changeBarColor(data[j + 1], smallestColor); - } - changeBarColor(data[j], unsortedColor); - } - } - svg.selectAll("rect").style("fill", "#56b4d3"); - var completeAudio = new Audio( - "/algorithm-visualizer/sound-effects/complete.mp3" - ); - completeAudio.play(); - } - sort(); -}; - -document.getElementById("sort").addEventListener("click", function () { - if (getAlgo() == "selection-sort") { - Sort.selectionSort(); - } else if (getAlgo() == "bubble-sort") { - Sort.bubbleSort(); - } -}); - -document.getElementById("random-data").addEventListener("click", function () { - var data = randomData(maxElement, dataRange); - Sort.stopSort(); - svg.remove(); - createChart(data); -}); diff --git a/index.html b/index.html deleted file mode 100644 index e10623d..0000000 --- a/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - Sorting Visualizer - - - -

Sorting Visualizer

- -
-
- - -
-
- -
-
-
-
-
-
- -
-
- - - - - diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..4aafc5f --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "esnext", + "baseUrl": "./", + "moduleResolution": "node", + "paths": { + "@/*": [ + "src/*" + ] + }, + "lib": [ + "esnext", + "dom", + "dom.iterable", + "scripthost" + ] + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..a8fdca3 --- /dev/null +++ b/package.json @@ -0,0 +1,61 @@ +{ + "name": "algo", + "version": "1.0.0", + "private": true, + "description": "* Sorting\r * Bubble Sort\r * Insertion Sort\r * Searching\r * Linear Search\r * Binary Search", + "author": "", + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "main": "index.js", + "dependencies": { + "core-js": "^3.8.3", + "vue": "^3.2.13", + "vue-router": "^4.2.2" + }, + "devDependencies": { + "@babel/core": "^7.12.16", + "@babel/eslint-parser": "^7.12.16", + "@vue/cli": "^5.0.8", + "@vue/cli-plugin-babel": "~5.0.0", + "@vue/cli-plugin-eslint": "~5.0.0", + "@vue/cli-service": "~5.0.0", + "eslint": "^7.32.0", + "eslint-plugin-vue": "^8.0.3" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended" + ], + "parserOptions": { + "parser": "@babel/eslint-parser" + }, + "rules": {} + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not dead", + "not ie 11" + ], + "_id": "algo@1.0.0", + "bugs": { + "url": "https://github.com/Bappy4u/algorithm-visualizer/issues" + }, + "homepage": "https://github.com/Bappy4u/algorithm-visualizer#readme", + "keywords": [], + "license": "ISC", + "readme": "ERROR: No README data found!", + "repository": { + "type": "git", + "url": "git+https://github.com/Bappy4u/algorithm-visualizer.git" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..ad561d9 --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Algorithm Visualizer + + + +
+ + + diff --git a/sound-effects/complete.mp3 b/sound-effects/complete.mp3 deleted file mode 100644 index ea9d34f..0000000 Binary files a/sound-effects/complete.mp3 and /dev/null differ diff --git a/sound-effects/swipe.mp3 b/sound-effects/swipe.mp3 deleted file mode 100644 index d935234..0000000 Binary files a/sound-effects/swipe.mp3 and /dev/null differ diff --git a/sound-effects/swoosh.mp3 b/sound-effects/swoosh.mp3 deleted file mode 100644 index ad2aefd..0000000 Binary files a/sound-effects/swoosh.mp3 and /dev/null differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..807ed1b --- /dev/null +++ b/src/App.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/algorithms/algorithms.vue b/src/algorithms/algorithms.vue new file mode 100644 index 0000000..1561276 --- /dev/null +++ b/src/algorithms/algorithms.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/algorithms/search/Search.vue b/src/algorithms/search/Search.vue new file mode 100644 index 0000000..a0ea2a3 --- /dev/null +++ b/src/algorithms/search/Search.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/algorithms/sort/Sort.vue b/src/algorithms/sort/Sort.vue new file mode 100644 index 0000000..5c7b10d --- /dev/null +++ b/src/algorithms/sort/Sort.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/components/AlgorithmVisualizer.vue b/src/components/AlgorithmVisualizer.vue new file mode 100644 index 0000000..253e53a --- /dev/null +++ b/src/components/AlgorithmVisualizer.vue @@ -0,0 +1,36 @@ + + + + + + diff --git a/src/components/menu.vue b/src/components/menu.vue new file mode 100644 index 0000000..d377540 --- /dev/null +++ b/src/components/menu.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/core/_helperFunctions.js b/src/core/_helperFunctions.js new file mode 100644 index 0000000..e69de29 diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..d30ece6 --- /dev/null +++ b/src/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue' +import App from './App.vue' +import router from './routes/router'; +createApp(App).use(router).mount('#app') diff --git a/src/routes/router.js b/src/routes/router.js new file mode 100644 index 0000000..df27c7e --- /dev/null +++ b/src/routes/router.js @@ -0,0 +1,18 @@ +import { createRouter, createWebHistory } from 'vue-router'; +import SearchView from './../algorithms/search/Search.vue'; +import homeView from './../algorithms/algorithms.vue'; +import SortView from './../algorithms/sort/Sort.vue'; + +const routes = [ + { path: '/', component: homeView }, + { path: '/search', component: SearchView }, + { path: '/sort', component: SortView }, + // Add more routes for other algorithm components +]; + +const router = createRouter({ + history: createWebHistory(), + routes, +}); + +export default router; diff --git a/style.css b/style.css deleted file mode 100644 index 7457299..0000000 --- a/style.css +++ /dev/null @@ -1,78 +0,0 @@ -* { - font-family: sans-serif; -} -.container { - display: flex; - justify-content: center; - align-items: center; -} -.bar-chart { - margin-top: 40px; - background-color: #eee; - padding: 50px 20px 30px 20px; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; -} - -h1 { - text-align: center; - font-family: sans-serif; - padding: 0; - margin: 30px 0 0 0; -} -button { - display: block; - margin: auto; - - padding: 5px 20px; - background: steelblue; - color: rgb(218, 238, 105); - font-size: 15px; - cursor: pointer; - font-weight: 600; -} -button { - margin: auto; - margin-top: 20px; - padding: 2px 30px; - border: none; -} - -button { - background-image: linear-gradient( - to right, - #348f50 0%, - #56b4d3 51%, - #348f50 100% - ); -} -button { - padding: 10px 30px; - text-align: center; - text-transform: uppercase; - transition: 0.5s; - background-size: 200% auto; - color: white; - box-shadow: 0 0 20px #eee; - border-radius: 10px; - display: block; -} - -button:hover { - background-position: right center; /* change the direction of the change here */ - color: #fff; - text-decoration: none; -} -form { - margin-top: 20px; - text-align: center; -} -label { - font-size: 20px; - cursor: pointer; -} -input { - cursor: pointer; -} -rect:hover { - cursor: pointer; -} diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..910e297 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,4 @@ +const { defineConfig } = require('@vue/cli-service') +module.exports = defineConfig({ + transpileDependencies: true +}) pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy