-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
190 lines (181 loc) · 7.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geospasial KPU</title>
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Link ke file CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<!-- Navbar -->
<nav class="navbar">
<div class="logo">Dashboard Perolehan Pemilu Presiden dan Wakil Presiden Provinsi Bangka Belitung 2024</div>
<div class="menu-toggle" onclick="toggleMenu()">☰</div>
<ul class="menu">
<li><a href="https://wasfiq12.github.io/pilpresbabel/">Home</a></li>
<li><a href="https://wasfiq12.github.io/pilpres/">See Fullscreen Map</a></li>
<li><a href="https://www.linkedin.com/in/wasfi-qordowi-131662320/">Contact</a></li>
</ul>
</nav>
<!-- Main Content -->
<div class="container mx-auto mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Peta -->
<div class="bg-white p-4 shadow rounded">
<h2 class="text-lg font-semibold mb-4">Peta Interaktif</h2>
<iframe src="https://wasfiq12.github.io/pilpres/" class="w-full h-80 border rounded" allowfullscreen></iframe>
</div>
<!-- Diagram -->
<div class="bg-white p-4 shadow rounded">
<h2 class="text-lg font-semibold mb-4">Diagram Suara Presiden per Kabupaten/Kota</h2>
<canvas id="stackedBarChart" width="800" height="400"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Data suara kandidat presiden dari CSV
const labels = ["Bangka", "Bangka Barat", "Bangka Selatan", "Bangka Tengah", "Belitung", "Belitung Timur", "Pangkalpinang"];
const kandidatData = {
"Anies Baswedan - Muhaimin Iskandar": [54479, 27592, 20644, 29006, 22132, 10783, 39712],
"Prabowo Subianto - Gibran Rakabuming Raka": [104488, 72502, 88719, 69013, 72181, 52452, 70528],
"Ganjar Pranowo - Mahfud MD": [33429, 22479, 17534, 20615, 20280, 16428, 20344]
};
// Warna khusus untuk setiap kandidat
const kandidatColors = {
"Anies Baswedan - Muhaimin Iskandar": "blue",
"Prabowo Subianto - Gibran Rakabuming Raka": "red",
"Ganjar Pranowo - Mahfud MD": "green"
};
// Menyiapkan dataset untuk Chart.js
const datasets = Object.keys(kandidatData).map(kandidat => ({
label: kandidat,
data: kandidatData[kandidat],
backgroundColor: kandidatColors[kandidat],
borderColor: kandidatColors[kandidat],
borderWidth: 1
}));
// Membuat grafik
const ctx = document.getElementById('stackedBarChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top'
},
},
scales: {
x: {
stacked: true // Mengaktifkan stack pada sumbu X
},
y: {
stacked: true, // Mengaktifkan stack pada sumbu Y
beginAtZero: true
}
}
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Tabel dari CSV</title>
<style>
.container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.table-auto {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
.table-auto th, .table-auto td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.table-auto th {
background-color: #f4f4f4;
}
.overflow-y-auto {
max-height: 400px;
overflow-y: auto;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container mx-auto mt-6 bg-white p-4 shadow rounded">
<h2 class="text-lg font-semibold mb-4">Data Tabel</h2>
<div class="overflow-y-auto h-80 border rounded"> <!-- Kontainer dengan scroll -->
<table class="table-auto border">
<thead class="bg-gray-200">
<tr>
<th class="px-4 py-2 border border-gray-300">Kab/Kot</th>
<th class="px-4 py-2 border border-gray-300">Anies Baswedan - Muhaimin Iskandar</th>
<th class="px-4 py-2 border border-gray-300">Prabowo Subianto - Gibran Rakabuming Raka</th>
<th class="px-4 py-2 border border-gray-300">Ganjar Pranowo - Mahfud MD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-2 border border-gray-300">Bangka</td>
<td class="px-4 py-2 border border-gray-300">54479</td>
<td class="px-4 py-2 border border-gray-300">104488</td>
<td class="px-4 py-2 border border-gray-300">33429</td>
</tr>
<tr>
<td class="px-4 py-2 border border-gray-300">Bangka Barat</td>
<td class="px-4 py-2 border border-gray-300">27592</td>
<td class="px-4 py-2 border border-gray-300">72502</td>
<td class="px-4 py-2 border border-gray-300">22479</td>
</tr>
<tr>
<td class="px-4 py-2 border border-gray-300">Bangka Selatan</td>
<td class="px-4 py-2 border border-gray-300">20644</td>
<td class="px-4 py-2 border border-gray-300">88719</td>
<td class="px-4 py-2 border border-gray-300">17534</td>
</tr>
<tr>
<td class="px-4 py-2 border border-gray-300">Bangka Tengah</td>
<td class="px-4 py-2 border border-gray-300">29006</td>
<td class="px-4 py-2 border border-gray-300">69013</td>
<td class="px-4 py-2 border border-gray-300">20615</td>
</tr>
<tr>
<td class="px-4 py-2 border border-gray-300">Belitung</td>
<td class="px-4 py-2 border border-gray-300">22132</td>
<td class="px-4 py-2 border border-gray-300">72181</td>
<td class="px-4 py-2 border border-gray-300">20280</td>
</tr>
<tr>
<td class="px-4 py-2 border border-gray-300">Belitung Timur</td>
<td class="px-4 py-2 border border-gray-300">10783</td>
<td class="px-4 py-2 border border-gray-300">52452</td>
<td class="px-4 py-2 border border-gray-300">16428</td>
</tr>
<tr>
<td class="px-4 py-2 border border-gray-300">Pangkalpinang</td>
<td class="px-4 py-2 border border-gray-300">39712</td>
<td class="px-4 py-2 border border-gray-300">70528</td>
<td class="px-4 py-2 border border-gray-300">20344</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
</body>
</html>