bubble-chart-js 1.0.19 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/README.md +1 -1
  2. package/demo/glassmorphism.html +323 -0
  3. package/demo/index.html +739 -0
  4. package/dist/bubbleChart.cjs.js +1 -1
  5. package/dist/bubbleChart.esm.js +1 -1
  6. package/dist/bubbleChart.umd.js +1 -1
  7. package/docs/documentation.html +438 -0
  8. package/docs/examples.html +689 -0
  9. package/docs/index.html +432 -0
  10. package/docs/landing_test.html +337 -0
  11. package/docs/playground.html +345 -0
  12. package/docs/process_html.js +105 -0
  13. package/docs/temp/5a86d.html +248 -0
  14. package/docs/temp/b0cbe.html +276 -0
  15. package/docs/temp/docs_desktop.html +341 -0
  16. package/docs/temp/docs_mobile.html +291 -0
  17. package/docs/temp/examples_desktop.html +372 -0
  18. package/docs/temp/examples_mobile.html +317 -0
  19. package/docs/temp/landing_desktop.html +337 -0
  20. package/docs/temp/landing_mobile.html +270 -0
  21. package/docs/temp/playground_desktop.html +283 -0
  22. package/docs/temp/playground_mobile.html +236 -0
  23. package/examples/test.html +194 -0
  24. package/examples/test2.html +103 -0
  25. package/package.json +7 -3
  26. package/scripts/generate-fixtures.ts +45 -0
  27. package/spec/config-defaults.json +16 -0
  28. package/spec/fixtures/3-bubbles.expected.json +27 -0
  29. package/spec/fixtures/3-bubbles.input.json +10 -0
  30. package/spec/fixtures/equal-values.expected.json +34 -0
  31. package/spec/fixtures/equal-values.input.json +11 -0
  32. package/spec/fixtures/many-bubbles.expected.json +76 -0
  33. package/spec/fixtures/many-bubbles.input.json +17 -0
  34. package/spec/fixtures/single-bubble.expected.json +13 -0
  35. package/spec/fixtures/single-bubble.input.json +8 -0
  36. package/spec/physics.json +11 -0
  37. package/tsconfig.scripts.json +8 -0
  38. package/dist/canvas.d.ts +0 -5
  39. package/dist/constants/app-constants.d.ts +0 -3
  40. package/dist/constants/physics.d.ts +0 -10
  41. package/dist/core/renderer.d.ts +0 -2
  42. package/dist/features/text-wrapper.d.ts +0 -2
  43. package/dist/features/tooltip.d.ts +0 -6
  44. package/dist/index.d.ts +0 -8
  45. package/dist/models/internal/data-item-info.d.ts +0 -7
  46. package/dist/models/public/bubble-chart.d.ts +0 -6
  47. package/dist/models/public/config/bubble-appearance.d.ts +0 -26
  48. package/dist/models/public/config/font-options.d.ts +0 -46
  49. package/dist/models/public/config/interaction-options.d.ts +0 -6
  50. package/dist/models/public/config/tooltip-config.d.ts +0 -4
  51. package/dist/models/public/config/tooltip-options.d.ts +0 -170
  52. package/dist/models/public/configuration.d.ts +0 -30
  53. package/dist/models/public/data-item.d.ts +0 -8
  54. package/dist/services/chart-service.d.ts +0 -5
  55. package/dist/services/render-service.d.ts +0 -3
  56. package/dist/utils/config.d.ts +0 -12
  57. package/dist/utils/helper.d.ts +0 -2
  58. package/dist/utils/validation.d.ts +0 -5
package/docs/index.html ADDED
@@ -0,0 +1,432 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="dark" lang="en">
4
+
5
+ <head>
6
+ <meta charset="utf-8" />
7
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
8
+ <title>bubble-chart-js | High Performance Bubble Charts</title>
9
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&amp;family=Inter:wght@400;500&amp;family=Space+Grotesk:wght@500&amp;display=swap"
12
+ rel="stylesheet" />
13
+ <link
14
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
15
+ rel="stylesheet" />
16
+ <link
17
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
18
+ rel="stylesheet" />
19
+ <script id="tailwind-config">
20
+ tailwind.config = {
21
+ darkMode: "class",
22
+ theme: {
23
+ extend: {
24
+ colors: {
25
+ "surface": "#090e1c",
26
+ "on-tertiary-container": "#005b29",
27
+ "on-error": "#490006",
28
+ "on-surface-variant": "#a6aabf",
29
+ "outline-variant": "#434759",
30
+ "surface-tint": "#72dcff",
31
+ "on-secondary-fixed": "#580078",
32
+ "surface-container": "#13192b",
33
+ "tertiary-fixed-dim": "#33ec7b",
34
+ "surface-container-highest": "#1e253b",
35
+ "error-container": "#9f0519",
36
+ "on-primary-fixed-variant": "#004c5e",
37
+ "on-tertiary-fixed-variant": "#00662e",
38
+ "inverse-surface": "#faf8ff",
39
+ "on-secondary-container": "#f1bfff",
40
+ "primary-fixed": "#00d2ff",
41
+ "on-surface": "#e1e4fa",
42
+ "secondary": "#dd8bfb",
43
+ "surface-variant": "#1e253b",
44
+ "primary-fixed-dim": "#00c3ed",
45
+ "surface-bright": "#242b43",
46
+ "on-primary-fixed": "#002c38",
47
+ "error-dim": "#d7383b",
48
+ "surface-dim": "#090e1c",
49
+ "on-secondary": "#4c0068",
50
+ "tertiary-dim": "#33ec7b",
51
+ "background": "#090e1c",
52
+ "secondary-dim": "#ce7eec",
53
+ "inverse-on-surface": "#505466",
54
+ "secondary-fixed-dim": "#ebadff",
55
+ "inverse-primary": "#00687f",
56
+ "tertiary": "#a6ffb5",
57
+ "on-error-container": "#ffa8a3",
58
+ "on-tertiary-fixed": "#00461e",
59
+ "tertiary-container": "#49fb87",
60
+ "surface-container-high": "#181f33",
61
+ "error": "#ff716c",
62
+ "primary-dim": "#00c3ed",
63
+ "secondary-container": "#6e208c",
64
+ "on-tertiary": "#00652e",
65
+ "on-primary": "#004c5e",
66
+ "surface-container-low": "#0d1323",
67
+ "on-primary-container": "#004253",
68
+ "outline": "#707588",
69
+ "on-background": "#e1e4fa",
70
+ "surface-container-lowest": "#000000",
71
+ "primary-container": "#00d2ff",
72
+ "on-secondary-fixed-variant": "#792c97",
73
+ "primary": "#72dcff",
74
+ "tertiary-fixed": "#49fb87",
75
+ "secondary-fixed": "#f2c1ff"
76
+ },
77
+ fontFamily: {
78
+ "headline": ["Manrope"],
79
+ "body": ["Inter"],
80
+ "label": ["Space Grotesk"]
81
+ },
82
+ borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
83
+ },
84
+ },
85
+ }
86
+ </script>
87
+ <style>
88
+ .material-symbols-outlined {
89
+ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
90
+ }
91
+
92
+ .glass-panel {
93
+ background: rgba(30, 37, 59, 0.6);
94
+ backdrop-filter: blur(12px);
95
+ border: 1px solid rgba(67, 71, 89, 0.15);
96
+ }
97
+
98
+ .neon-glow-primary {
99
+ box-shadow: 0 0 20px rgba(114, 220, 255, 0.2);
100
+ }
101
+
102
+ .hero-gradient {
103
+ background: radial-gradient(circle at 50% 50%, rgba(114, 220, 255, 0.08) 0%, transparent 70%);
104
+ }
105
+
106
+ .floating-bubble {
107
+ position: absolute;
108
+ border-radius: 50%;
109
+ background: linear-gradient(135deg, rgba(114, 220, 255, 0.15) 0%, rgba(221, 139, 251, 0.1) 100%);
110
+ filter: blur(40px);
111
+ z-index: -1;
112
+ }
113
+ </style>
114
+ </head>
115
+
116
+ <body class="bg-background text-on-surface font-body selection:bg-primary/30 overflow-x-hidden">
117
+ <!-- TopNavBar Component -->
118
+ <header class="fixed top-0 w-full z-50 bg-[#090e1c]/60 backdrop-blur-xl">
119
+ <nav class="flex justify-between items-center h-16 px-8 max-w-7xl mx-auto">
120
+ <div class="flex items-center gap-2">
121
+ <a href="index.html" class="flex items-center gap-2 hover:opacity-80 transition-opacity"><span
122
+ class="text-xl font-black text-[#72dcff] tracking-tighter font-headline">bubble-chart-js</span></a>
123
+ </div>
124
+ <div id="mobile-menu"
125
+ class="hidden md:flex flex-col md:flex-row absolute md:relative top-16 md:top-0 left-0 w-full md:w-auto bg-[#090e1c]/95 md:bg-transparent p-6 md:p-0 items-center gap-8 font-headline font-bold tracking-tight border-b md:border-none border-outline-variant/15 md:flex-1 md:justify-center">
126
+ <a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
127
+ href="documentation.html">Docs</a>
128
+ <a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
129
+ href="examples.html">Examples</a>
130
+ <a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
131
+ href="playground.html">Playground</a>
132
+ <a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
133
+ href="https://github.com/praga-dev/bubble-chart-js" target="_blank"
134
+ rel="noopener noreferrer">GitHub</a>
135
+ </div>
136
+ <div class="flex items-center gap-4">
137
+ <button id="menu-btn"
138
+ class="md:hidden material-symbols-outlined text-[#e1e4fa] hover:text-[#72dcff] transition-colors">menu</button>
139
+ <button
140
+ class="material-symbols-outlined text-[#e1e4fa]/80 hover:text-[#72dcff] transition-colors">dark_mode</button>
141
+ <a class="bg-primary text-on-primary-fixed px-5 py-2 rounded-xl font-bold font-headline text-sm hover:scale-95 transition-all duration-200"
142
+ href="https://github.com/praga-dev/bubble-chart-js" target="_blank" rel="noopener noreferrer">Get
143
+ Started</a>
144
+ </div>
145
+ </nav>
146
+ </header>
147
+ <main class="relative pt-16">
148
+ <!-- Decorative Background Elements -->
149
+ <div class="hero-gradient absolute inset-0 pointer-events-none"></div>
150
+ <div class="floating-bubble w-96 h-96 top-20 -left-20"></div>
151
+ <div class="floating-bubble w-[500px] h-[500px] bottom-0 -right-40 opacity-40"></div>
152
+ <!-- Hero Section -->
153
+ <section class="max-w-7xl mx-auto px-8 py-20 lg:py-32 grid lg:grid-cols-2 gap-12 items-center">
154
+ <div class="space-y-8">
155
+ <div
156
+ class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-surface-container-highest border border-outline-variant/15">
157
+ <span class="w-2 h-2 rounded-full bg-tertiary"></span>
158
+ <span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Version 2.4.0 Now
159
+ Live</span>
160
+ </div>
161
+ <h1
162
+ class="text-5xl lg:text-7xl font-extrabold font-headline leading-[1.1] tracking-tight text-on-surface">
163
+ Bubble Chart Engine for <span
164
+ class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Modern Web
165
+ Apps</span>
166
+ </h1>
167
+ <p class="text-lg lg:text-xl text-on-surface-variant max-w-xl font-body leading-relaxed">
168
+ High-performance, extensible packed bubble charts with SVG + Canvas + Physics layout. Built for
169
+ atmospheric data visualization.
170
+ </p>
171
+ <div class="flex flex-wrap gap-4 pt-4">
172
+ <a href="documentation.html"
173
+ class="px-8 py-4 bg-gradient-to-br from-primary to-primary-dim text-on-primary-fixed font-bold font-headline rounded-xl shadow-lg shadow-primary/20 hover:scale-95 transition-transform">
174
+ Get Started
175
+ </a>
176
+ <a href="playground.html"
177
+ class="px-8 py-4 glass-panel text-on-surface font-bold font-headline rounded-xl hover:bg-surface-variant/40 transition-colors text-center inline-block">
178
+ View Playground
179
+ </a>
180
+ </div>
181
+ <div class="flex items-center gap-8 pt-6">
182
+ <div class="flex -space-x-3">
183
+ <div
184
+ class="w-10 h-10 rounded-full bg-surface-container-highest border-2 border-background flex items-center justify-center text-xs font-bold text-primary">
185
+ JS</div>
186
+ <div
187
+ class="w-10 h-10 rounded-full bg-surface-container-highest border-2 border-background flex items-center justify-center text-xs font-bold text-secondary">
188
+ TS</div>
189
+ <div
190
+ class="w-10 h-10 rounded-full bg-surface-container-highest border-2 border-background flex items-center justify-center text-xs font-bold text-tertiary">
191
+ R</div>
192
+ </div>
193
+ <div class="h-8 w-px bg-outline-variant/20"></div>
194
+ <div class="text-sm font-label text-on-surface-variant">
195
+ Used by <span class="text-on-surface font-bold">1,200+</span> developers weekly
196
+ </div>
197
+ </div>
198
+ </div>
199
+ <!-- Signature Live Chart Shell -->
200
+ <div class="relative group">
201
+ <div
202
+ class="absolute inset-0 bg-primary/20 blur-[100px] rounded-full group-hover:bg-secondary/20 transition-colors duration-700">
203
+ </div>
204
+ <div
205
+ class="glass-panel p-6 rounded-3xl relative overflow-hidden aspect-square flex items-center justify-center">
206
+ <!-- Placeholder for Chart Rendering -->
207
+ <div class="w-full h-full relative">
208
+ <!-- Simulated Bubbles -->
209
+ <div
210
+ class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-primary/30 backdrop-blur-md flex items-center justify-center text-on-surface text-xs font-bold border border-primary/20 neon-glow-primary">
211
+ React</div>
212
+ <div
213
+ class="absolute bottom-1/3 left-1/2 w-48 h-48 rounded-full bg-secondary/20 backdrop-blur-md flex items-center justify-center text-on-surface text-sm font-bold border border-secondary/20">
214
+ Vue.js</div>
215
+ <div
216
+ class="absolute top-1/2 right-10 w-24 h-24 rounded-full bg-tertiary/20 backdrop-blur-md flex items-center justify-center text-on-surface text-xs font-bold border border-tertiary/20">
217
+ Svelte</div>
218
+ <div
219
+ class="absolute bottom-10 left-10 w-20 h-20 rounded-full bg-on-surface-variant/10 backdrop-blur-md border border-outline-variant/15">
220
+ </div>
221
+ <div
222
+ class="absolute top-10 right-1/4 w-16 h-16 rounded-full bg-primary/10 backdrop-blur-md border border-primary/10">
223
+ </div>
224
+ <!-- Connecting Lines/Physics visualization -->
225
+ <svg class="absolute inset-0 w-full h-full pointer-events-none opacity-30"
226
+ viewbox="0 0 400 400">
227
+ <circle class="text-outline-variant" cx="200" cy="200" fill="none" r="180"
228
+ stroke="currentColor" stroke-dasharray="4 4" stroke-width="1"></circle>
229
+ </svg>
230
+ </div>
231
+ <!-- Micro-UI Overlay -->
232
+ <div
233
+ class="absolute bottom-6 left-6 right-6 flex justify-between items-center px-4 py-3 bg-surface-container-lowest/80 backdrop-blur-md rounded-xl border border-outline-variant/10">
234
+ <div class="flex items-center gap-3">
235
+ <span class="material-symbols-outlined text-primary text-sm">bolt</span>
236
+ <span class="font-label text-[10px] uppercase tracking-tighter">Physics Active: 60fps</span>
237
+ </div>
238
+ <div class="flex gap-2">
239
+ <div class="w-2 h-2 rounded-full bg-tertiary"></div>
240
+ <div class="w-2 h-2 rounded-full bg-outline-variant"></div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </section>
246
+ <!-- Features Section -->
247
+ <section class="max-w-7xl mx-auto px-8 py-24">
248
+ <div class="mb-16">
249
+ <span class="font-label text-secondary text-sm font-bold tracking-widest uppercase">Performance
250
+ Architecture</span>
251
+ <h2 class="text-4xl font-headline font-extrabold mt-2 text-on-surface">Engineered for Complexity</h2>
252
+ </div>
253
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
254
+ <!-- Dual Renderer -->
255
+ <div class="glass-panel p-8 rounded-2xl group hover:bg-surface-variant/30 transition-all duration-300">
256
+ <div
257
+ class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
258
+ <span class="material-symbols-outlined text-primary">layers</span>
259
+ </div>
260
+ <h3 class="text-xl font-headline font-bold text-on-surface mb-3">Dual Renderer (SVG + Canvas)</h3>
261
+ <p class="text-on-surface-variant text-sm leading-relaxed">
262
+ Seamlessly switch between high-fidelity SVG for small sets and blazing-fast Canvas for 10k+
263
+ entities.
264
+ </p>
265
+ </div>
266
+ <!-- Physics Layout -->
267
+ <div class="glass-panel p-8 rounded-2xl group hover:bg-surface-variant/30 transition-all duration-300">
268
+ <div
269
+ class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
270
+ <span class="material-symbols-outlined text-secondary">hub</span>
271
+ </div>
272
+ <h3 class="text-xl font-headline font-bold text-on-surface mb-3">Physics-based layout</h3>
273
+ <p class="text-on-surface-variant text-sm leading-relaxed">
274
+ Custom many-body force simulation ensures optimal packing with zero overlap and fluid
275
+ transitions.
276
+ </p>
277
+ </div>
278
+ <!-- Plugin System -->
279
+ <div class="glass-panel p-8 rounded-2xl group hover:bg-surface-variant/30 transition-all duration-300">
280
+ <div
281
+ class="w-12 h-12 bg-tertiary/10 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
282
+ <span class="material-symbols-outlined text-tertiary">extension</span>
283
+ </div>
284
+ <h3 class="text-xl font-headline font-bold text-on-surface mb-3">Layer Hooks / Plugin system</h3>
285
+ <p class="text-on-surface-variant text-sm leading-relaxed">
286
+ Inject custom logic at any stage of the render lifecycle. Build custom tools, tooltips, and
287
+ brushes.
288
+ </p>
289
+ </div>
290
+ <!-- Deterministic Mode -->
291
+ <div class="glass-panel p-8 rounded-2xl group hover:bg-surface-variant/30 transition-all duration-300">
292
+ <div
293
+ class="w-12 h-12 bg-on-surface-variant/10 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
294
+ <span class="material-symbols-outlined text-on-surface-variant">grid_view</span>
295
+ </div>
296
+ <h3 class="text-xl font-headline font-bold text-on-surface mb-3">Deterministic mode</h3>
297
+ <p class="text-on-surface-variant text-sm leading-relaxed">
298
+ Guarantee consistent layouts across reloads and devices using seeded randomization algorithms.
299
+ </p>
300
+ </div>
301
+ <!-- Auto-sleep -->
302
+ <div class="glass-panel p-8 rounded-2xl group hover:bg-surface-variant/30 transition-all duration-300">
303
+ <div
304
+ class="w-12 h-12 bg-error/10 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
305
+ <span class="material-symbols-outlined text-error">bedtime</span>
306
+ </div>
307
+ <h3 class="text-xl font-headline font-bold text-on-surface mb-3">Auto-sleep optimization</h3>
308
+ <p class="text-on-surface-variant text-sm leading-relaxed">
309
+ Preserve battery and CPU cycles by automatically pausing calculations once the layout
310
+ stabilizes.
311
+ </p>
312
+ </div>
313
+ <!-- High performance -->
314
+ <div class="glass-panel p-8 rounded-2xl group hover:bg-surface-variant/30 transition-all duration-300">
315
+ <div
316
+ class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
317
+ <span class="material-symbols-outlined text-primary">rocket_launch</span>
318
+ </div>
319
+ <h3 class="text-xl font-headline font-bold text-on-surface mb-3">High performance</h3>
320
+ <p class="text-on-surface-variant text-sm leading-relaxed">
321
+ Zero-dependency core clocking in at under 12kb gzipped. Optimized for the modern web stack.
322
+ </p>
323
+ </div>
324
+ </div>
325
+ </section>
326
+ <!-- Live Code Block Section -->
327
+ <section class="max-w-7xl mx-auto px-8 py-24">
328
+ <div class="grid lg:grid-cols-5 gap-12 items-center">
329
+ <div class="lg:col-span-2">
330
+ <h2 class="text-4xl font-headline font-extrabold text-on-surface mb-6">Simple API,<br />Infinite
331
+ Depth</h2>
332
+ <p class="text-on-surface-variant mb-8 leading-relaxed">
333
+ Initializing a complex physics-based bubble chart takes less than 10 lines of code. Declarative
334
+ configuration with reactive updates.
335
+ </p>
336
+ <ul class="space-y-4">
337
+ <li class="flex items-center gap-3">
338
+ <span class="material-symbols-outlined text-tertiary">check_circle</span>
339
+ <span class="text-sm font-label uppercase">TypeScript First</span>
340
+ </li>
341
+ <li class="flex items-center gap-3">
342
+ <span class="material-symbols-outlined text-tertiary">check_circle</span>
343
+ <span class="text-sm font-label uppercase">Zero Dependencies</span>
344
+ </li>
345
+ </ul>
346
+ </div>
347
+ <div class="lg:col-span-3">
348
+ <div
349
+ class="bg-surface-container-lowest rounded-2xl overflow-hidden shadow-2xl border border-outline-variant/15">
350
+ <div
351
+ class="flex items-center gap-2 px-4 py-3 bg-surface-container-high border-b border-outline-variant/10">
352
+ <div class="w-3 h-3 rounded-full bg-error/40"></div>
353
+ <div class="w-3 h-3 rounded-full bg-tertiary/40"></div>
354
+ <div class="w-3 h-3 rounded-full bg-primary/40"></div>
355
+ <span class="ml-4 text-xs font-label text-on-surface-variant opacity-60">app.ts</span>
356
+ </div>
357
+ <div class="p-6 font-mono text-sm leading-relaxed overflow-x-auto">
358
+ <pre
359
+ class="text-[#a6ffb5]">import <span class="text-secondary">{ BubbleChart }</span> from <span class="text-[#72dcff]">'bubble-chart-js'</span>;</pre>
360
+ <pre
361
+ class="mt-2 text-on-surface-variant"><span class="text-secondary">const</span> chart = <span class="text-secondary">new</span> <span class="text-primary">BubbleChart</span>({</pre>
362
+ <pre
363
+ class="text-on-surface-variant"> container: <span class="text-[#72dcff]">'#viz'</span>,</pre>
364
+ <pre
365
+ class="text-on-surface-variant"> renderer: <span class="text-[#72dcff]">'canvas'</span>,</pre>
366
+ <pre class="text-on-surface-variant"> physics: {</pre>
367
+ <pre
368
+ class="text-on-surface-variant"> strength: <span class="text-tertiary">0.05</span>,</pre>
369
+ <pre class="text-on-surface-variant"> padding: <span class="text-tertiary">2</span></pre>
370
+ <pre class="text-on-surface-variant"> }</pre>
371
+ <pre class="text-on-surface-variant">});</pre>
372
+ <pre class="mt-4 text-on-surface-variant">chart.render(data);</pre>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </section>
378
+ </main>
379
+ <!-- Footer Component -->
380
+ <footer class="w-full py-12 px-8 bg-[#090e1c] border-t border-[#434759]/15 mt-20">
381
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-7xl mx-auto">
382
+ <div class="col-span-1 md:col-span-1">
383
+ <a href="index.html"
384
+ class="text-lg font-bold text-[#72dcff] font-headline block hover:opacity-80">bubble-chart-js</a>
385
+ <p class="mt-4 text-sm text-[#e1e4fa]/60 font-body">
386
+ Built for atmospheric data visualization. Light as a bubble, heavy on features.
387
+ </p>
388
+ </div>
389
+ <div class="flex flex-col gap-3">
390
+ <span class="font-label text-xs uppercase text-on-surface-variant tracking-widest mb-2">Resources</span>
391
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm"
392
+ href="documentation.html">Docs</a>
393
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm" href="#">License</a>
394
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm" href="#">API Reference</a>
395
+ </div>
396
+ <div class="flex flex-col gap-3">
397
+ <span class="font-label text-xs uppercase text-on-surface-variant tracking-widest mb-2">Community</span>
398
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm"
399
+ href="https://github.com/praga-dev/bubble-chart-js" target="_blank"
400
+ rel="noopener noreferrer">GitHub</a>
401
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm" href="#">Twitter</a>
402
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm" href="#">Discord</a>
403
+ </div>
404
+ <div class="flex flex-col gap-3">
405
+ <span class="font-label text-xs uppercase text-on-surface-variant tracking-widest mb-2">Legal</span>
406
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm" href="#">Privacy Policy</a>
407
+ <a class="text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity text-sm" href="#">Terms of
408
+ Service</a>
409
+ </div>
410
+ </div>
411
+ <div class="max-w-7xl mx-auto mt-12 pt-8 border-t border-outline-variant/10 text-center">
412
+ <p class="text-sm text-[#e1e4fa]/60 font-body">
413
+ © 2024 bubble-chart-js. Built for atmospheric data visualization.
414
+ </p>
415
+ </div>
416
+ </footer>
417
+
418
+ <script>
419
+ document.addEventListener('DOMContentLoaded', () => {
420
+ const menuBtn = document.getElementById('menu-btn');
421
+ const mobileMenu = document.getElementById('mobile-menu');
422
+ if (menuBtn && mobileMenu) {
423
+ menuBtn.addEventListener('click', () => {
424
+ mobileMenu.classList.toggle('hidden');
425
+ mobileMenu.classList.toggle('flex');
426
+ });
427
+ }
428
+ });
429
+ </script>
430
+ </body>
431
+
432
+ </html>