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.
137 lines
3.0 KiB
137 lines
3.0 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'>
|
|
html, body {
|
|
font-family:sans-serif;
|
|
margin:0;
|
|
}
|
|
|
|
svg {
|
|
border:10px solid dodgerblue;
|
|
width:940px;
|
|
}
|
|
|
|
.sorter {
|
|
border:1px solid #e7e7e7;
|
|
margin:20px auto;
|
|
padding:10px;
|
|
width:960px;
|
|
}
|
|
|
|
.slider {
|
|
|
|
}
|
|
|
|
.top {
|
|
background:#f88;
|
|
}
|
|
|
|
.bottom {
|
|
background:#4e0;
|
|
height:100px;
|
|
}
|
|
|
|
button {
|
|
border:1px solid #333;
|
|
background:#888;
|
|
padding:3px;
|
|
}
|
|
|
|
button.fa {
|
|
cursor:pointer;
|
|
font-size:12px;
|
|
height:20px;
|
|
line-height:14px;
|
|
margin-right:5px;
|
|
transition:background 0.2s ease;
|
|
width:20px;
|
|
}
|
|
|
|
button:hover {
|
|
background:#aaa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Quicksort discussion</h1>
|
|
|
|
<div class="sorter"></div>
|
|
|
|
|
|
<h1>Mergesort discussion</h1>
|
|
|
|
<div class="sorter"></div>
|
|
|
|
|
|
<!-- <h1>Shellsort discussion</h1>
|
|
|
|
<div class="sorter"></div>
|
|
|
|
|
|
<h1>Heapsort discussion</h1>
|
|
|
|
<div class="sorter"></div>
|
|
|
|
<h1>Bubblesort discussion</h1>
|
|
|
|
<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/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'>
|
|
// var QS = new Quicksort();
|
|
// QS.addInstruction();
|
|
|
|
var MS = new Mergesort();
|
|
|
|
var data = MS.generate(15);
|
|
var a = []
|
|
data.forEach(function(obj0) {
|
|
a.push(obj0.value);
|
|
})
|
|
console.log('DATA: ' + a.join(','));
|
|
|
|
var shuffled = MS.shuffle(data);
|
|
var b = []
|
|
shuffled.forEach(function(obj0) {
|
|
b.push(obj0.value);
|
|
});
|
|
console.log('SHUFFLED: ' + b.join(','));
|
|
|
|
var ordered = Object.create(shuffled);
|
|
MS.sort(ordered, 0, ordered.length - 1);
|
|
var c = []
|
|
ordered.forEach(function(obj0) {
|
|
c.push(obj0.value);
|
|
});
|
|
console.log('ORDERED: ' + c.join(','));
|
|
|
|
|
|
// Wrap anonymous function to avoid polluting global namespace.
|
|
// (function() {
|
|
// var elements = document.querySelectorAll('.sorter');
|
|
// for (key in elements) {
|
|
// if (elements.hasOwnProperty(key)) {
|
|
// new Visualizer(elements[key]);
|
|
// }
|
|
// }
|
|
// })();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|