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,438 @@
|
|
|
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>Documentation | bubble-chart-js</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&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap"
|
|
12
|
+
rel="stylesheet" />
|
|
13
|
+
<link
|
|
14
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
|
15
|
+
rel="stylesheet" />
|
|
16
|
+
<link
|
|
17
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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
|
+
.glass-panel {
|
|
89
|
+
background: rgba(30, 37, 59, 0.6);
|
|
90
|
+
backdrop-filter: blur(12px);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.material-symbols-outlined {
|
|
94
|
+
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
body {
|
|
98
|
+
background-color: #090e1c;
|
|
99
|
+
color: #e1e4fa;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
::-webkit-scrollbar {
|
|
103
|
+
width: 8px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
::-webkit-scrollbar-track {
|
|
107
|
+
background: #090e1c;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
::-webkit-scrollbar-thumb {
|
|
111
|
+
background: #1e253b;
|
|
112
|
+
border-radius: 10px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
::-webkit-scrollbar-thumb:hover {
|
|
116
|
+
background: #434759;
|
|
117
|
+
}
|
|
118
|
+
</style>
|
|
119
|
+
</head>
|
|
120
|
+
|
|
121
|
+
<body class="font-body selection:bg-primary selection:text-on-primary-fixed">
|
|
122
|
+
<!-- TopNavBar -->
|
|
123
|
+
<header class="fixed top-0 w-full z-50 bg-[#090e1c]/60 backdrop-blur-xl shadow-[0_20px_40px_rgba(0,0,0,0.4)]">
|
|
124
|
+
<div class="flex justify-between items-center h-16 px-8 max-w-7xl mx-auto">
|
|
125
|
+
<div class="flex items-center gap-2">
|
|
126
|
+
<a href="index.html" class="flex items-center gap-2 hover:opacity-80 transition-opacity"><span
|
|
127
|
+
class="text-xl font-black text-[#72dcff] tracking-tighter font-headline">bubble-chart-js</span></a>
|
|
128
|
+
</div>
|
|
129
|
+
<nav id="mobile-menu"
|
|
130
|
+
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 space-y-6 md:space-y-0 md:space-x-8 font-headline font-bold tracking-tight border-b md:border-none border-outline-variant/15 shadow-[0_20px_40px_rgba(0,0,0,0.4)] md:shadow-none">
|
|
131
|
+
<a class="text-[#72dcff] border-b-2 border-[#72dcff] pb-1 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
132
|
+
href="documentation.html">Docs</a>
|
|
133
|
+
<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
134
|
+
href="examples.html">Examples</a>
|
|
135
|
+
<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
136
|
+
href="playground.html">Playground</a>
|
|
137
|
+
<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300"
|
|
138
|
+
href="https://github.com/praga-dev/bubble-chart-js">GitHub</a>
|
|
139
|
+
</nav>
|
|
140
|
+
<div class="flex items-center gap-4">
|
|
141
|
+
<button id="menu-btn"
|
|
142
|
+
class="md:hidden material-symbols-outlined text-[#e1e4fa] hover:text-[#72dcff] transition-colors">menu</button>
|
|
143
|
+
<button
|
|
144
|
+
class="material-symbols-outlined text-[#e1e4fa] opacity-80 hover:text-[#72dcff] transition-colors">dark_mode</button>
|
|
145
|
+
<button
|
|
146
|
+
class="bg-gradient-to-br from-primary to-primary-fixed-dim text-on-primary-fixed font-headline font-bold px-5 py-2 rounded-md active:scale-95 duration-200">Get
|
|
147
|
+
Started</button>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</header>
|
|
151
|
+
<div class="flex max-w-7xl mx-auto pt-16">
|
|
152
|
+
<!-- Sidebar Navigation -->
|
|
153
|
+
<aside id="mobile-sidebar"
|
|
154
|
+
class="hidden md:block w-full md:w-72 h-[calc(100vh-4rem)] absolute md:relative top-0 md:top-16 left-0 bg-[#090e1c] md:bg-transparent z-40 overflow-y-auto px-8 py-10 border-r border-outline-variant/15 pb-32">
|
|
155
|
+
<nav class="space-y-8">
|
|
156
|
+
<div>
|
|
157
|
+
<h5 class="font-label text-xs uppercase tracking-widest text-primary mb-4">Getting Started</h5>
|
|
158
|
+
<ul class="space-y-3">
|
|
159
|
+
<li><a class="text-on-surface hover:text-secondary transition-colors text-sm font-medium"
|
|
160
|
+
href="#">Introduction</a></li>
|
|
161
|
+
<li><a class="text-primary font-bold transition-colors text-sm" href="#">Installation</a></li>
|
|
162
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
163
|
+
href="#">Basic Usage</a></li>
|
|
164
|
+
</ul>
|
|
165
|
+
</div>
|
|
166
|
+
<div>
|
|
167
|
+
<h5 class="font-label text-xs uppercase tracking-widest text-primary mb-4">Configuration</h5>
|
|
168
|
+
<ul class="space-y-3">
|
|
169
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
170
|
+
href="#">Main Settings</a></li>
|
|
171
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
172
|
+
href="#">Theme Engine</a></li>
|
|
173
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
174
|
+
href="#">Scaling Rules</a></li>
|
|
175
|
+
</ul>
|
|
176
|
+
</div>
|
|
177
|
+
<div>
|
|
178
|
+
<h5 class="font-label text-xs uppercase tracking-widest text-primary mb-4">API Reference</h5>
|
|
179
|
+
<ul class="space-y-3">
|
|
180
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
181
|
+
href="#">container</a></li>
|
|
182
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
183
|
+
href="#">data</a></li>
|
|
184
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
185
|
+
href="#">renderer</a></li>
|
|
186
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
187
|
+
href="#">physics</a></li>
|
|
188
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
189
|
+
href="#">seed</a></li>
|
|
190
|
+
</ul>
|
|
191
|
+
</div>
|
|
192
|
+
<div>
|
|
193
|
+
<h5 class="font-label text-xs uppercase tracking-widest text-primary mb-4">Advanced</h5>
|
|
194
|
+
<ul class="space-y-3">
|
|
195
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
196
|
+
href="#">Events</a></li>
|
|
197
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
198
|
+
href="#">Renderer (SVG / Canvas)</a></li>
|
|
199
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
200
|
+
href="#">Physics Engine</a></li>
|
|
201
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
202
|
+
href="#">Layer Hooks</a></li>
|
|
203
|
+
<li><a class="text-on-surface-variant hover:text-secondary transition-colors text-sm"
|
|
204
|
+
href="#">Performance Tips</a></li>
|
|
205
|
+
</ul>
|
|
206
|
+
</div>
|
|
207
|
+
</nav>
|
|
208
|
+
</aside>
|
|
209
|
+
<!-- Main Content Area -->
|
|
210
|
+
<main class="flex-1 px-8 md:px-12 py-10 max-w-4xl">
|
|
211
|
+
<!-- Hero Breadcrumb/Intro -->
|
|
212
|
+
<div class="mb-12">
|
|
213
|
+
<div
|
|
214
|
+
class="flex items-center gap-2 text-on-surface-variant font-label text-xs uppercase mb-4 tracking-wider">
|
|
215
|
+
<span>Docs</span>
|
|
216
|
+
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
|
217
|
+
<span class="text-primary">Installation</span>
|
|
218
|
+
</div>
|
|
219
|
+
<h1 class="font-headline text-5xl font-extrabold text-on-surface mb-6 tracking-tight">Installation</h1>
|
|
220
|
+
<p class="text-lg text-on-surface-variant leading-relaxed">
|
|
221
|
+
Set up <span class="text-primary">bubble-chart-js</span> in your project. Our library is designed to
|
|
222
|
+
be lightweight, zero-dependency, and works across all modern JS frameworks.
|
|
223
|
+
</p>
|
|
224
|
+
</div>
|
|
225
|
+
<!-- Installation Section -->
|
|
226
|
+
<section class="mb-16">
|
|
227
|
+
<div class="flex items-center gap-4 mb-6">
|
|
228
|
+
<h2 class="font-headline text-2xl font-bold text-on-surface">Package Manager</h2>
|
|
229
|
+
<div class="h-px flex-1 bg-outline-variant/15"></div>
|
|
230
|
+
</div>
|
|
231
|
+
<p class="text-on-surface-variant mb-6">Install the library using your preferred package manager.</p>
|
|
232
|
+
<div class="relative group">
|
|
233
|
+
<div
|
|
234
|
+
class="absolute -inset-1 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-xl blur opacity-25 group-hover:opacity-50 transition duration-1000">
|
|
235
|
+
</div>
|
|
236
|
+
<div
|
|
237
|
+
class="relative bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/10">
|
|
238
|
+
<div
|
|
239
|
+
class="flex items-center justify-between px-4 py-2 bg-surface-container-high/50 border-b border-outline-variant/5">
|
|
240
|
+
<span
|
|
241
|
+
class="font-label text-[10px] uppercase text-on-surface-variant tracking-widest">terminal</span>
|
|
242
|
+
<button
|
|
243
|
+
class="flex items-center gap-1 text-on-surface-variant hover:text-primary transition-colors">
|
|
244
|
+
<span class="material-symbols-outlined text-sm">content_copy</span>
|
|
245
|
+
<span class="font-label text-[10px] uppercase">copy</span>
|
|
246
|
+
</button>
|
|
247
|
+
</div>
|
|
248
|
+
<pre
|
|
249
|
+
class="p-6 text-sm md:text-base font-mono overflow-x-auto"><code class="text-tertiary">npm install <span class="text-primary-fixed">bubble-chart-js</span></code></pre>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</section>
|
|
253
|
+
<!-- Basic Usage Section -->
|
|
254
|
+
<section class="mb-16">
|
|
255
|
+
<div class="flex items-center gap-4 mb-6">
|
|
256
|
+
<h2 class="font-headline text-2xl font-bold text-on-surface">Basic usage</h2>
|
|
257
|
+
<div class="h-px flex-1 bg-outline-variant/15"></div>
|
|
258
|
+
</div>
|
|
259
|
+
<p class="text-on-surface-variant mb-6">Import the BubbleChart class and initialize it with a target
|
|
260
|
+
container and data configuration.</p>
|
|
261
|
+
<div
|
|
262
|
+
class="bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/10 mb-8">
|
|
263
|
+
<div
|
|
264
|
+
class="flex items-center justify-between px-4 py-2 bg-surface-container-high/50 border-b border-outline-variant/5">
|
|
265
|
+
<span
|
|
266
|
+
class="font-label text-[10px] uppercase text-on-surface-variant tracking-widest">javascript</span>
|
|
267
|
+
<button
|
|
268
|
+
class="flex items-center gap-1 text-on-surface-variant hover:text-primary transition-colors">
|
|
269
|
+
<span class="material-symbols-outlined text-sm">content_copy</span>
|
|
270
|
+
<span class="font-label text-[10px] uppercase">copy</span>
|
|
271
|
+
</button>
|
|
272
|
+
</div>
|
|
273
|
+
<pre class="p-6 text-sm font-mono leading-relaxed overflow-x-auto"><code class="text-on-surface-variant"><span class="text-secondary">import</span> { BubbleChart } <span class="text-secondary">from</span> <span class="text-tertiary">'bubble-chart-js'</span>;
|
|
274
|
+
|
|
275
|
+
<span class="text-on-surface-variant opacity-40">// 1. Define your data</span>
|
|
276
|
+
<span class="text-secondary">const</span> data = [
|
|
277
|
+
{ id: <span class="text-primary-fixed-dim">1</span>, value: <span class="text-primary-fixed-dim">120</span>, label: <span class="text-tertiary">'Atmospheric'</span> },
|
|
278
|
+
{ id: <span class="text-primary-fixed-dim">2</span>, value: <span class="text-primary-fixed-dim">80</span>, label: <span class="text-tertiary">'Luminous'</span> }
|
|
279
|
+
];
|
|
280
|
+
|
|
281
|
+
<span class="text-on-surface-variant opacity-40">// 2. Initialize the engine</span>
|
|
282
|
+
<span class="text-secondary">const</span> chart = <span class="text-secondary">new</span> BubbleChart({
|
|
283
|
+
container: <span class="text-tertiary">'#chart-canvas'</span>,
|
|
284
|
+
data: data,
|
|
285
|
+
renderer: <span class="text-tertiary">'canvas'</span>,
|
|
286
|
+
physics: {
|
|
287
|
+
strength: <span class="text-primary-fixed-dim">-30</span>,
|
|
288
|
+
friction: <span class="text-primary-fixed-dim">0.9</span>
|
|
289
|
+
}
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
chart.render();</code></pre>
|
|
293
|
+
</div>
|
|
294
|
+
</section>
|
|
295
|
+
<!-- API Reference Table -->
|
|
296
|
+
<section class="mb-16">
|
|
297
|
+
<div class="flex items-center gap-4 mb-8">
|
|
298
|
+
<h2 class="font-headline text-2xl font-bold text-on-surface">API Reference</h2>
|
|
299
|
+
<div class="h-px flex-1 bg-outline-variant/15"></div>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="overflow-x-auto rounded-xl bg-surface-container-low p-1 border border-outline-variant/5">
|
|
302
|
+
<table class="w-full text-left border-collapse">
|
|
303
|
+
<thead>
|
|
304
|
+
<tr
|
|
305
|
+
class="font-label text-[11px] uppercase tracking-wider text-on-surface-variant border-b border-outline-variant/10">
|
|
306
|
+
<th class="px-6 py-4">Option</th>
|
|
307
|
+
<th class="px-6 py-4">Type</th>
|
|
308
|
+
<th class="px-6 py-4">Default</th>
|
|
309
|
+
<th class="px-6 py-4">Description</th>
|
|
310
|
+
</tr>
|
|
311
|
+
</thead>
|
|
312
|
+
<tbody class="text-sm font-body">
|
|
313
|
+
<tr class="border-b border-outline-variant/5 hover:bg-surface-bright/50 transition-colors">
|
|
314
|
+
<td class="px-6 py-5 font-mono text-primary font-semibold">container</td>
|
|
315
|
+
<td class="px-6 py-5 text-secondary">String | Element</td>
|
|
316
|
+
<td class="px-6 py-5 text-on-surface-variant italic">null</td>
|
|
317
|
+
<td class="px-6 py-5 text-on-surface">Selector or DOM element where the chart will
|
|
318
|
+
mount.</td>
|
|
319
|
+
</tr>
|
|
320
|
+
<tr class="border-b border-outline-variant/5 hover:bg-surface-bright/50 transition-colors">
|
|
321
|
+
<td class="px-6 py-5 font-mono text-primary font-semibold">data</td>
|
|
322
|
+
<td class="px-6 py-5 text-secondary">Array<Object></td>
|
|
323
|
+
<td class="px-6 py-5 text-on-surface-variant italic">[]</td>
|
|
324
|
+
<td class="px-6 py-5 text-on-surface">The dataset to visualize. Requires 'id' and
|
|
325
|
+
'value'.</td>
|
|
326
|
+
</tr>
|
|
327
|
+
<tr class="border-b border-outline-variant/5 hover:bg-surface-bright/50 transition-colors">
|
|
328
|
+
<td class="px-6 py-5 font-mono text-primary font-semibold">renderer</td>
|
|
329
|
+
<td class="px-6 py-5 text-secondary">'canvas' | 'svg'</td>
|
|
330
|
+
<td class="px-6 py-5 text-on-surface-variant italic">'canvas'</td>
|
|
331
|
+
<td class="px-6 py-5 text-on-surface">The engine used for drawing. SVG recommended for
|
|
332
|
+
< 50 nodes.</td>
|
|
333
|
+
</tr>
|
|
334
|
+
<tr class="border-b border-outline-variant/5 hover:bg-surface-bright/50 transition-colors">
|
|
335
|
+
<td class="px-6 py-5 font-mono text-primary font-semibold">physics</td>
|
|
336
|
+
<td class="px-6 py-5 text-secondary">Object</td>
|
|
337
|
+
<td class="px-6 py-5 text-on-surface-variant italic">{...}</td>
|
|
338
|
+
<td class="px-6 py-5 text-on-surface">Configuration for the force-directed layout
|
|
339
|
+
engine.</td>
|
|
340
|
+
</tr>
|
|
341
|
+
<tr class="hover:bg-surface-bright/50 transition-colors">
|
|
342
|
+
<td class="px-6 py-5 font-mono text-primary font-semibold">seed</td>
|
|
343
|
+
<td class="px-6 py-5 text-secondary">Number | String</td>
|
|
344
|
+
<td class="px-6 py-5 text-on-surface-variant italic">Date.now()</td>
|
|
345
|
+
<td class="px-6 py-5 text-on-surface">Randomization seed for consistent layout
|
|
346
|
+
reproduction.</td>
|
|
347
|
+
</tr>
|
|
348
|
+
</tbody>
|
|
349
|
+
</table>
|
|
350
|
+
</div>
|
|
351
|
+
</section>
|
|
352
|
+
<!-- Info Callout -->
|
|
353
|
+
<div class="glass-panel border-l-4 border-primary p-8 rounded-r-xl">
|
|
354
|
+
<div class="flex items-start gap-4">
|
|
355
|
+
<span class="material-symbols-outlined text-primary">info</span>
|
|
356
|
+
<div>
|
|
357
|
+
<h4 class="font-headline font-bold text-on-surface mb-2">Pro Tip: Performance Scaling</h4>
|
|
358
|
+
<p class="text-sm text-on-surface-variant leading-relaxed">
|
|
359
|
+
For datasets larger than 1,000 nodes, we highly recommend switching the <code
|
|
360
|
+
class="text-secondary font-mono">renderer</code> to <code
|
|
361
|
+
class="text-secondary font-mono">'canvas'</code> and setting <code
|
|
362
|
+
class="text-secondary font-mono">physics.strength</code> to <code
|
|
363
|
+
class="text-secondary font-mono">-10</code> to reduce computation overhead.
|
|
364
|
+
</p>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
</main>
|
|
369
|
+
<!-- Table of Contents Right Rail (Optional but Pro) -->
|
|
370
|
+
<aside class="hidden xl:block w-64 py-10 px-8 sticky top-16 h-fit">
|
|
371
|
+
<h5 class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant/60 mb-6">On this page
|
|
372
|
+
</h5>
|
|
373
|
+
<ul class="space-y-4 border-l border-outline-variant/15 py-1">
|
|
374
|
+
<li class="pl-4 border-l-2 border-primary -ml-[1.5px]"><a class="text-sm text-primary"
|
|
375
|
+
href="#">Installation</a></li>
|
|
376
|
+
<li class="pl-4"><a class="text-sm text-on-surface-variant hover:text-secondary transition-colors"
|
|
377
|
+
href="#">Basic Usage</a></li>
|
|
378
|
+
<li class="pl-4"><a class="text-sm text-on-surface-variant hover:text-secondary transition-colors"
|
|
379
|
+
href="#">API Reference</a></li>
|
|
380
|
+
</ul>
|
|
381
|
+
</aside>
|
|
382
|
+
</div>
|
|
383
|
+
<!-- Footer -->
|
|
384
|
+
<footer class="bg-[#090e1c] w-full py-12 px-8 border-t border-[#434759]/15">
|
|
385
|
+
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
386
|
+
<div class="md:col-span-1">
|
|
387
|
+
<a href="index.html"
|
|
388
|
+
class="text-lg font-bold text-[#72dcff] font-headline block hover:opacity-80">bubble-chart-js</a>
|
|
389
|
+
<p class="font-body text-sm text-[#e1e4fa]/60 mt-4 leading-relaxed">
|
|
390
|
+
Built for atmospheric data visualization. Smooth animations, high performance, and neon aesthetics.
|
|
391
|
+
</p>
|
|
392
|
+
</div>
|
|
393
|
+
<div class="flex flex-col space-y-3">
|
|
394
|
+
<h6 class="font-label text-xs uppercase text-[#72dcff] tracking-widest mb-2">Resource</h6>
|
|
395
|
+
<a class="text-sm text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity"
|
|
396
|
+
href="documentation.html">Docs</a>
|
|
397
|
+
<a class="text-sm text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity"
|
|
398
|
+
href="examples.html">Examples</a>
|
|
399
|
+
</div>
|
|
400
|
+
<div class="flex flex-col space-y-3">
|
|
401
|
+
<h6 class="font-label text-xs uppercase text-[#72dcff] tracking-widest mb-2">Community</h6>
|
|
402
|
+
<a class="text-sm text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity"
|
|
403
|
+
href="https://github.com/praga-dev/bubble-chart-js">GitHub</a>
|
|
404
|
+
<a class="text-sm text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity" href="#">Twitter</a>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="flex flex-col space-y-3">
|
|
407
|
+
<h6 class="font-label text-xs uppercase text-[#72dcff] tracking-widest mb-2">Legal</h6>
|
|
408
|
+
<a class="text-sm text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-opacity" href="#">License</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="font-body text-sm text-[#e1e4fa]/60">© 2024 bubble-chart-js. Built for atmospheric data
|
|
413
|
+
visualization.</p>
|
|
414
|
+
</div>
|
|
415
|
+
</footer>
|
|
416
|
+
|
|
417
|
+
<script>
|
|
418
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
419
|
+
const menuBtn = document.getElementById('menu-btn');
|
|
420
|
+
const mobileMenu = document.getElementById('mobile-menu');
|
|
421
|
+
const mobileSidebar = document.getElementById('mobile-sidebar');
|
|
422
|
+
if (menuBtn) {
|
|
423
|
+
menuBtn.addEventListener('click', () => {
|
|
424
|
+
if (mobileMenu) {
|
|
425
|
+
mobileMenu.classList.toggle('hidden');
|
|
426
|
+
mobileMenu.classList.toggle('flex');
|
|
427
|
+
}
|
|
428
|
+
if (mobileSidebar) {
|
|
429
|
+
mobileSidebar.classList.toggle('hidden');
|
|
430
|
+
mobileSidebar.classList.toggle('block');
|
|
431
|
+
}
|
|
432
|
+
});
|
|
433
|
+
}
|
|
434
|
+
});
|
|
435
|
+
</script>
|
|
436
|
+
</body>
|
|
437
|
+
|
|
438
|
+
</html>
|