|
|
|
@ -2,28 +2,28 @@ |
|
|
|
<html lang="en"> |
|
|
|
<html lang="en"> |
|
|
|
<head> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<title>D3</title> |
|
|
|
<title>Sort Algorithm Walkthroughs</title> |
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css"> |
|
|
|
<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css"> |
|
|
|
<link rel="stylesheet" href="css/style.css"> |
|
|
|
<link rel="stylesheet" href="css/style.css"> |
|
|
|
</head> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<body> |
|
|
|
<h1>Sort algorithm walkthroughs</h1> |
|
|
|
<h1>Sort algorithm walkthroughs</h1> |
|
|
|
|
|
|
|
|
|
|
|
<h2>Using D3 to animate sort algorithms</h2> |
|
|
|
<h2>Using D3 to animate sort algorithms</h2> |
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p> |
|
|
|
Here are visualizations of common sorting algorithms. Use the comparisons counter |
|
|
|
Here are visualizations of common sorting algorithms. Use the comparisons counter |
|
|
|
and number of items to observe the performance of each randomized case. |
|
|
|
and number of items to observe the performance of each randomized case. |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
<br><br> |
|
|
|
<p> |
|
|
|
|
|
|
|
|
|
|
|
All source data is shuffled using the <a href='http://blog.codinghorror.com/the-danger-of-naivete/'>Fisher-Yates</a> algorithm. |
|
|
|
All source data is shuffled using the <a href='http://blog.codinghorror.com/the-danger-of-naivete/'>Fisher-Yates</a> algorithm. |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
<br><br> |
|
|
|
<p> |
|
|
|
|
|
|
|
|
|
|
|
There's a fun clip about the sounds of sorting <a href="https://www.youtube.com/watch?v=t8g-iYGHpEA">here</a>. |
|
|
|
There's a fun clip about the sounds of sorting <a href="https://www.youtube.com/watch?v=t8g-iYGHpEA">here</a>. |
|
|
|
|
|
|
|
</p> |
|
|
|
<br><br> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Quick sort discussion</h3> |
|
|
|
<h3>Quick sort discussion</h3> |
|
|
|
|
|
|
|
|
|
|
|
@ -60,6 +60,8 @@ |
|
|
|
data-worst-memory='0' |
|
|
|
data-worst-memory='0' |
|
|
|
></div> |
|
|
|
></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
|
|
<h3>Merge sort discussion</h3> |
|
|
|
<h3>Merge sort discussion</h3> |
|
|
|
|
|
|
|
|
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/mergesort.js'>Source Code</a> |
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/mergesort.js'>Source Code</a> |
|
|
|
@ -95,6 +97,8 @@ |
|
|
|
data-worst-memory='O (n)' |
|
|
|
data-worst-memory='O (n)' |
|
|
|
></div> |
|
|
|
></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
|
|
<h3>Selection sort discussion</h3> |
|
|
|
<h3>Selection sort discussion</h3> |
|
|
|
|
|
|
|
|
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/selectionsort.js'>Source Code</a> |
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/selectionsort.js'>Source Code</a> |
|
|
|
@ -128,6 +132,8 @@ |
|
|
|
data-worst-memory='0'> |
|
|
|
data-worst-memory='0'> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
|
|
<h3>Insertion sort discussion</h3> |
|
|
|
<h3>Insertion sort discussion</h3> |
|
|
|
|
|
|
|
|
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/insertionsort.js'>Source Code</a> |
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/insertionsort.js'>Source Code</a> |
|
|
|
@ -159,6 +165,8 @@ |
|
|
|
data-worst-memory='0' |
|
|
|
data-worst-memory='0' |
|
|
|
></div> |
|
|
|
></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
|
|
<h3>Shellsort discussion</h3> |
|
|
|
<h3>Shellsort discussion</h3> |
|
|
|
|
|
|
|
|
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/shellsort.js'>Source Code</a> |
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/shellsort.js'>Source Code</a> |
|
|
|
@ -196,6 +204,8 @@ |
|
|
|
data-worst-memory='n' |
|
|
|
data-worst-memory='n' |
|
|
|
></div> |
|
|
|
></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
|
|
<h3>Bubble sort discussion</h3> |
|
|
|
<h3>Bubble sort discussion</h3> |
|
|
|
|
|
|
|
|
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/bubblesort.js'>Source Code</a> |
|
|
|
<a class='src' href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization/src/master/js/bubblesort.js'>Source Code</a> |
|
|
|
@ -290,4 +300,3 @@ |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
</html> |
|
|
|
O (n) |
|
|
|
|
|
|
|
|
