<script>
let smallb = [
    {x: 1, y: 10, size: 1},
    {x: 2, y: 20, size: 10},
    {x: 3, y: 30, size: 50},
    {x: 4, y: 40, size: 75},
    {x: 5, y: 50, size: 100}
]

let region_bubble = [
    {region: 'West', score_a: 63, score_b: 51, size: 55},
    {region: 'West', score_a: 61, score_b: 52, size: 8},
    {region: 'West', score_a: 69, score_b: 35, size: 12},
    {region: 'West', score_a: 50, score_b: 39, size: 28},
    {region: 'West', score_a: 58, score_b: 49, size: 65},
    {region: 'West', score_a: 59, score_b: 49, size: 95},
    {region: 'West', score_a: 50, score_b: 46, size: 31},
    {region: 'West', score_a: 72, score_b: 34, size: 6},
    {region: 'West', score_a: 69, score_b: 54, size: 55},
    {region: 'West', score_a: 46, score_b: 37, size: 78},
    {region: 'West', score_a: 58, score_b: 31, size: 16},
    {region: 'West', score_a: 50, score_b: 31, size: 33},
    {region: 'West', score_a: 71, score_b: 48, size: 64},
    {region: 'West', score_a: 61, score_b: 47, size: 89},
    {region: 'East', score_a: 45, score_b: 39, size: 26},
    {region: 'East', score_a: 68, score_b: 42, size: 66},
    {region: 'East', score_a: 69, score_b: 62, size: 30},
    {region: 'East', score_a: 59, score_b: 44, size: 23},
    {region: 'East', score_a: 86, score_b: 57, size: 20},
    {region: 'East', score_a: 90, score_b: 41, size: 43},
    {region: 'East', score_a: 66, score_b: 60, size: 25},
    {region: 'East', score_a: 70, score_b: 41, size: 2},
    {region: 'East', score_a: 59, score_b: 42, size: 71},
    {region: 'East', score_a: 64, score_b: 69, size: 84},
    {region: 'East', score_a: 85, score_b: 84, size: 73},
    {region: 'East', score_a: 77, score_b: 54, size: 91},
    {region: 'East', score_a: 74, score_b: 48, size: 52},
    {region: 'East', score_a: 88, score_b: 44, size: 21},
    {region: 'East', score_a: 84, score_b: 85, size: 17},
    {region: 'East', score_a: 78, score_b: 87, size: 99},
    {region: 'South', score_a: 120, score_b: 69, size: 1},
    {region: 'South', score_a: 106, score_b: 74, size: 13},
    {region: 'South', score_a: 117, score_b: 67, size: 68},
    {region: 'South', score_a: 89, score_b: 100, size: 36},
    {region: 'South', score_a: 77, score_b: 65, size: 36},
    {region: 'South', score_a: 100, score_b: 70, size: 58},
    {region: 'South', score_a: 76, score_b: 52, size: 27},
    {region: 'South', score_a: 111, score_b: 81, size: 49},
    {region: 'South', score_a: 92, score_b: 103, size: 22},
    {region: 'South', score_a: 105, score_b: 77, size: 71},
    {region: 'South', score_a: 75, score_b: 89, size: 50},
    {region: 'South', score_a: 104, score_b: 82, size: 25},
    {region: 'South', score_a: 109, score_b: 68, size: 85},
    {region: 'South', score_a: 102, score_b: 88, size: 62},
    {region: 'South', score_a: 82, score_b: 68, size: 3}
]

let countries = [
    {country: 'United States', continent: 'North America', gdp_usd: 22996, gdp_growth_pct1: 0.017, interest_rate_pct1: 0.025, inflation_rate_pct1: 0.085, jobless_rate_pct1: 0.037, gov_budget: -16.7, debt_to_gdp: 137.2, current_account: -3.6, population: 332.4},
    {country: 'China', continent: 'Asia', gdp_usd: 17734, gdp_growth_pct1: 0.004, interest_rate_pct1: 0.0365, inflation_rate_pct1: 0.027, jobless_rate_pct1: 0.054, gov_budget: -3.7, debt_to_gdp: 66.8, current_account: 1.8, population: 1412.6},
    {country: 'Japan', continent: 'Asia', gdp_usd: 4937, gdp_growth_pct1: 0.002, interest_rate_pct1: -0.001, inflation_rate_pct1: 0.026, jobless_rate_pct1: 0.026, gov_budget: -12.6, debt_to_gdp: 266.2, current_account: 3.2, population: 125.31},
    {country: 'Germany', continent: 'Europe', gdp_usd: 4223, gdp_growth_pct1: 0.017, interest_rate_pct1: 0.005, inflation_rate_pct1: 0.079, jobless_rate_pct1: 0.055, gov_budget: -3.7, debt_to_gdp: 69.3, current_account: 7.4, population: 83.16},
    {country: 'United Kingdom', continent: 'Europe', gdp_usd: 3187, gdp_growth_pct1: 0.029, interest_rate_pct1: 0.0175, inflation_rate_pct1: 0.101, jobless_rate_pct1: 0.038, gov_budget: -6, debt_to_gdp: 95.9, current_account: -2.6, population: 67.53},
    {country: 'India', continent: 'Asia', gdp_usd: 3173, gdp_growth_pct1: 0.135, interest_rate_pct1: 0.054, inflation_rate_pct1: 0.0671, jobless_rate_pct1: 0.078, gov_budget: -9.4, debt_to_gdp: 73.95, current_account: -1.7, population: 1380},
    {country: 'France', continent: 'Europe', gdp_usd: 2937, gdp_growth_pct1: 0.042, interest_rate_pct1: 0.005, inflation_rate_pct1: 0.058, jobless_rate_pct1: 0.074, gov_budget: -6.5, debt_to_gdp: 112.9, current_account: 0.4, population: 67.63},
    {country: 'Italy', continent: 'Europe', gdp_usd: 2100, gdp_growth_pct1: 0.047, interest_rate_pct1: 0.005, inflation_rate_pct1: 0.084, jobless_rate_pct1: 0.079, gov_budget: -7.2, debt_to_gdp: 150.8, current_account: 2.5, population: 59.24},
    {country: 'Canada', continent: 'North America', gdp_usd: 1991, gdp_growth_pct1: 0.029, interest_rate_pct1: 0.025, inflation_rate_pct1: 0.076, jobless_rate_pct1: 0.049, gov_budget: -4.7, debt_to_gdp: 117.8, current_account: 0.1, population: 38.44},
    {country: 'South Korea', continent: 'Asia', gdp_usd: 1799, gdp_growth_pct1: 0.029, interest_rate_pct1: 0.025, inflation_rate_pct1: 0.057, jobless_rate_pct1: 0.029, gov_budget: -6.1, debt_to_gdp: 42.6, current_account: 3.5, population: 51.74},
    {country: 'Russia', continent: 'Europe', gdp_usd: 1776, gdp_growth_pct1: -0.04, interest_rate_pct1: 0.08, inflation_rate_pct1: 0.151, jobless_rate_pct1: 0.039, gov_budget: 0.8, debt_to_gdp: 18.2, current_account: 6.8, population: 145.55},
    {country: 'Brazil', continent: 'South America', gdp_usd: 1609, gdp_growth_pct1: 0.032, interest_rate_pct1: 0.1375, inflation_rate_pct1: 0.1007, jobless_rate_pct1: 0.091, gov_budget: -4.5, debt_to_gdp: 80.27, current_account: -1.8, population: 213.32}
]
</script>

## Basic Bubble Chart

<BubbleChart data={smallb} x=x y=y size=size xAxisTitle=true yAxisTitle=true/>

## Bubble Chart

<BubbleChart
    data={countries}
    x=debt_to_gdp
    y=gdp_growth_pct1
    size=gdp_usd
    tooltipTitle=country
/>

## Multi-Series Bubble Chart

<BubbleChart
    data={countries}
    x=inflation_rate_pct1
    y=jobless_rate_pct1
    size=gdp_usd
    series=continent
    tooltipTitle=country
/>

## Bubble Chart with Custom Height

<BubbleChart
    data={countries}
    x=inflation_rate_pct1
    y=jobless_rate_pct1
    size=gdp_usd
    series=continent
    tooltipTitle=country
    chartAreaHeight=380
/>

## Bubble with Log Scale

<BubbleChart
    data={countries}
    x=inflation_rate_pct1
    y=jobless_rate_pct1
    size=gdp_usd
    series=continent
    tooltipTitle=country
    yLog=true
    yLogBase=8
/>