Bubble Chart Engine for Modern Web Apps
High-performance, extensible packed bubble charts with SVG + Canvas + Physics layout. Built for atmospheric data visualization.
Engineered for Complexity
Dual Renderer (SVG + Canvas)
Seamlessly switch between high-fidelity SVG for small sets and blazing-fast Canvas for 10k+ entities.
Physics-based layout
Custom many-body force simulation ensures optimal packing with zero overlap and fluid transitions.
Layer Hooks / Plugin system
Inject custom logic at any stage of the render lifecycle. Build custom tools, tooltips, and brushes.
Deterministic mode
Guarantee consistent layouts across reloads and devices using seeded randomization algorithms.
Auto-sleep optimization
Preserve battery and CPU cycles by automatically pausing calculations once the layout stabilizes.
High performance
Zero-dependency core clocking in at under 12kb gzipped. Optimized for the modern web stack.
Simple API,
Infinite
Depth
Initializing a complex physics-based bubble chart takes less than 10 lines of code. Declarative configuration with reactive updates.
- check_circle TypeScript First
- check_circle Zero Dependencies
import { initializeChart } from 'bubble-chart-js';
const chart = initializeChart({
canvasContainerId: 'viz',
data: data,
render: { mode: 'canvas' },
layout: {
type: 'physics',
physics: {
centerStrength: 0.05,
collisionPad: 2
}
}
});