<!DOCTYPE html>
<html>
<head>
<title>Heat Map dengan Sigmoid</title>
<style>
#heatmap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 2px;
width: 400px;
margin: 20px auto;
}
.cell {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
border-radius: 3px;
}
</style>
</head>
<body>
<h2 align="center">Heat Map dengan Fungsi Sigmoid</h2>
<div id="heatmap"></div>
<script>
function sigmoid(x) {
return 1 / (1 + Math.exp(-x));
}
function normalizeWithSigmoid(value, maxValue) {
// Scale nilai ke range -6 sampai 6 untuk sigmoid
const scaledValue = (value / maxValue) * 12 - 6;
return sigmoid(scaledValue);
}
const data = [
[5, 10, 15, 20, 25],
[30, 35, 40, 45, 50],
[55, 60, 65, 70, 75],
[80, 85, 90, 95, 100],
[105, 110, 115, 120, 125]
];
const maxValue = Math.max(...data.flat());
const heatmap = document.getElementById('heatmap');
heatmap.innerHTML = '';
data.forEach(row => {
row.forEach(value => {
const normalized = normalizeWithSigmoid(value, maxValue);
const hue = (1 - normalized) * 240; // 240 (biru) ke 0 (merah)
const color = `hsl(${hue}, 100%, 50%)`;
const cell = document.createElement('div');
cell.className = 'cell';
cell.style.backgroundColor = color;
cell.textContent = value;
heatmap.appendChild(cell);
});
});
</script>
</body>
</html>
