Showcase

Examples Gallery

Explore our curated collection of atmospheric data visualizations. From basic clusters to complex physics-based simulations, everything is customizable.

SVG - AUTO

Basic bubble chart

The foundation of every visualization. Optimized for clarity and performance.

CANVAS - AUTO

Glass theme

Utilizing backdrop-filters for immersive depth in your data.

CANVAS

Physics layout

Collision detection and gravitational fields for organic motion.

CANVAS

Large dataset (100+)

Stress-testing the engine with high-volume data points.

SVG

Custom colors

Gradient mappings and per-node styling for branded charts.

onBubbleClick: (e) => {...}

Developer Experience

Interactive events

Full control over mouse and touch events. Hook into click, hover, drag, and collision lifecycle events with standard JS syntax.

code bubble_chart_basic.js

const ITEMS = [
  { label: 'Angular', value: 42, solid: '#5b9cf6', fill: 'rgba(91,156,246,0.38)'  },
  { label: 'Next.js', value: 35, solid: '#8b6fd4', fill: 'rgba(139,111,212,0.38)' },
  { label: 'Vue',     value: 28, solid: '#4db8b0', fill: 'rgba(77,184,176,0.38)'  },
  { label: 'React',   value: 22, solid: '#d45b7a', fill: 'rgba(212,91,122,0.38)'  },
  { label: 'Astro',   value: 20, solid: '#c9903a', fill: 'rgba(201,144,58,0.38)'  },
  { label: 'Svelte',  value: 18, solid: '#4aa87a', fill: 'rgba(74,168,122,0.38)'  },
  { label: 'Nuxt',    value: 15, solid: '#b86fc9', fill: 'rgba(184,111,201,0.38)' },
  { label: 'Remix',   value: 12, solid: '#c97a4d', fill: 'rgba(201,122,77,0.38)'  },
];

const fillToSolid = new Map(ITEMS.map(c => [c.fill, c.solid]));

const data = ITEMS.map(({ label, value, fill }) => ({
  label,
  value,
  bubbleColor: fill,
}));

const chart = initializeChart({
  canvasContainerId: 'chart-basic',
  data,
  render: { mode: 'svg', theme: 'flat' },
  layout: { type: 'static' },
  defaultFontColor: 'rgba(255,255,255,0.88)',
  defaultFontFamily: 'system-ui',
  fontSize: 13,
});

const NS = 'http://www.w3.org/2000/svg';
chart.addLayerHook({
  layer: 'bubbles',
  priority: 10,
  fn(ctx, bubbles) {
    if (!ctx.svg) return;
    for (const b of bubbles) {
      const r = b.renderRadius * b.renderScale;
      const ring = document.createElementNS(NS, 'circle');
      ring.setAttribute('cx', String(b.renderX));
      ring.setAttribute('cy', String(b.renderY));
      ring.setAttribute('r', String(r - 0.5));
      ring.setAttribute('fill', 'none');
      ring.setAttribute('stroke', fillToSolid.get(b.color) ?? b.color);
      ring.setAttribute('stroke-width', '1');
      ring.setAttribute('opacity', '0.35');
      ctx.svg.appendChild(ring);
    }
  },
});

JavaScript ES6 0.8 KB Gzipped

Line 47, Col 1