UN Population Forecast

In this example, we explore the population of Africa between 1953-2098. On top of that, this story shows how to use the chart configuration presets. Check Vizzu - Chart presets chapter and Vizzu - Preset charts gallery for more details on the available chart presets.

Create a vizzu-player element that will contain the rendered story.

<vizzu-player controller></vizzu-player>

In a script module element:

// Import VizzuPlayer
import VizzuPlayer from 'https://cdn.jsdelivr.net/npm/vizzu-story@0.7/dist/vizzu-story.min.js'
import Csv2Js from 'https://vizzu-story.vizzuhq.com/0.7/assets/javascripts/csv2js.js'

// Get the created element
const vp = document.querySelector('vizzu-player')
// Set the size of the HTML element
vp.style.cssText = 'width: 100%; height: 400px;'
// Initializing Vizzu Player
const vpInitialized = vp.initializing

// Create data object
const dataLoaded = Csv2Js.csv('./population.csv', { dimensions: ['Year'] })

// Because using presets here, you need to
// create the configuration object after initialization
// (then presets are accessible via vp.Vizzu.presets)
Promise.all([dataLoaded, vpInitialized]).then((results) => {
    const data = results[0]
    const chart = results[1]

    // Switch on the tooltip that appears
    // when the user hovers the mouse over a chart element
    chart.feature('tooltip', true)

    // Each slide here is a page in the final interactive story
    const slides = [
        {
            filter: (record) => record.Continent === 'Africa',
            style: { plot: { xAxis: { label: { angle: 2.0 } } } },
            config: vp.Vizzu.presets.stackedArea({
                x: 'Year',
                y: 'Medium',
                stackedBy: 'Subregion',
                title: 'Population of Africa 1953-2098'
            })
        },
        {
            config: vp.Vizzu.presets.percentageArea({
                x: 'Year',
                y: 'Medium',
                stackedBy: 'Subregion'
            })
        },
        {
            config: vp.Vizzu.presets.stream({
                x: 'Year',
                y: 'Medium',
                stackedBy: 'Subregion'
            })
        },
        {
            config: vp.Vizzu.presets.violin({
                x: 'Year',
                y: 'Medium',
                splittedBy: 'Subregion'
            })
        }
    ]

    // Create story configuration object, add data and slides to it
    const story = {
        data,
        slides
    }

    // Set up the created element with the configuration object
    vp.slides = story
})