Basic example

The below story shows a basic use case for Vizzu-Story.

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'

// Get the created element
const vp = document.querySelector('vizzu-player')

// Create data object
const data = {
    series: [
        {
            name: 'Foo',
            values: ['Alice', 'Bob', 'Ted']
        },
        {
            name: 'Bar',
            values: [15, 32, 12]
        },
        {
            name: 'Baz',
            values: [5, 3, 2]
        }
    ]
}

// Each slide here is a page in the final interactive story
const slides = [
    {
        config: {
            x: 'Foo',
            y: 'Bar'
        }
    },
    {
        config: {
            color: 'Foo',
            x: 'Baz',
            geometry: 'circle'
        }
    }
]

// 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