World 'GDP Per Capita' Historical Values with Animated Bubble Chart

An Animated Bubble Chart is used to visualize the historical values of all world countries related to GDP Per Capita, Population and Fertility Rate. The chart employs logarithmic scales on the Y axis, while the X axis uses the linear scale. Items on the chart are divided into groups (continents in this case).

Note: Use Play/Pause to control the animation or click on the time axis to jump to a specific period. At any time click the pause button and Zoom In/Out (mouse wheel or pinch-to-zoom) the chart. Mouse over a specific item to see its values. Click on an item and choose History Line to see all previous (historical) values of the same item on the same chart. Learn more about all Animated Bubble Chart Features.

HTML/JavaScript Code

The HTML elements and JavaScript code used in this example.

...
<div id="chartDiv"></div>
...

function showChart() {
    let config =  {
        title: "World GDP Per Capita, Population and Fertility Rate Historical Values",
            width: "800",
            height: "600",
            numberOfDecimals: 2,
            thousandsSeparator: ".",
            decimalSeparator: ",",
            transitionTime: 1,
            logarithmicYaxis: true,
            measures: [{ title: "GDP Per Capita" }, { title: "Population", prefix: "$" }, { title: "Fertility Rate" }],
            dataCSVURL: "/charts-lib/examples/world-gdp-popuplation-fertility.csv"
    }

    kyubitTimeCharts.showBubbleChart("chartDiv", config);
}

Learn more about Animated Bubble Chart API.

Chart Data

All values for this animated bubble chart example are stored in the World-gdp-popuplation-fertility.csv file.