Algorithm – Hill sort visualization
I’ve always wanted to do data visualization
Now use the tool Echarts to visualize the sorting process
Hill sorting
The algorithm performance depends on h
function shellSort(array) {
const N = array.length;
let h = 1;
while (h < N / 3) h = 3 * h + 1;
while (h >= 1) {
for (let i = h; i < N; i++) {
for (let j = i; j >= h && array[j] < array[j - h]; j -= h) {
let tem = array[j];
array[j] = array[j - h];
array[j - h] = tem;
process.push(arr.slice(0));
}
}
h = Math.floor(h / 3);
}
}
shellSort(arr);
Copy the codeWhere process is the array used to store the procedure, the array result of each change is stored in this array, and the result of each storage is as follows
Hill sort, the number of fixed intervals into multiple arrays, each array is sorted, the interval amount from the specified value to 1, and finally the multiple arrays into one
Echarts
Trilogy, set DOM element — initialize Echarts– set Option
The diagram is constantly updated by changing the data in the option, and eventually animated
animationDuration: 0.animationDurationUpdate: 1000.animationEasing: "linear".animationEasingUpdate: "linear".// Set the conversion animation in Option
Copy the code
The animation
Here the setInterval function is used to play the animation, and the length of the procedure array is used as the identifier. If the length is greater than zero, it is taken out and set into option, and the animation is finally formed
The complete code is as follows
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.shell {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div class="shell"></div>
<script src="./js/echarts.min.js"></script>
<script>
const arr = [88.90.30.5.45.2.34.23.45.65.64.34.34];
const dom = document.querySelector(".shell");
const myChart = echarts.init(dom);
const option = {
// Chart position
grid: {
top: 10.bottom: 30.left: 100.right: 80,},xAxis: {
type: "value",},yAxis: {
type: "category".data: arr,
},
series: [{name: "number".type: "bar".data: arr,
label: {
show: true.// position: "right",
valueAnimation: true,}},],animationDuration: 0.animationDurationUpdate: 1000.animationEasing: "linear".animationEasingUpdate: "linear"}; myChart.setOption(option);const process = [];
// Hill sort
function shellSort(array) {
const N = array.length;
let h = 1;
while (h < N / 3) h = 3 * h + 1;
while (h >= 1) {
for (let i = h; i < N; i++) {
for (let j = i; j >= h && array[j] < array[j - h]; j -= h) {
let tem = array[j];
array[j] = array[j - h];
array[j - h] = tem;
process.push(arr.slice(0));
}
}
h = Math.floor(h / 3);
}
}
shellSort(arr);
// Play the animation
const interval = setInterval(() = > {
if (process.length === 0) {
clearInterval(interval);
} else {
const temArr = process.shift();
console.log(temArr);
option.yAxis.data = temArr;
option.series[0].data = temArr; myChart.setOption(option); }},1000);
</script>
</body>
</html>
Copy the code