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