US Federal R&D budget

US Federal R&D budget In this more involved example, we explore the history of the US Federal R&D budget between 1955-2020. On top of the base functionality, this story showcases:

• Styling the overall story
• Setting the size of the story
• Slides with multiple steps

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')

// Create data object
const dataLoaded = Csv2Js.csv('./usbudget.csv', { dimensions: ['Year'], units: { Amount: 'B$' } })

dataLoaded.then((data) => {
    // Set the style of the charts in the story

    const style = {
        plot: {
            yAxis: {
                label: {
                    fontSize: '1em',
                    paddingRight: '1.2em'
                },
                title: { color: '#ffffff00' }
            },
            xAxis: {
                label: {
                    angle: '2.5',
                    fontSize: '1.1em',
                    paddingRight: '0em',
                    paddingTop: '1em'
                },
                title: { fontSize: '0.8em', paddingTop: '2.5em' }
            }
        },
        logo: { width: '5em' }
    }

    // Each slide here is a page in the final interactive story
    const slides = [
        // Add the first slide,
        // containing a single animation step that sets the initial chart
        {
            // Only include rows where the Function value != Defense
            filter: (record) => record.Function !== 'Defense',
            config: {
                channels: {
                    y: {
                        set: ['Amount', 'Function'],
                        // Set the range of the y-axis
                        // to the min and max of the data being shown
                        // default value is 110% of the maximum value
                        range: { min: '0%', max: '100%' }
                    },
                    x: { set: ['Year'] },
                    color: 'Function'
                },
                title: 'Stacked Area Chart - U.S. R&D Budget in 1955-2020',
                geometry: 'area'
            }
        },
        // Show components side-by-side
        {
            config: {
                split: true,
                title: 'Show Components Side by Side'
            }
        },
        // This slide contains multiple steps
        [
            // Step 1 - let's get back to the previous view
            { config: { split: false } },
            // Step 2 - Add the defense function to the chart by removing it from the filter
            {
                filter: null,
                config: { title: 'Add New Category While Keeping the Context' }
            }
        ],
        // Show share of components
        {
            config: {
                align: 'stretch',
                title: 'Show Share of Components (%)'
            }
        },
        // Compare data from 1955 and 2020
        [
            // Step 1 - switch back to value instead of percentage
            { config: { align: 'none' } },
            // Step 2 - switch to a stacked column chart by changing the geometry
            {
                config: {
                    geometry: 'rectangle'
                }
            },
            // Step 3 - zoom to data from the first and last years
            {
                filter: (record) => record.Year === '1955' || record.Year === '2020',
                config: {
                    title: 'Zoom to Specific Elements'
                }
            }
        ],
        // Group & rearrange elements for comparison
        [
            {
                config: {
                    x: ['Year', 'Function'],
                    y: 'Amount',
                    label: 'Amount',
                    title: 'Group & Rearrange for Better Comparison'
                }
            },
            {
                config: { x: ['Function', 'Year'] }
            }
        ]
    ]

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

    // Set the size of the HTML element
    vp.style.cssText = 'width: 100%; height: 400px;'

    // Set up the created element with the configuration object
    vp.slides = story
    vp.initializing.then((chart) => {
        // Switch on the tooltip that appears
        // when the user hovers the mouse over a chart element
        chart.feature('tooltip', true)

        // Set a handler that prevents showing the year values that are not divisible by 5
        chart.on('plot-axis-label-draw', (event) => {
            const Year = parseFloat(event.detail.text)
            if (!isNaN(Year) && Year > 1950 && Year < 2020 && Year % 5 !== 0) {
                event.preventDefault()
            }
        })
    })
})