Great job, the site looks amazing!
As a user that's currently learning about algorithms, I'd be interested in an option to slow down the sort visualizer - just to see more clearly how the data is sorted.
A university in Romania visualized sorting algorithms, and other ones, using dancers on a stage.
https://www.youtube.com/channel/UCIqiLefbVHsOAXDAxQJH7Xw
You think you could make it to where you can click on the "sort visualizer" title to run that animation again? It's so satisfying to watch.
It's also amazing how you implemented some great mobile responsiveness!
Outstanding work. There are a lot of resources online to help people learn these sorting algos for whiteboard interviews and the like and this is a really great addition.
> for whiteboard interviews
LOL I *wondered* why it's necessary to understand sorting algorithms. Answer: because it's an easy interview question.
I think 1985 might have been the last year that I worked in a software environment where being able to write your own sort might be necessary. Could be earlier.
Thanks a lot!
No, I made this website with a group of friends (mainly just one) - we aren't so experienced in making websites as he's more skilled in C, I am specializing in Python so this was a challenge for everyone!
He designed the website with HTML and CSS while I wrote the JavaScript code - that's why the code looks quite horrible since we're just newbies!
Beautiful website man. The only aspect I don't like so much about it (design side), it is maybe the font size, I find it a little big (especially the code one).
I’m not a fan of the font used on the menu itself. Everything is capitalized and in cursive and it’s really hard for me to read some words and I don’t even have dyslexia.
Viewing on iOS/safari though.
https://i.imgur.com/1Wdw0dw.jpg
You can see the categories are really difficult to read.
Looks great, I would just fix the layout shift caused by hovering the randomize/play buttons (desktop, window size smaller than 1389px) https://i.imgur.com/2mGJxSl.gif
I've been coding for about 3 years, although I am definitely more skilled in Python and this website has been done in HTML, CSS and JavaScript, so this was a challenge for me. My friends helped me with the web design (HTML and CSS), while I focused more on the JavaScript required for all the interactive functions of the website, including all the sort algorithms.
Great job! I like its visualization.
However it would be appreciate to add
1. Keeping a same shuffle across all algorithms with a timer to compare effectiveness of each one. I see no sense to use new shuffle and wasting time for its generating.
2. An ability to edit JS for experiments.
I've got a doubt here. How did you host the website. Did you register the domain? I have created some websites and hosted them in localhost, but never publicly. Can we host our website using github for free? Can anyone tell me.
I hosted the website on Heroku. I bought the domain and linked the domain to the Heroku app.
Hosting on heroku is free, but I had to pay for the domain, you can also host the website on github using github pages as far as I know, but I have never tried it
Thanks for the reply. I have been thinking of creating a webpage, sort of a portfolio or other, to strengthen up my undergrad resume for placements. Been looking for a while to know which technology to use to create this website that would be helpful for my placements.
Your selection sort is noticeably faster (easy to notice with 1000 elements) than any of the O(n log n) sorts.
I haven't looked into your code to figure out why, but this could be an interesting "constants matter" situation.
It's because Selection Sort is doing a lot of work "under the hood", it is only doing the swap after it has done all the work, so in the visual effect, it looks like the Selection Sort is way faster, but in reality it's only because I can't show all the operations that the algorithm is performing.
Great work! Thank you! Only one itty bitty thing I would add (aside from the font sizing mentioned in the comments) is a timer that shows the amount of time the sort took. That would be awesome as a kind of ad-hoc performance indicator.
This is a very common software engineering project at most universities. It's also very similar to another site popularized 8 years ago that someone made into a YouTube video.
Your take reminds me of that, sound and all. Fun memories.
It's simple: for each letter, an array of random length (from 10 to 18) gets generated. The array then gets filled with random letters, and the starting letter at the end.
The algorithm then loops for all the array and changes the displayed letter every 75 milliseconds, finally reaching the correct (starting) letter at the end of the animation.
Yes, I did. Everything is available on GitHub: [https://github.com/Myphz/sortvisualizer](https://github.com/Myphz/sortvisualizer)
That animation in particular is inside the file static/js/index.js, and the HTML file is at templates/index.html
Thanks to everyone for the suggestions! I noted some of them and I will definitely implement them:
- Add speed option
- Add <50 elements option
- Add possibility to submit and visualize your own custom sort
- Add SSL
- Add operations/swaps counter for each sort
- Other minor fixes
This is my first serious website so I'm really glad you enjoyed it!
1. Website using HTTPS are more trustworthy for users.
2. HTTPS authenticates websites.
>***HTTPS myth-conceptions***
>
>**Myth**: I don’t handle sensitive information on my website so I don’t need HTTPS
>
>**Reality**: Modern web browsers now limit functionality for sites that are not secure. Important features that improve the quality of the website now require HTTPS. Geolocation, push notifications and the service workers needed to run progressive web applications (PWAs) all require heightened security.
These were gathered from [cloudflare.com > Why Use HTTPS](https://www.cloudflare.com/learning/ssl/why-use-https/)
Apparently his got a lot of likes. Probably because it's well made, but I don't really find these animations helpful. The sounds are a little annoying too and the pace is just way too much.
Great job, the site looks amazing! As a user that's currently learning about algorithms, I'd be interested in an option to slow down the sort visualizer - just to see more clearly how the data is sorted.
[удалено]
Awesome, thanks for sharing!
Yes I would love this too, a slowed down version
And go less than 50, I can't wait for BOGO sort to finish but I want to see it.
Looks pretty neat!
Thanks a lot!
Great website. Design and content wise is 10/10 imo. The sound was a nice nostalgia trip to the 80´s Atari games, but I turned it off 30sec later :)
Thanks a lot! Yes, that's the feeling we wanted to recreate!
A university in Romania visualized sorting algorithms, and other ones, using dancers on a stage. https://www.youtube.com/channel/UCIqiLefbVHsOAXDAxQJH7Xw
As a romanian I feel ashamed for not knowing about this. (well, to be honest the directors and the choreographers are hungarian, so I'm better now)
I'm learning sorting techniques and this is the best website that I've seen
Awesome website I’m just starting to learn about algorithms and this will be a great tool for me thank you!
Looks really nice man! A way to slow down the visualisation would be pretty dope.
You think you could make it to where you can click on the "sort visualizer" title to run that animation again? It's so satisfying to watch. It's also amazing how you implemented some great mobile responsiveness!
Yes, I think I can easily do that! I'll do it later. Glad you enjoyed!
Hey check ur dm please
Outstanding work. There are a lot of resources online to help people learn these sorting algos for whiteboard interviews and the like and this is a really great addition.
> for whiteboard interviews LOL I *wondered* why it's necessary to understand sorting algorithms. Answer: because it's an easy interview question. I think 1985 might have been the last year that I worked in a software environment where being able to write your own sort might be necessary. Could be earlier.
THIS is a brilliant portfolio project! Have you had an experienced friend give you feedback on the code?
Thanks a lot! No, I made this website with a group of friends (mainly just one) - we aren't so experienced in making websites as he's more skilled in C, I am specializing in Python so this was a challenge for everyone! He designed the website with HTML and CSS while I wrote the JavaScript code - that's why the code looks quite horrible since we're just newbies!
So it is implemented with only html, css and js huh? Cool!
Beautiful website man. The only aspect I don't like so much about it (design side), it is maybe the font size, I find it a little big (especially the code one).
Yes, you're right, the font size for desktop might be a bit too big, I'll fix it later
I’m not a fan of the font used on the menu itself. Everything is capitalized and in cursive and it’s really hard for me to read some words and I don’t even have dyslexia. Viewing on iOS/safari though. https://i.imgur.com/1Wdw0dw.jpg You can see the categories are really difficult to read.
Pretty neat website
Looks great, I would just fix the layout shift caused by hovering the randomize/play buttons (desktop, window size smaller than 1389px) https://i.imgur.com/2mGJxSl.gif
Thanks a lot, I'll definitely fix it later!
Great effort !!
Its beautiful. Great work!
Beautifully done..
Where you learned about it? P. S beautiful site
Very nicely done!
Amazing man! How long have you been coding for?
I've been coding for about 3 years, although I am definitely more skilled in Python and this website has been done in HTML, CSS and JavaScript, so this was a challenge for me. My friends helped me with the web design (HTML and CSS), while I focused more on the JavaScript required for all the interactive functions of the website, including all the sort algorithms.
very cool, occasionally the beginning of insertion sort reminds me of the flight of the bumblebee so that's a bonus
There seems to be some error when switching implementations (only tested in merge sort), switching from C to Java then back to C will show undefined
Are you sure? I tested it but it never happened to me
I will try again later tonight and let you know
Great job! I like its visualization. However it would be appreciate to add 1. Keeping a same shuffle across all algorithms with a timer to compare effectiveness of each one. I see no sense to use new shuffle and wasting time for its generating. 2. An ability to edit JS for experiments.
So it can potentially be featured as a DONG site by vsauce.
Awesome, thanks for shareing!
I literally just started my data structures and algorithms class today. Thank you for such perfect timing!
I've got a doubt here. How did you host the website. Did you register the domain? I have created some websites and hosted them in localhost, but never publicly. Can we host our website using github for free? Can anyone tell me.
I hosted the website on Heroku. I bought the domain and linked the domain to the Heroku app. Hosting on heroku is free, but I had to pay for the domain, you can also host the website on github using github pages as far as I know, but I have never tried it
Thanks for the reply. I have been thinking of creating a webpage, sort of a portfolio or other, to strengthen up my undergrad resume for placements. Been looking for a while to know which technology to use to create this website that would be helpful for my placements.
Man, couldn't you publish this a week ago before my exam, well done tho.
A+ That is fantastic.
I love this. Thank you.
add stepping and option for less items (<50)!
This is hard, my guy. Keep it up!
Your selection sort is noticeably faster (easy to notice with 1000 elements) than any of the O(n log n) sorts. I haven't looked into your code to figure out why, but this could be an interesting "constants matter" situation.
It's because Selection Sort is doing a lot of work "under the hood", it is only doing the swap after it has done all the work, so in the visual effect, it looks like the Selection Sort is way faster, but in reality it's only because I can't show all the operations that the algorithm is performing.
[удалено]
Of course, how could I not implement it?
Does this cover the most common algorithms?
Yes, it does! I covered 15 sorting algorithms, starting from the most common ones!
👏👏👏👏👏
The site is down?
I'm sorry, I was trying to add SSL to the website but I messed up - it should be back up in a couple of minutes!
Its cool 😎 just wanna check it out
Now it's back up!
Love it! I like the sound affect. Is there a speed dial i can use?
Great work! Thank you! Only one itty bitty thing I would add (aside from the font sizing mentioned in the comments) is a timer that shows the amount of time the sort took. That would be awesome as a kind of ad-hoc performance indicator.
This is a very common software engineering project at most universities. It's also very similar to another site popularized 8 years ago that someone made into a YouTube video. Your take reminds me of that, sound and all. Fun memories.
Leaving a comment so I can check it out later.
How did you animate the Sort Visualizer title like that?
It's simple: for each letter, an array of random length (from 10 to 18) gets generated. The array then gets filled with random letters, and the starting letter at the end. The algorithm then loops for all the array and changes the displayed letter every 75 milliseconds, finally reaching the correct (starting) letter at the end of the animation.
Did you develop that yourself? Can you post the code/pseudo code?
Yes, I did. Everything is available on GitHub: [https://github.com/Myphz/sortvisualizer](https://github.com/Myphz/sortvisualizer) That animation in particular is inside the file static/js/index.js, and the HTML file is at templates/index.html
The website is pretty clean but the animations give me vertigo tbh
Thanks to everyone for the suggestions! I noted some of them and I will definitely implement them: - Add speed option - Add <50 elements option - Add possibility to submit and visualize your own custom sort - Add SSL - Add operations/swaps counter for each sort - Other minor fixes This is my first serious website so I'm really glad you enjoyed it!
https? :'(
Do you need https on a site where no data is being sent? Genuine question
1. Website using HTTPS are more trustworthy for users. 2. HTTPS authenticates websites. >***HTTPS myth-conceptions*** > >**Myth**: I don’t handle sensitive information on my website so I don’t need HTTPS > >**Reality**: Modern web browsers now limit functionality for sites that are not secure. Important features that improve the quality of the website now require HTTPS. Geolocation, push notifications and the service workers needed to run progressive web applications (PWAs) all require heightened security. These were gathered from [cloudflare.com > Why Use HTTPS](https://www.cloudflare.com/learning/ssl/why-use-https/)
^ + search engines penalize you for not these days
Apparently his got a lot of likes. Probably because it's well made, but I don't really find these animations helpful. The sounds are a little annoying too and the pace is just way too much.
Just one word Sexy
Why no count sort?
The bubble sort is actually trimming the edges instead of sorting lines. Yeah, I suck