Shows stark contrasts in resources between Hijaz, Najd, and Yaman.
2. Social Structure: Doughnut Chart (Goal: Inform proportions | Library: Chart.js Canvas) -> Highlights the Bedouin vs. Sedentary population split.
3. Genealogy: Interactive HTML/CSS Nested List (Goal: Organize hierarchy | Library: Vanilla JS/HTML) -> Simplifies complex lineages (Adnan/Qahtan) into explorable nodes.
4. Trade Routes: Interactive HTML/CSS Coordinate Map (Goal: Relationships/Discovery | Library: Vanilla JS/HTML) -> Allows users to click cities to reveal routes and trade goods.
Justification: These methods avoid SVG while providing rich, domain-specific interactivity. –>

body {
background-color: #fdfbf7;
color: #1e293b;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}

@media (min-width: 768px) {
.chart-container {
height: 380px;
}
}

.nav-link.active {
color: #c2410c;
border-bottom: 2px solid #c2410c;
font-weight: bold;
}

.map-container {
position: relative;
width: 100%;
max-width: 500px;
aspect-ratio: 1 / 1.1;
background-color: #f3e8d6;
border: 2px solid #e2e8f0;
border-radius: 0.5rem;
margin: 0 auto;
overflow: hidden;
}

.map-node {
position: absolute;
width: 20px;
height: 20px;
background-color: #c2410c;
border-radius: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
z-index: 10;
box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.2);
}

.map-node:hover, .map-node.active {
transform: translate(-50%, -50%) scale(1.3);
background-color: #15803d;
box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.2);
}

.map-label {
position: absolute;
font-size: 0.875rem;
font-weight: bold;
color: #1e293b;
transform: translate(-50%, 15px);
white-space: nowrap;
pointer-events: none;
z-index: 11;
}

.map-route {
position: absolute;
background-color: #c2410c;
height: 2px;
transform-origin: 0 50%;
opacity: 0;
transition: opacity 0.3s;
z-index: 5;
border-top: 2px dashed #c2410c;
background: transparent;
}

.map-route.visible {
opacity: 0.6;
}

.genealogy-node {
cursor: pointer;
user-select: none;
}

.genealogy-children {
display: none;
border-left: 2px solid #cbd5e1;
margin-left: 1rem;
padding-left: 1rem;
}

.genealogy-children.expanded {
display: block;
animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}

// — Navigation Logic —
const sections = document.querySelectorAll(‘section’);
const navLinks = document.querySelectorAll(‘.nav-link’);

window.addEventListener(‘scroll’, () => {
let current = ”;
sections.forEach(section => {
const sectionTop = section.offsetTop;
if (scrollY >= sectionTop – 150) {
current = section.getAttribute(‘id’);
}
});

navLinks.forEach(link => {
link.classList.remove(‘active’);
if (link.getAttribute(‘href’).includes(current)) {
link.classList.add(‘active’);
}
});
});

// — Genealogy Toggle Logic —
function toggleGenealogy(element, event) {
if (event) event.stopPropagation();
const childrenContainer = element.nextElementSibling;
const icon = element.querySelector(‘.toggle-icon’);

if (childrenContainer && childrenContainer.classList.contains(‘genealogy-children’)) {
const isExpanded = childrenContainer.classList.contains(‘expanded’);
if (isExpanded) {
childrenContainer.classList.remove(‘expanded’);
icon.textContent = ‘[+]’;
} else {
childrenContainer.classList.add(‘expanded’);
icon.textContent = ‘[-]’;
}
}
}

// — Data & Initialization for Charts (Chart.js) —
document.addEventListener(“DOMContentLoaded”, function() {

// 1. Radar Chart: Geografi
const ctxGeo = document.getElementById(‘geoRadarChart’).getContext(‘2d’);
new Chart(ctxGeo, {
type: ‘radar’,
data: {
labels: [‘Curah Air/Oasis’, ‘Suhu Udara (Sejuk)’, ‘Kesuburan Tanah’, ‘Kepadatan Penduduk’, ‘Akses Rute Luar’],
datasets: [
{
label: ‘Yaman (Selatan)’,
data: [9, 6, 9, 8, 8],
fill: true,
backgroundColor: ‘rgba(21, 128, 61, 0.2)’, // green
borderColor: ‘rgb(21, 128, 61)’,
pointBackgroundColor: ‘rgb(21, 128, 61)’,
pointBorderColor: ‘#fff’,
pointHoverBackgroundColor: ‘#fff’,
pointHoverBorderColor: ‘rgb(21, 128, 61)’
},
{
label: ‘Hijaz (Barat)’,
data: [4, 4, 3, 6, 9],
fill: true,
backgroundColor: ‘rgba(194, 65, 12, 0.2)’, // orange
borderColor: ‘rgb(194, 65, 12)’,
pointBackgroundColor: ‘rgb(194, 65, 12)’,
pointBorderColor: ‘#fff’,
pointHoverBackgroundColor: ‘#fff’,
pointHoverBorderColor: ‘rgb(194, 65, 12)’
},
{
label: ‘Najd (Tengah)’,
data: [1, 2, 1, 3, 2],
fill: true,
backgroundColor: ‘rgba(234, 179, 8, 0.2)’, // yellow
borderColor: ‘rgb(234, 179, 8)’,
pointBackgroundColor: ‘rgb(234, 179, 8)’,
pointBorderColor: ‘#fff’,
pointHoverBackgroundColor: ‘#fff’,
pointHoverBorderColor: ‘rgb(234, 179, 8)’
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: { display: true },
suggestedMin: 0,
suggestedMax: 10,
ticks: { display: false }
}
},
plugins: {
legend: { position: ‘bottom’ },
tooltip: {
callbacks: {
label: function(context) {
return context.dataset.label + ‘: ‘ + context.formattedValue + ‘/10’;
}
}
}
}
}
});

// 2. Doughnut Chart: Sosial
const ctxSosial = document.getElementById(‘sosialDoughnutChart’).getContext(‘2d’);
new Chart(ctxSosial, {
type: ‘doughnut’,
data: {
labels: [‘Badui (Nomaden)’, ‘Hadhari (Menetap)’],
datasets: [{
data: [75, 25], // Estimasi umum sejarah
backgroundColor: [
‘rgb(234, 179, 8)’, // Yellow for desert
‘rgb(21, 128, 61)’ // Green for oasis/settlements
],
hoverOffset: 4,
borderWidth: 2,
borderColor: ‘#fff’
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: ‘65%’,
plugins: {
legend: { position: ‘bottom’ },
tooltip: {
callbacks: {
label: function(context) {
return ‘ Estimasi: ‘ + context.formattedValue + ‘% Populasi’;
}
}
}
}
}
});

// — Interactive Map Logic —
const cityData = {
‘syam’: {
name: ‘Syam (Syiria/Gaza)’,
role: ‘Terminal Utara & Pusat Peradaban Romawi’,
desc: ‘Tujuan akhir dari Rihlah ash-Shaif (perjalanan musim panas) orang Quraisy. Tempat bertemunya pedagang Arab dengan pasar Kekaisaran Romawi Bizantium.’,
goods: ‘Mengekspor: Sutra, Senjata, Gandum, Anggur. Menerima: Kemenyan, Rempah.’,
connections: [‘makkah’, ‘yatsrib’, ‘hirah’]
},
‘yaman’: {
name: ‘Yaman (Sana’a / Pelabuhan Aden)’,
role: ‘Terminal Selatan & Penghasil Kemenyan’,
desc: ‘Tujuan Rihlah ash-Syita (musim dingin). Sumber utama komoditas mewah dunia kuno (kemenyan/dupa) dan titik transit rempah-rempah dari India lewat laut.’,
goods: ‘Kemenyan (Frankincense), Mur (Myrrh), Rempah India, Kain Yaman (Burdah).’,
connections: [‘makkah’, ‘thaif’]
},
‘makkah’: {
name: ‘Makkah’,
role: ‘Hub Perdagangan Sentral & Pusat Spiritual’,
desc: ‘Terletak di lembah tandus, namun strategis di tengah rute Syam-Yaman. Memiliki keamanan mutlak karena status Tanah Haram (Ka’bah), menjadikannya pasar yang aman di tengah gurun yang penuh perompak.’,
goods: ‘Pusat Transit (Broker). Komoditas: Kulit binatang, Kismis (dari Thaif), Perak.’,
connections: [‘syam’, ‘yaman’, ‘yatsrib’, ‘thaif’]
},
‘yatsrib’: {
name: ‘Yatsrib (Madinah)’,
role: ‘Oasis Agrikultural’,
desc: ‘Kota oasis yang kaya air, terletak di utara Makkah, jalur menuju Syam. Mayoritas penduduknya bertani, bukan berdagang jarak jauh seperti Makkah.’,
goods: ‘Kurma premium, Hasil Pertanian, Perhiasan perak (kerajinan Yahudi Yatsrib).’,
connections: [‘makkah’, ‘syam’]
},
‘thaif’: {
name: ‘Tha’if’,
role: ‘Resor Musim Panas & Perkebunan’,
desc: ‘Terletak di dataran tinggi dekat Makkah. Udaranya sejuk dan tanahnya subur. Dikuasai suku Tsaqif yang sering bersaing ekonomi dengan Quraisy Makkah.’,
goods: ‘Anggur, Kismis, Madu, Kulit samakan.’,
connections: [‘makkah’, ‘yaman’]
},
‘hirah’: {
name: ‘Al-Hirah (Irak)’,
role: ‘Terminal Timur Laut & Vasal Persia’,
desc: ‘Ibukota Kerajaan Lakhmids. Pintu gerbang perdagangan menuju Kekaisaran Persia Sassanid dan Jalur Sutra darat.’,
goods: ‘Permadani Persia, Mutiara (Teluk), Rempah Timur.’,
connections: [‘syam’, ‘makkah’]
}
};

const nodes = document.querySelectorAll(‘.map-node’);
const routeContainer = document.getElementById(‘routeLines’);
const emptyState = document.getElementById(’emptyMapState’);
const activeState = document.getElementById(‘activeMapState’);

const elName = document.getElementById(‘cityName’);
const elRole = document.getElementById(‘cityRole’);
const elDesc = document.getElementById(‘cityDesc’);
const elGoods = document.getElementById(‘cityGoods’);

// Draw line between two elements
function drawLine(startEl, endEl) {
const mapRect = document.getElementById(‘interactiveMap’).getBoundingClientRect();

// Get percentages from inline styles
const startX = parseFloat(startEl.style.left);
const startY = parseFloat(startEl.style.top);
const endX = parseFloat(endEl.style.left);
const endY = parseFloat(endEl.style.top);

const line = document.createElement(‘div’);
line.className = ‘map-route’;

// Calculate position based on container width/height
const x1 = (startX / 100) * mapRect.width;
const y1 = (startY / 100) * mapRect.height;
const x2 = (endX / 100) * mapRect.width;
const y2 = (endY / 100) * mapRect.height;

const length = Math.sqrt(((x2 – x1) * (x2 – x1)) + ((y2 – y1) * (y2 – y1)));
const angle = Math.atan2(y2 – y1, x2 – x1) * 180 / Math.PI;

line.style.width = `${length}px`;
line.style.left = `${startX}%`;
line.style.top = `${startY}%`;
line.style.transform = `rotate(${angle}deg)`;

routeContainer.appendChild(line);

// trigger reflow
void line.offsetWidth;
line.classList.add(‘visible’);
}

function clearLines() {
routeContainer.innerHTML = ”;
}

nodes.forEach(node => {
node.addEventListener(‘click’, function() {
// Reset all
nodes.forEach(n => n.classList.remove(‘active’));
clearLines();

// Set active
this.classList.add(‘active’);
const cityId = this.getAttribute(‘data-id’);
const data = cityData[cityId];

// Draw connections
if(data.connections) {
data.connections.forEach(targetId => {
const targetNode = document.querySelector(`.map-node[data-id=”${targetId}”]`);
if(targetNode) drawLine(this, targetNode);
});
}

// Update UI panel
emptyState.classList.add(‘hidden’);
activeState.classList.remove(‘hidden’);

elName.textContent = data.name;
elRole.textContent = data.role;
elDesc.textContent = data.desc;
elGoods.textContent = data.goods;
});
});

// Redraw lines on resize to maintain correct percentages/pixels mapping
window.addEventListener(‘resize’, () => {
const activeNode = document.querySelector(‘.map-node.active’);
if(activeNode) {
activeNode.click(); // re-trigger drawing
}
});
});