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