Skip to content

A presentation extension for the Vizzu charting library to create presentations with animated data visualisations with ease.

License

Notifications You must be signed in to change notification settings

dyuri/vizzu-ext-slides-js

 
 

Repository files navigation

Vizzu

Vizzu - Story JavaScript Extension

Example · Repository

About The Extension

Vizzu-Story is an extension for the Vizzu JavaScript library that allows users to create interactive presentations from the animated data visualizations built with Vizzu.

The extension provides a Web Component that contains the presentation and adds controls for navigating between slides - predefined stages within the story.

Installation

Install via npm:

npm install vizzu-story

Or use it from CDN:

https://cdn.jsdelivr.net/npm/vizzu-story@latest/dist/vizzu-story.min.js

Usage

Readme example

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

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

In a script module element

<script type="module">

Import the extension from CDN or local install:

import VizzuPlayer from 'https://cdn.jsdelivr.net/npm/vizzu-story@latest/dist/vizzu-story.min.js';

Add the underlying data for the data story. You can use the same data definition formats as in the Vizzu library, but you must add the entire data set for the whole story in the initial step; you can not change this later. See Vizzu tutorial - Data for more details on data formats.

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

Create the data story by defining a sequence of slides. A slide can be a single chart corresponding to a single 'animation()' call from Vizzu. Or a slide can be a sequence of animation calls, in which case all of these animations will be played until the last one in the sequence, allowing for more complex transitions between slides. Navigation controls beneath the chart will navigate between the slides. You can use the PgUp and PgDn buttons, left and right arrows to navigate between slides, and the Home and End buttons to jump to the first or last slide.

const slides = [
    {
      config: {
        x: 'Foo',
        y: 'Bar'
      }
    },
    {
      config: {
        color: 'Foo',
        x: 'Baz', 
        geometry: 'circle' 
      }
    }
]

On each chart, you can define the chart configuration and style with the same objects as in Vizzu. However, you can not modify the underlying data between the slides, only the data filter used.

interface Chart
{
  config?: Vizzu.Config.Chart;
  filter?: Vizzu.Data.FilterCallback | null;
  style?: Vizzu.Styles.Chart;
}

Put the data object and the slide list into the story descriptor object. Here you can also set the 'story' objects 'style' property to set the chart style used for the whole story.

const story = {
  data: data,
  slides: slides
}

Then set up the created element with the configuration object:

const vp = document.querySelector("vizzu-player");
vp.slides = story;

Check out a live example in JSFiddle!

See vizzu-story.d.ts and vizzu.d.ts for detailed API type declarations.

Or check out the source of this example to see a more complex use case: code.

Contributing

We welcome contributions to the project; visit our wiki page for further info.

Contact

License

Copyright © 2022 Vizzu Kft..

Released under the Apache 2.0 License.

About

A presentation extension for the Vizzu charting library to create presentations with animated data visualisations with ease.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.6%
  • Shell 0.4%