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.4/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;