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.
264 lines
7.2 KiB
264 lines
7.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">
|
|
|
|
<style type='text/css'>
|
|
/* https://color.adobe.com/create/color-wheel/?base=2&rule=Monochromatic&selected=4&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.17972473935894973,0.30406031865629857,0.5,0.6594494787178995,0.7916562131964631,1,0.35944947871789945,0.6081206373125971,1,0.0014128559043085631,0.1949717379336841,0.5,0.28755958297431955,0.48649650985007775,0.8&swatchOrder=0,1,2,3,4 */
|
|
|
|
@font-face {
|
|
font-family: 'thin';
|
|
src: url('res/distproth-webfont.eot');
|
|
src: url('res/distproth-webfont.eot?#iefix') format('embedded-opentype'),
|
|
url('res/distproth-webfont.woff2') format('woff2'),
|
|
url('res/distproth-webfont.woff') format('woff'),
|
|
url('res/distproth-webfont.ttf') format('truetype'),
|
|
url('res/distproth-webfont.svg#district_prothin') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
* {
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
html, body {
|
|
font-family:sans-serif;
|
|
margin:0;
|
|
}
|
|
|
|
.sorter {
|
|
background:#f4f4f4;
|
|
border:1px solid #bbb;
|
|
height:250px;
|
|
margin:20px auto;
|
|
padding:10px;
|
|
position:relative;
|
|
width:960px;
|
|
}
|
|
|
|
.sorter-sidebar {
|
|
height:230px;
|
|
position:absolute;
|
|
right:10px;
|
|
top:10px;
|
|
width:160px;
|
|
}
|
|
|
|
.sorter-svg {
|
|
background:#fff;
|
|
border:1px solid #ccc;
|
|
height:180px;
|
|
left:10px;
|
|
position:absolute;
|
|
top:10px;
|
|
width:770px;
|
|
}
|
|
|
|
.sorter-svg .marker {
|
|
fill:#bbb;
|
|
}
|
|
|
|
.sorter-svg .marker text {
|
|
fill:#2E4E7F;
|
|
font-size:10px;
|
|
}
|
|
|
|
.sorter-properties {
|
|
height:40px;
|
|
left:10px;
|
|
position:absolute;
|
|
top:200px;
|
|
width:770px;
|
|
}
|
|
|
|
.sorter-properties .property {
|
|
border-right:1px solid #ddd;
|
|
float:left;
|
|
text-align:center;
|
|
width:128px;
|
|
}
|
|
|
|
.sorter-properties .p6 {
|
|
border:0;
|
|
}
|
|
|
|
.sorter-properties .property .title {
|
|
color:#777;
|
|
font-size:10px;
|
|
}
|
|
|
|
.sorter-properties .property .value {
|
|
font-size:13px;
|
|
margin-top:10px;
|
|
}
|
|
|
|
.controls-container {
|
|
height:50px;
|
|
padding-bottom:10px;
|
|
text-align:center;
|
|
}
|
|
|
|
.controls-container button {
|
|
border:1px solid #fff;
|
|
background:#d4d4d4;
|
|
color:#2E4E7F;
|
|
cursor:pointer;
|
|
font-size:12px;
|
|
height:30px;
|
|
line-height:30px;
|
|
margin:0 2px;
|
|
text-align:center;
|
|
transition:background 0.2s ease, border 0.2s ease;
|
|
vertical-align: top;
|
|
width:30px;
|
|
}
|
|
|
|
.controls-container button:hover {
|
|
background:#bbb;
|
|
border:1px solid #2E4E7F;
|
|
}
|
|
|
|
.controls-container button:focus {
|
|
outline:0;
|
|
}
|
|
|
|
.controls-container .stat {
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
line-height:30px;
|
|
}
|
|
|
|
.message-container {
|
|
border-top:1px solid #ddd;
|
|
font-size:13px;
|
|
height:100px;
|
|
line-height:20px;
|
|
text-align:right;
|
|
}
|
|
|
|
.message-container .message {
|
|
border-bottom:1px solid #ddd;
|
|
font-size:13px;
|
|
}
|
|
|
|
.range-container {
|
|
height:50px;
|
|
margin-top:30px;
|
|
text-align:center;
|
|
}
|
|
|
|
.range-container input {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.range-container .msg {
|
|
font-size:13px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
for each one: in place? adaptive? stable? swaps. comparisons. random example. best case example. worst case example.
|
|
|
|
<h1>Quicksort discussion</h1>
|
|
used by chrome. <br>
|
|
swap. highlight. (un)fade.
|
|
<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>
|
|
|
|
|
|
<!-- <h1>Mergesort discussion</h1>
|
|
used by firefox and safari. <br>
|
|
|
|
<div class="sorter" data-algorithm='merge'></div>
|
|
|
|
|
|
<h1>Shellsort discussion</h1>
|
|
several ways to pick gap width, but dependence on input data makes gap selection trivial. <br>
|
|
swap. highlight. fade.
|
|
<div class="sorter" data-algorithm='shell'></div>
|
|
|
|
<h1>Selection sort discussion</h1>
|
|
http://stackoverflow.com/questions/15799034/insertion-sort-vs-selection-sort <br>
|
|
swap. highlight. fade.
|
|
<div class="sorter" data-algorithm='selection'></div>
|
|
|
|
<h1>insertion sort discussion</h1>
|
|
how is this different from bubble and selection. <br>
|
|
swap. highlight. fade.
|
|
<div class="sorter" data-algorithm='insertion'></div>
|
|
|
|
|
|
<h1>bubble sort discussion</h1>
|
|
how is this different from insertion and selection sorts. <br>
|
|
swap. highlight. fade.
|
|
<div class="sorter" data-algorithm='bubble'></div>
|
|
|
|
<h1>radix sort discussion</h1>
|
|
|
|
<div class="sorter" data-algorithm='radix'></div>
|
|
-->
|
|
<!--
|
|
<h1>Heapsort discussion</h1>
|
|
|
|
<div class="sorter"></div>
|
|
|
|
<h1>Bubblesort discussion</h1>
|
|
NOTE http://stackoverflow.com/questions/17270628/insertion-sort-vs-bubble-sort-algorithms
|
|
<div class="sorter"></div>
|
|
|
|
<h1>Radixsort discussion</h1>
|
|
|
|
<div class="sorter"></div>
|
|
-->
|
|
|
|
|
|
<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/visualizer-actions.js'></script>
|
|
<script type='text/javascript' src='js/visualizer-inits.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>
|
|
|