Hugging Face's logo

Spaces:
Daniela-C
/
yahoo-webscope-anomaly-detection-dataset
Running

App Files Community
Daniela-C commited on
Commit
bc9975e
·
verified ·
1 Parent(s): c7249e6

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +464 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Yahoo Webscope Anomaly Detection Dataset
3
- emoji: 😻
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: yahoo-webscope-anomaly-detection-dataset
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,464 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Yahoo Webscope Anomaly Detection Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .chart-container {
15
+ position: relative;
16
+ height: 300px;
17
+ width: 100%;
18
+ }
19
+ .anomaly-marker {
20
+ position: absolute;
21
+ width: 8px;
22
+ height: 8px;
23
+ border-radius: 50%;
24
+ background-color: #ef4444;
25
+ transform: translate(-50%, -50%);
26
+ z-index: 10;
27
+ }
28
+ .tooltip {
29
+ position: absolute;
30
+ background: rgba(0, 0, 0, 0.8);
31
+ color: white;
32
+ padding: 5px 10px;
33
+ border-radius: 4px;
34
+ font-size: 12px;
35
+ pointer-events: none;
36
+ z-index: 100;
37
+ opacity: 0;
38
+ transition: opacity 0.3s;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-100 font-sans">
43
+ <div class="flex h-screen overflow-hidden">
44
+ <!-- Sidebar -->
45
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
46
+ <div class="p-4 border-b border-indigo-700">
47
+ <h1 class="text-xl font-bold flex items-center">
48
+ <i class="fas fa-chart-line mr-2"></i>
49
+ AnomalyScope
50
+ </h1>
51
+ </div>
52
+ <nav class="p-4">
53
+ <div class="mb-6">
54
+ <h2 class="text-sm uppercase text-indigo-300 font-semibold mb-2">Datasets</h2>
55
+ <ul>
56
+ <li class="mb-2">
57
+ <a href="#" class="flex items-center p-2 rounded bg-indigo-700">
58
+ <i class="fas fa-server mr-3"></i>
59
+ A1 Benchmark
60
+ </a>
61
+ </li>
62
+ <li class="mb-2">
63
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700">
64
+ <i class="fas fa-server mr-3"></i>
65
+ A2 Benchmark
66
+ </a>
67
+ </li>
68
+ <li class="mb-2">
69
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700">
70
+ <i class="fas fa-server mr-3"></i>
71
+ A3 Benchmark
72
+ </a>
73
+ </li>
74
+ <li class="mb-2">
75
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700">
76
+ <i class="fas fa-server mr-3"></i>
77
+ A4 Benchmark
78
+ </a>
79
+ </li>
80
+ </ul>
81
+ </div>
82
+ <div>
83
+ <h2 class="text-sm uppercase text-indigo-300 font-semibold mb-2">Analysis Tools</h2>
84
+ <ul>
85
+ <li class="mb-2">
86
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700">
87
+ <i class="fas fa-search mr-3"></i>
88
+ Anomaly Detection
89
+ </a>
90
+ </li>
91
+ <li class="mb-2">
92
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700">
93
+ <i class="fas fa-chart-bar mr-3"></i>
94
+ Time Series Analysis
95
+ </a>
96
+ </li>
97
+ <li class="mb-2">
98
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-700">
99
+ <i class="fas fa-cogs mr-3"></i>
100
+ Model Settings
101
+ </a>
102
+ </li>
103
+ </ul>
104
+ </div>
105
+ </nav>
106
+ </div>
107
+
108
+ <!-- Main Content -->
109
+ <div class="flex-1 overflow-auto">
110
+ <!-- Header -->
111
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
112
+ <div>
113
+ <h2 class="text-xl font-semibold text-gray-800">Yahoo Webscope Anomaly Detection</h2>
114
+ <p class="text-sm text-gray-500">Analyzing time series anomalies in real-world data</p>
115
+ </div>
116
+ <div class="flex items-center space-x-4">
117
+ <div class="relative">
118
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
119
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
120
+ </div>
121
+ <div class="flex items-center space-x-2">
122
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white">
123
+ <i class="fas fa-user"></i>
124
+ </div>
125
+ <span class="text-sm font-medium">Analyst</span>
126
+ </div>
127
+ </div>
128
+ </header>
129
+
130
+ <!-- Dashboard Content -->
131
+ <main class="p-6">
132
+ <!-- Stats Cards -->
133
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
134
+ <div class="bg-white rounded-lg shadow p-6">
135
+ <div class="flex items-center justify-between">
136
+ <div>
137
+ <p class="text-sm font-medium text-gray-500">Total Data Points</p>
138
+ <p class="text-2xl font-bold text-gray-800">67,000</p>
139
+ </div>
140
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
141
+ <i class="fas fa-database text-xl"></i>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ <div class="bg-white rounded-lg shadow p-6">
146
+ <div class="flex items-center justify-between">
147
+ <div>
148
+ <p class="text-sm font-medium text-gray-500">Anomalies Detected</p>
149
+ <p class="text-2xl font-bold text-gray-800">1,450</p>
150
+ </div>
151
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
152
+ <i class="fas fa-exclamation-triangle text-xl"></i>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ <div class="bg-white rounded-lg shadow p-6">
157
+ <div class="flex items-center justify-between">
158
+ <div>
159
+ <p class="text-sm font-medium text-gray-500">Detection Accuracy</p>
160
+ <p class="text-2xl font-bold text-gray-800">92.3%</p>
161
+ </div>
162
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
163
+ <i class="fas fa-check-circle text-xl"></i>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="bg-white rounded-lg shadow p-6">
168
+ <div class="flex items-center justify-between">
169
+ <div>
170
+ <p class="text-sm font-medium text-gray-500">Processing Time</p>
171
+ <p class="text-2xl font-bold text-gray-800">1.2s</p>
172
+ </div>
173
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
174
+ <i class="fas fa-stopwatch text-xl"></i>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Main Chart -->
181
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
182
+ <div class="flex justify-between items-center mb-4">
183
+ <h3 class="text-lg font-semibold text-gray-800">Time Series with Anomaly Detection</h3>
184
+ <div class="flex space-x-2">
185
+ <select class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
186
+ <option>Last 7 days</option>
187
+ <option>Last 30 days</option>
188
+ <option selected>Last 90 days</option>
189
+ <option>Last year</option>
190
+ </select>
191
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
192
+ <i class="fas fa-download mr-1"></i> Export
193
+ </button>
194
+ </div>
195
+ </div>
196
+ <div class="chart-container">
197
+ <canvas id="mainChart"></canvas>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Anomaly Details and Model Performance -->
202
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
203
+ <!-- Anomaly Details -->
204
+ <div class="bg-white rounded-lg shadow p-6 col-span-2">
205
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Anomalies</h3>
206
+ <div class="overflow-x-auto">
207
+ <table class="min-w-full divide-y divide-gray-200">
208
+ <thead class="bg-gray-50">
209
+ <tr>
210
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
211
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
212
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expected</th>
213
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deviation</th>
214
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
215
+ </tr>
216
+ </thead>
217
+ <tbody class="bg-white divide-y divide-gray-200">
218
+ <tr>
219
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-15 14:30</td>
220
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">142.56</td>
221
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">98.23</td>
222
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">+45.1%</td>
223
+ <td class="px-6 py-4 whitespace-nowrap">
224
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Spike</span>
225
+ </td>
226
+ </tr>
227
+ <tr>
228
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-12 09:15</td>
229
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">32.11</td>
230
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">68.45</td>
231
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-53.1%</td>
232
+ <td class="px-6 py-4 whitespace-nowrap">
233
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Drop</span>
234
+ </td>
235
+ </tr>
236
+ <tr>
237
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-10 18:45</td>
238
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">215.78</td>
239
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">102.34</td>
240
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">+110.8%</td>
241
+ <td class="px-6 py-4 whitespace-nowrap">
242
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Spike</span>
243
+ </td>
244
+ </tr>
245
+ <tr>
246
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-08 11:20</td>
247
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">45.67</td>
248
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72.89</td>
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-37.3%</td>
250
+ <td class="px-6 py-4 whitespace-nowrap">
251
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Drop</span>
252
+ </td>
253
+ </tr>
254
+ <tr>
255
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-05 16:10</td>
256
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">178.92</td>
257
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">95.67</td>
258
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">+87.0%</td>
259
+ <td class="px-6 py-4 whitespace-nowrap">
260
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Spike</span>
261
+ </td>
262
+ </tr>
263
+ </tbody>
264
+ </table>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Model Performance -->
269
+ <div class="bg-white rounded-lg shadow p-6">
270
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Model Performance</h3>
271
+ <div class="space-y-4">
272
+ <div>
273
+ <div class="flex justify-between mb-1">
274
+ <span class="text-sm font-medium text-gray-700">Precision</span>
275
+ <span class="text-sm font-medium text-gray-700">89.2%</span>
276
+ </div>
277
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
278
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 89.2%"></div>
279
+ </div>
280
+ </div>
281
+ <div>
282
+ <div class="flex justify-between mb-1">
283
+ <span class="text-sm font-medium text-gray-700">Recall</span>
284
+ <span class="text-sm font-medium text-gray-700">92.3%</span>
285
+ </div>
286
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
287
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 92.3%"></div>
288
+ </div>
289
+ </div>
290
+ <div>
291
+ <div class="flex justify-between mb-1">
292
+ <span class="text-sm font-medium text-gray-700">F1 Score</span>
293
+ <span class="text-sm font-medium text-gray-700">90.7%</span>
294
+ </div>
295
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
296
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 90.7%"></div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="mt-6">
302
+ <h4 class="text-md font-medium text-gray-700 mb-2">Confusion Matrix</h4>
303
+ <div class="grid grid-cols-3 gap-1 text-center text-xs">
304
+ <div class="p-2"></div>
305
+ <div class="p-2 font-medium">Predicted Anomaly</div>
306
+ <div class="p-2 font-medium">Predicted Normal</div>
307
+ <div class="p-2 font-medium">Actual Anomaly</div>
308
+ <div class="p-2 bg-green-100 text-green-800 rounded">1,234 (TP)</div>
309
+ <div class="p-2 bg-red-100 text-red-800 rounded">102 (FN)</div>
310
+ <div class="p-2 font-medium">Actual Normal</div>
311
+ <div class="p-2 bg-red-100 text-red-800 rounded">114 (FP)</div>
312
+ <div class="p-2 bg-green-100 text-green-800 rounded">65,550 (TN)</div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="mt-6">
317
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
318
+ <i class="fas fa-cog mr-2"></i> Tune Model Parameters
319
+ </button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </main>
324
+ </div>
325
+ </div>
326
+
327
+ <script>
328
+ // Generate sample data for the chart
329
+ function generateTimeSeriesData() {
330
+ const data = [];
331
+ const anomalies = [];
332
+ let value = 100;
333
+
334
+ for (let i = 0; i < 90; i++) {
335
+ // Base value with some noise
336
+ value = 100 + Math.sin(i / 5) * 30 + (Math.random() * 10 - 5);
337
+
338
+ // Add some anomalies
339
+ if (i === 15 || i === 45 || i === 70) {
340
+ value += 60 + Math.random() * 40;
341
+ anomalies.push({x: i, y: value});
342
+ } else if (i === 30 || i === 60) {
343
+ value -= 50 + Math.random() * 30;
344
+ anomalies.push({x: i, y: value});
345
+ }
346
+
347
+ data.push(value);
348
+ }
349
+
350
+ return {data, anomalies};
351
+ }
352
+
353
+ // Initialize the main chart
354
+ function initMainChart() {
355
+ const {data, anomalies} = generateTimeSeriesData();
356
+ const ctx = document.getElementById('mainChart').getContext('2d');
357
+
358
+ const chart = new Chart(ctx, {
359
+ type: 'line',
360
+ data: {
361
+ labels: Array.from({length: 90}, (_, i) => `Day ${i+1}`),
362
+ datasets: [
363
+ {
364
+ label: 'Time Series Data',
365
+ data: data,
366
+ borderColor: 'rgb(79, 70, 229)',
367
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
368
+ borderWidth: 2,
369
+ fill: true,
370
+ tension: 0.1
371
+ },
372
+ {
373
+ label: 'Anomalies',
374
+ data: data.map((val, idx) => {
375
+ const anomaly = anomalies.find(a => a.x === idx);
376
+ return anomaly ? anomaly.y : null;
377
+ }),
378
+ pointBackgroundColor: 'rgb(239, 68, 68)',
379
+ pointRadius: 5,
380
+ pointHoverRadius: 7,
381
+ showLine: false
382
+ }
383
+ ]
384
+ },
385
+ options: {
386
+ responsive: true,
387
+ maintainAspectRatio: false,
388
+ plugins: {
389
+ tooltip: {
390
+ mode: 'index',
391
+ intersect: false,
392
+ },
393
+ legend: {
394
+ position: 'top',
395
+ }
396
+ },
397
+ scales: {
398
+ y: {
399
+ beginAtZero: false,
400
+ grid: {
401
+ color: 'rgba(0, 0, 0, 0.05)',
402
+ }
403
+ },
404
+ x: {
405
+ grid: {
406
+ display: false
407
+ }
408
+ }
409
+ },
410
+ interaction: {
411
+ mode: 'nearest',
412
+ axis: 'x',
413
+ intersect: false
414
+ }
415
+ }
416
+ });
417
+
418
+ // Add custom tooltips for anomalies
419
+ const chartContainer = document.querySelector('.chart-container');
420
+ anomalies.forEach(anomaly => {
421
+ const marker = document.createElement('div');
422
+ marker.className = 'anomaly-marker';
423
+ marker.style.left = `${(anomaly.x / 89) * 100}%`;
424
+ marker.style.top = `${100 - ((anomaly.y - 50) / 200) * 100}%`;
425
+
426
+ const tooltip = document.createElement('div');
427
+ tooltip.className = 'tooltip';
428
+ tooltip.innerHTML = `
429
+ <div class="font-bold">Anomaly Detected</div>
430
+ <div>Value: ${anomaly.y.toFixed(2)}</div>
431
+ <div>Day ${anomaly.x + 1}</div>
432
+ `;
433
+
434
+ marker.addEventListener('mouseover', () => {
435
+ tooltip.style.opacity = '1';
436
+ tooltip.style.left = `${(anomaly.x / 89) * 100 + 2}%`;
437
+ tooltip.style.top = `${100 - ((anomaly.y - 50) / 200) * 100 - 10}%`;
438
+ });
439
+
440
+ marker.addEventListener('mouseout', () => {
441
+ tooltip.style.opacity = '0';
442
+ });
443
+
444
+ chartContainer.appendChild(marker);
445
+ chartContainer.appendChild(tooltip);
446
+ });
447
+ }
448
+
449
+ // Initialize when DOM is loaded
450
+ document.addEventListener('DOMContentLoaded', function() {
451
+ initMainChart();
452
+
453
+ // Add click event to sidebar items
454
+ document.querySelectorAll('.sidebar a').forEach(link => {
455
+ link.addEventListener('click', function(e) {
456
+ e.preventDefault();
457
+ document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('bg-indigo-700'));
458
+ this.classList.add('bg-indigo-700');
459
+ });
460
+ });
461
+ });
462
+ </script>
463
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Daniela-C/yahoo-webscope-anomaly-detection-dataset" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
464
+ </html>