Assalamualaikum Warahmatullahi Wabarakatuh. Pada blog ini, saya akan membahas visualisasi heat map dan curve fitting plot untuk simulasi heat conduction pada plat tipis menggunakan framework DAI5. Berikut adalah penjelasan singkat DAI5:
- Deep Awareness of I (Kesadaran Diri yang Mendalam). Kita harus menyadari hakikat dalam mencari ilmu, dimana semua hal memiliki keteraturan yang telah ditentukan oleh Allah SWT.
- Intention (Niat). Ketika kita ingin mendalami suatu ilmu pengetahuan harus diawali dengan niat untuk mengambil manfaat dari ilmu tersebut. Bukan sekadar prestasi semata, tapi harus ditujukan untuk kebermanfaatan umat manusia.
- Initial Thinking (Pemikiran Awal). Sebelum melangkah lebih jauh dalam melakukan proses analisa masalah, kita harus mampu memahami fundamental dari masalah tersebut dengan mengindentifikasi prinsip-prinsip dasarnya. Oleh karena itu, proses penyelesaian masalah dapat dilakukan tanpa menyimpang dari hukum-hukum alam yang telah ditetapkan oleh Allah SWT.
- Idealization (Idealisasi). Dalam menyesaikan suatu masalah sains, simplifikasi harus dilakukan dengan efektif sehingga kita dapat melihat gambaran besar dari masalah yang ada. Selain itu, sebagai akibat dari proses initial thinking, kita dapat menetapkan boundary condition dari simplifikasi yang telah dibuat.
- Instruction Set (Set Instruksi). Eksekusi dari model yang telah dibuat harus disusun secara runut dan dapat dipertaggungjawabkan.
Awareness
Dalam melakukan proses pengolahan data metode numerik, khususnya yang berkaitan dengan sebaran energi panas pada sebuah plat digunakan beberapa metode yaitu curve fitting plot dan heat map daya. Metode ini dilakukan atas dasar kesadaran manusia bahwa rentan melakukan kesalahan interpretasi data yang dapat menyebabkan kekeliruan dalam penafsiran hasil simulasi.
Intention
Pengolahan data yang didapatkan dari hasil simulasi CFDSOF pada baris J2 – J10, dimana data tersebut merupakan data sebaran temperatur sepanjang plat. Data tersebut diolah menggunakan metode curve fitting plot dengan algoritma least square method. Data-data tersebut juga diolah menjadi heatmap energi panas berdasarkan Hukum Fourier Konduksi Panas.

Pemodelan heat map dapat mempermudah visualisasi terhadap perilaku energi di dalam plat yang memenuhi hukum kesetimbangan energi.
Initial Thinking
Proses curve fitting dilakukan dengan algoritma least square method.

Nilai parameter a, b, dan c diminimalkan menggunakan turunan parsial untuk setiap parameter

Maka dari itu, akan didapatkan sistem persamaan linier yang akan diselesaikan menggunakan metode Gauss-Jordan menggunakan library seperti numeric.js. Outputnya adalah kurva curve fitting plot yang dapat digunakan untuk melihat distribusi temperature pada tiap baris J. Selanjutnya akan dilakukan pembuatan visual heatmap berdasarkan beberapa persamaan di bawah ini:

Idealization
Dalam melakukan perhitungan numerik dengan output curve fitting plot dan heat map, tampilan visual yang dihasilkan merupakan bentuk aproksimasi terdahap data-data hasil simulasi CFDSOF. Semakin sedikit data yang diberikana, maka akan semakin menurun akurasi dari visualisasi yang ditampilkan. Maka dari itu, perlu ditentukan boundary condition dan area control volume dari sistem yang ada di dalamnya. Misalkan pada visualisasi heatmap, dibuat beberapa asumsi seperti material plat yang homogen dimana konduktivitas termalnya konstan di sepanjang plat. Selain itu, perlu diketahui bahwa heat map yang dihasilkan tidak menapilkan ujung atas dan bawah plat (baris J1 dan J12).
Instruction Set
Berdasarkan pendefinisian di atas, maka pertama akan dilakukan proses curve fitting plot menggunakan least square regression.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curve Fitting</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.3.1/math.min.js"></script>
</head>
<body>
<h1>Curve Fitting for CSV 10 and 11</h1>
<div id="chartsContainer"></div>
<script>
const datasets = [
[
{ x: 0.0, y: 285 },
{ x: 0.1, y: 315 },
{ x: 0.2, y: 335 },
{ x: 0.3, y: 350 },
{ x: 0.4, y: 360 },
{ x: 0.5, y: 365 },
{ x: 0.6, y: 360 },
{ x: 0.7, y: 350 },
{ x: 0.8, y: 335 },
{ x: 0.9, y: 315 },
{ x: 1.0, y: 285 }
],
[
{ x: 0.0, y: 280 },
{ x: 0.1, y: 310 },
{ x: 0.2, y: 330 },
{ x: 0.3, y: 345 },
{ x: 0.4, y: 355 },
{ x: 0.5, y: 360 },
{ x: 0.6, y: 355 },
{ x: 0.7, y: 345 },
{ x: 0.8, y: 330 },
{ x: 0.9, y: 310 },
{ x: 1.0, y: 280 }
]
];
function polynomialRegression(x, y, order = 2) {
const matrixX = x.map(val => Array.from({ length: order + 1 }, (_, j) => Math.pow(val, j)));
const matrixY = y.map(value => [value]);
const X = math.matrix(matrixX);
const Y = math.matrix(matrixY);
const XT = math.transpose(X);
const XTX = math.multiply(XT, X);
const XTY = math.multiply(XT, Y);
const coefficients = math.lusolve(XTX, XTY).valueOf().flat();
return coefficients;
}
function plotData(dataPoints, datasetIndex) {
const xValues = dataPoints.map(p => p.x);
const yValues = dataPoints.map(p => p.y);
const coeffs = polynomialRegression(xValues, yValues);
const equation = `y = ${coeffs.map((c, i) => `${c.toFixed(2)}x^${i}`).join(' + ')}`;
const container = document.getElementById('chartsContainer');
const title = document.createElement('h2');
title.innerText = `Dataset ${datasetIndex}: ${equation}`;
container.appendChild(title);
const table = document.createElement('table');
table.border = "1";
let tableContent = `<tr><th>X</th><th>Y</th></tr>`;
dataPoints.forEach(p => tableContent += `<tr><td>${p.x}</td><td>${p.y}</td></tr>`);
table.innerHTML = tableContent;
container.appendChild(table);
const canvas = document.createElement('canvas');
container.appendChild(canvas);
new Chart(canvas.getContext('2d'), {
type: 'scatter',
data: {
datasets: [
{ label: `Data ${datasetIndex}`, data: dataPoints, backgroundColor: 'blue', showLine: false },
{ label: `Fit ${datasetIndex}`, data: Array.from({ length: 100 }, (_, i) => {
const x = i / 100;
return { x, y: coeffs.reduce((sum, c, j) => sum + c * Math.pow(x, j), 0) };
}), borderColor: 'red', borderWidth: 2, showLine: true, fill: false }
]
},
options: {
scales: { x: { type: 'linear', position: 'bottom' }, y: { type: 'linear' } }
}
});
}
datasets.forEach((data, index) => plotData(data, index + 10));
</script>
</body>
</html>
Koding di atas merupakan proses curve fitting plot, dimana data-data XY Plot dimasukan ke dalam baris:
// Template data (gantilah dengan data yang diinginkan)
const dataPoints = [
// { x: 0.0, y: 303.000 },
// Tambahkan atau ubah data di sini
];
menggunakan data baris J2-J11
Maka akan didapatkan:
- Curve fitting plot J2-J11










Selanjutnya proses visualisasi heat map diawali dengan ukuran grid 0,0833 x 0,0833 m dan termal konduktivitas k = 16,2 W/mK. Missing row J1 dan J12 diset rata pada temperature T=303K K.
Perhitungan energi panas, sebenarnya mencakup heat flow rate/heat flux ketimbang heat energy. Heat flux tersebut dieksperesikan oleh persamaan:

dimana temperature gradient normal ke boudary dari sistem. Diskritisasi dilakukan terhadap gradien dengan 12 x 12 grid. Aproksimasi gradient dilakukan dengan finite differences:

Total heat flow pada plate dihitung beradasrkan kesetimbangan energi pada plat sepanjang boundary:

Nilai heat flux (q) akan dikalikan ukuran grid, sehingga didapatkan nilai heat flow per cell (Q). Data-data tersebut akan di-enhance menggunakan metode bicubic interpolation, maka akan didapatkan heat map-nya
import numpy as np
import matplotlib.pyplot as plt
# Full temperature data (J1 to J12)
temp_data = [
[303, 303, 303, 303, 303, 303, 303, 303, 303, 303, 303, 303], # J1 (hidden)
[303, 337.778, 351.284, 357.243, 359.911, 360.687, 359.911, 357.243, 351.284, 337.778, 303, 303], # J2
[303, 323.828, 337.116, 344.778, 348.713, 349.926, 348.713, 344.778, 337.116, 323.828, 303, 303], # J3
[303, 317.419, 328.575, 336.038, 340.24, 341.59, 340.24, 336.038, 328.575, 317.419, 303, 303], # J4
[303, 314.273, 323.728, 330.561, 334.617, 335.955, 334.617, 330.561, 323.728, 314.273, 303, 303], # J5
[303, 312.945, 321.503, 327.861, 331.713, 332.997, 331.713, 327.861, 321.503, 312.945, 303, 303], # J6
[303, 313.006, 321.477, 327.668, 331.377, 332.607, 331.378, 327.668, 321.477, 313.006, 303, 303], # J7
[303, 314.603, 323.73, 329.958, 333.522, 334.678, 333.522, 329.958, 323.73, 314.603, 303, 303], # J8
[303, 318.676, 328.881, 334.911, 338.075, 339.062, 338.075, 334.911, 328.881, 318.676, 303, 303], # J9
[303, 328.221, 338.208, 342.732, 344.806, 345.419, 344.806, 342.732, 338.208, 328.221, 303, 303], # J10
[328, 353, 353, 353, 353, 353, 353, 353, 353, 353, 328, 328], # J11
[303, 303, 303, 303, 303, 303, 303, 303, 303, 303, 303, 303] # J12 (hidden)
]
# Extract inner rows (J2 to J11) for visualization
temp_inner = np.array(temp_data[1:-1]) # Exclude J1 and J12
# Create heatmap
plt.figure(figsize=(10, 8))
plt.imshow(temp_inner, cmap='RdYlBu_r', interpolation='bicubic', vmin=303, vmax=360.687, extent=[0, 1, 0.0833, 0.9167])
plt.colorbar(label='Temperature (K)', ticks=np.arange(310, 361, 10))
plt.title('Energi Panas (W)', pad=20)
plt.xlabel('X (m)')
plt.ylabel('Y (m)')
plt.xticks(np.arange(0, 1.1, 0.2))
plt.yticks(np.arange(0.1, 1.0, 0.2))
# Overlay values (temperature differences from 303 K)
for i in range(0, 10, 2):
for j in range(0, 12, 2):
value = temp_inner[i, j] - 303 if temp_inner[i, j] > 303 else 0.0
plt.text(j * 0.0833, (i + 1) * 0.0833, f'{value:.1f}', ha='center', va='center',
color='white', fontsize=10, bbox=dict(facecolor='black', alpha=0.5))
# Add table at the bottom
table_data = [
['Sisi Atas', '-241.43 W'],
['Sisi Bawah', '191.20 W'],
['Sisi Kiri', '-0.08 W'],
['Sisi Kanan', '-50.06 W'],
['Total (harus = 0)', '-100.28 W']
]
table = plt.table(cellText=table_data, loc='bottom', cellLoc='center', bbox=[0, -0.25, 1, 0.2])
table.auto_set_font_size(False)
table.set_fontsize(12)
table.scale(1.2, 1.2)
plt.tight_layout()
plt.savefig('heatmap_heat_energy_distribution_matched.png') # Save the image
plt.show()
Maka akan didapatkan heat map dimana sumber panas terlihat berwarna merah pekat. Kemudian dapat dilihat juga energi panas pada plat, dapat ditemukan bahwa pada bagian sumber panas tentunya akan memiliki jumlah energi panas yang lebih besar daripada bagian yang bukan sumber panas.
Berikut merupakan hasil perhitungan numerik denganย outputย heat map dan curve fitting plot pada perpindahan panas pada plat. Wassalamualaikum warahmatullahi wabarakatuh.