Playground — Bubble Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/bubble-chart

Bubble Chart Playground

Experiment with BubbleChart props in real time. Bubble charts encode a third numeric dimension as circle area, making them ideal for comparing items across three measures simultaneously. Adjust the size range, opacity, and stroke controls to refine the look, then copy the generated code.

Dataset:

Bubbles

Size Range Min

Size Range Max

Bubble Opacity

Stroke Width

Interaction

Enable Hover

Layout

Show Grid

Show Legend

Labels

X Label

Y Label

Title

Generated Code

The link restores this exact configuration; the config is a portable ChartConfig artifact.

JSX

import { BubbleChart } from "semiotic" const data = [ { country: "United States", gdp: 63544, lifeExpectancy: 77.3, population: 331900000, continent: "Americas" }, { country: "China", gdp: 12556, lifeExpectancy: 78.2, population: 1412000000, continent: "Asia" }, { country: "Germany", gdp: 51204, lifeExpectancy: 81.3, population: 83200000, continent: "Europe" }, // ...10 countries with GDP per capita, life expectancy, and population ] <BubbleChart data={data} />