Skip to content

Instantly share code, notes, and snippets.

@quadrupleslap

quadrupleslap/bench-sorts.html

Last active August 2, 2018 04:33
Show Gist options
  • Save quadrupleslap/24c1b48f009214a6812a74bcebecf794 to your computer and use it in GitHub Desktop.
Save quadrupleslap/24c1b48f009214a6812a74bcebecf794 to your computer and use it in GitHub Desktop.
Download ZIP
Dumb Insertion Sort (w/ Linked List) vs. GNU Coreutils
Raw
bench-sorts.html
<!doctype html>
<html>
<head>
<title>Results</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
font-family: sans-serif;
}
#content {
display: flex;
margin: 16px;
}
#cc {
position: relative;
width: 0;
flex-grow: 1;
flex-shrink: 1;
}
h1 {
text-align: center;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
label {
display: block;
}
#legend {
padding: 0;
list-style-type: none;
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Sort Speed</h1>
<div id="content">
<div id="cc">
<canvas id="chart"></canvas>
</div>
<form id="controls" onchange="repopulate()">
<h3>Options</h3>
<label><input type="checkbox" name="dups" checked> Duplicates</label>
<h3>Order</h3>
<div>
<label><input type="radio" name="order" value="asc" checked> Ascending</label>
<label><input type="radio" name="order" value="desc"> Descending</label>
<label><input type="radio" name="order" value="rand"> Random</label>
</div>
<h3>Legend</h3>
<ul id="legend">
<li><span style="color: #F58A07">■</span> <code>usel</code></li>
<li><span style="color: #1560BD">■</span> <code>sort</code></li>
</ul>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</div>
<script>
let chart, data;
function repopulate() {
if (chart == null)
return;
let controls = document.getElementById('controls');
let dups = ''+controls.elements['dups'].checked;
let order = controls.elements['order'].value;
let usel = [];
let sort = [];
data.forEach(row => {
if (row[1] != order || row[2] != dups)
return;
usel.push({ x: +row[0], y: +row[3] });
sort.push({ x: +row[0], y: +row[4] });
});
chart.data.datasets[0].data = usel;
chart.data.datasets[1].data = sort;
chart.update();
}
fetch('results.csv')
.then(res => res.text())
.then(csv => {
let ctx = document.getElementById('chart').getContext('2d');
data = csv.split('\n').map(s => s.split(','));
data.shift();
chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'usel',
backgroundColor: 'transparent',
borderColor: '#F58A07',
pointBackgroundColor: '#F58A07',
data: [],
}, {
label: 'sort',
backgroundColor: 'transparent',
borderColor: '#1560BD',
pointBackgroundColor: '#1560BD',
data: [],
}],
},
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'List Length',
},
type: 'linear',
beginAtZero: true,
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Average Time (s)',
},
type: 'linear',
beginAtZero: true,
}],
},
legend: {
display: false,
},
},
});
repopulate();
});
</script>
</body>
</html>
Raw
results.csv
size order dups usel sort
0 rand false 0.000 0.000
0 asc false 0.000 0.000
0 desc false 0.000 0.000
0 rand true 0.000 0.000
0 asc true 0.000 0.000
0 desc true 0.000 0.000
10000 rand false 0.118 0.000
10000 asc false 0.061 0.000
10000 desc false 0.000 0.000
10000 rand true 0.114 0.000
10000 asc true 0.063 0.000
10000 desc true 0.000 0.000
20000 rand false 0.637 0.007
20000 asc false 0.237 0.001
20000 desc false 0.000 0.000
20000 rand true 0.637 0.003
20000 asc true 0.236 0.001
20000 desc true 0.001 0.000
30000 rand false 1.811 0.012
30000 asc false 0.513 0.000
30000 desc false 0.000 0.001
30000 rand true 1.701 0.009
30000 asc true 0.517 0.000
30000 desc true 0.000 0.001
40000 rand false 3.520 0.022
40000 asc false 0.972 0.007
40000 desc false 0.005 0.007
40000 rand true 3.695 0.022
40000 asc true 0.977 0.008
40000 desc true 0.006 0.010
50000 rand false 6.253 0.028
50000 asc false 1.496 0.010
50000 desc false 0.008 0.009
50000 rand true 6.251 0.030
50000 asc true 1.540 0.011
50000 desc true 0.010 0.012
60000 rand false 9.584 0.036
60000 asc false 2.191 0.016
60000 desc false 0.012 0.015
60000 rand true 9.592 0.037
60000 asc true 2.214 0.016
60000 desc true 0.012 0.014
70000 rand false 13.490 0.043
70000 asc false 2.966 0.016
70000 desc false 0.016 0.019
70000 rand true 13.563 0.046
70000 asc true 2.966 0.021
70000 desc true 0.015 0.022
80000 rand false 18.109 0.057
80000 asc false 3.876 0.023
80000 desc false 0.019 0.024
80000 rand true 18.153 0.055
80000 asc true 3.844 0.023
80000 desc true 0.018 0.028
90000 rand false 23.381 0.060
90000 asc false 4.857 0.028
90000 desc false 0.024 0.030
90000 rand true 23.507 0.061
90000 asc true 4.862 0.026
90000 desc true 0.023 0.038
100000 rand false 29.731 0.073
100000 asc false 5.936 0.034
100000 desc false 0.025 0.035
100000 rand true 28.700 0.059
100000 asc true 5.849 0.034
100000 desc true 0.024 0.034
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment