You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
5.2 KiB
180 lines
5.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>D3</title>
|
|
|
|
<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="/beb-2016/css/style.css">
|
|
</head>
|
|
<body>
|
|
<h1>D3: Sort algorithm walkthroughs</h1>
|
|
|
|
Here are visualizations of common sorting algorithms. Use the comparisons counter
|
|
and number of items to observe the performance of each randomized case.
|
|
|
|
<a href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization' target='_new'>[Source repository]</a>
|
|
<br>
|
|
|
|
<h2>Quicksort discussion</h2>
|
|
<p>
|
|
used by chrome.<br>
|
|
source code link
|
|
</p>
|
|
|
|
<div class="sorter"
|
|
data-algorithm='quick'
|
|
data-stable='Maybe'
|
|
data-adaptive='Maybe'
|
|
data-worst-perf='O(n + m + 3k)'
|
|
data-avg-perf='O(n + m + 3k)'
|
|
data-best-perf='O(n + m + 3k)'
|
|
data-worst-memory='0 (in place)'
|
|
></div>
|
|
|
|
<h2>Mergesort discussion</h2>
|
|
<p>
|
|
used by firefox and safari.<br>
|
|
helpful: http://stackoverflow.com/questions/2967153/space-requirements-of-a-merge-sort<br>
|
|
source code link
|
|
</p>
|
|
|
|
<div class="sorter"
|
|
data-algorithm='merge'
|
|
data-stable='Maybe'
|
|
data-adaptive='Maybe'
|
|
data-worst-perf='O(n + m + 3k)'
|
|
data-avg-perf='O(n + m + 3k)'
|
|
data-best-perf='O(n + m + 3k)'
|
|
data-worst-memory='0 (in place)'
|
|
></div>
|
|
|
|
<h2>Selection sort discussion</h2>
|
|
<p>
|
|
http://stackoverflow.com/questions/15799034/insertion-sort-vs-selection-sort <br>
|
|
finds upstram minimum and swaps with current.<br>
|
|
source code link
|
|
</p>
|
|
|
|
<div class="sorter"
|
|
data-algorithm='selection'
|
|
data-stable='Maybe'
|
|
data-adaptive='Maybe'
|
|
data-worst-perf='O(n + m + 3k)'
|
|
data-avg-perf='O(n + m + 3k)'
|
|
data-best-perf='O(n + m + 3k)'
|
|
data-worst-memory='0 (in place)'>
|
|
</div>
|
|
|
|
<h2>Insertion sort discussion</h2>
|
|
<p>
|
|
how is this different from bubble and selection. <br>
|
|
swap. highlight. fade.<br>
|
|
source code link
|
|
</p>
|
|
|
|
<div class="sorter"
|
|
data-algorithm='insertion'
|
|
data-stable='Maybe'
|
|
data-adaptive='Maybe'
|
|
data-worst-perf='O(n + m + 3k)'
|
|
data-avg-perf='O(n + m + 3k)'
|
|
data-best-perf='O(n + m + 3k)'
|
|
data-worst-memory='0 (in place)'
|
|
></div>
|
|
|
|
<h2>Shellsort discussion</h2>
|
|
<p>
|
|
several ways to pick gap width, but dependence on input data makes gap selection trivial.<br>
|
|
Insertion sort with gap of 1.<br>
|
|
source code link
|
|
</p>
|
|
|
|
<div class="sorter"
|
|
data-algorithm='shell'
|
|
data-stable='Maybe'
|
|
data-adaptive='Maybe'
|
|
data-worst-perf='O(n + m + 3k)'
|
|
data-avg-perf='O(n + m + 3k)'
|
|
data-best-perf='O(n + m + 3k)'
|
|
data-worst-memory='0 (in place)'
|
|
></div>
|
|
|
|
|
|
<h2>Bubble sort discussion</h2>
|
|
<p>
|
|
how is this different from insertion and selection sorts. <br>
|
|
talk about turtles and rabbits, because search loops from beginning each time. Every number out of place means a new pass must be done.<br>
|
|
source code link
|
|
</p>
|
|
|
|
<div class="sorter"
|
|
data-algorithm='bubble'
|
|
data-stable='Maybe'
|
|
data-adaptive='Maybe'
|
|
data-worst-perf='O(n + m + 3k)'
|
|
data-avg-perf='O(n + m + 3k)'
|
|
data-best-perf='O(n + m + 3k)'
|
|
data-worst-memory='0 (in place)'
|
|
></div>
|
|
|
|
<!--
|
|
<h2>radix sort discussion</h2>
|
|
|
|
<div class="sorter" data-algorithm='radix'></div>
|
|
|
|
<!--
|
|
<h2>Heapsort discussion</h2>
|
|
|
|
<div class="sorter"></div>
|
|
|
|
<h2>Bubblesort discussion</h2>
|
|
NOTE http://stackoverflow.com/questions/17270628/insertion-sort-vs-bubble-sort-algorithms
|
|
<div class="sorter"></div>
|
|
|
|
<h2>Radixsort discussion</h2>
|
|
|
|
<div class="sorter"></div>
|
|
-->
|
|
|
|
<script type="text/javascript" src='../beb-2016/js/ui.js'></script>
|
|
<script type="text/javascript" src='../beb-2016/js/prism.js'></script>
|
|
|
|
<script type='text/javascript' src='vendor/d3/d3.min.js'></script>
|
|
<script type='text/javascript' src='js/visualizer.js'></script>
|
|
<script type='text/javascript' src='js/itemgroup.js'></script>
|
|
<script type='text/javascript' src='js/visualizer-dom.js'></script>
|
|
<script type='text/javascript' src='js/sorter.js'></script>
|
|
<script type='text/javascript' src='js/quicksort.js'></script>
|
|
<script type='text/javascript' src='js/mergesort.js'></script>
|
|
<script type='text/javascript' src='js/insertionsort.js'></script>
|
|
<script type='text/javascript' src='js/shellsort.js'></script>
|
|
<script type='text/javascript' src='js/selectionsort.js'></script>
|
|
<script type='text/javascript' src='js/bubblesort.js'></script>
|
|
<script type='text/javascript' src='js/radixsort.js'></script>
|
|
|
|
<script type='text/javascript'>
|
|
var dump = function(arr) {
|
|
var d = [];
|
|
arr.forEach(function(obj) {
|
|
d.push(obj.value);
|
|
})
|
|
|
|
return d.join(',');
|
|
};
|
|
|
|
|
|
// Wrap anonymous function to avoid polluting global namespace.
|
|
(function() {
|
|
var elements = document.querySelectorAll('.sorter');
|
|
var V;
|
|
for (key in elements) {
|
|
if (elements.hasOwnProperty(key)) {
|
|
new Visualizer(elements[key]);
|
|
}
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|