UN Population Forecast

In this example, we explore the population of Africa between 1953-2098. On top of that, this story shows how to use the chart configuration presets. Check Vizzu - Chart presets chapter and Vizzu - Preset charts gallery for more details on the available chart presets.

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.5/dist/vizzu-story.min.js";
import Csv2Js from "https://vizzu-story.vizzuhq.com/0.5/assets/javascripts/csv2js.js";

// Get the created element
const vp = document.querySelector("vizzu-player");
// Set the size of the HTML element
vp.style.cssText = "width: 100%; height: 400px;";
// Initializing Vizzu Player
const vpInitialized = vp.initializing;

// Create data object
const dataLoaded = Csv2Js.csv("https://vizzu-story.vizzuhq.com/0.5/examples/population/population.csv", ["Year"]);

// Because using presets here, you need to
// create the configuration object after initialization
// (then presets are accessible via vp.Vizzu.presets)
Promise.all([dataLoaded, vpInitialized]).then((results) => {
  const data = results[0];
  const chart = results[1];

  // Switch on the tooltip that appears
  // when the user hovers the mouse over a chart element
  chart.feature("tooltip", true);

  // Each slide here is a page in the final interactive story
  const slides = [
    {
      filter: (record) => record.Continent === "Africa",
      style: { plot: { xAxis: { label: { angle: 2.0 } } } },
      config: vp.Vizzu.presets.stackedArea({
        x: "Year",
        y: "Medium",
        stackedBy: "Subregion",
        title: "Population of Africa 1953-2098",
      }),
    },
    {
      config: vp.Vizzu.presets.percentageArea({
        x: "Year",
        y: "Medium",
        stackedBy: "Subregion",
      }),
    },
    {
      config: vp.Vizzu.presets.stream({
        x: "Year",
        y: "Medium",
        stackedBy: "Subregion",
      }),
    },
    {
      config: vp.Vizzu.presets.violin({
        x: "Year",
        y: "Medium",
        splittedBy: "Subregion",
      }),
    },
  ];

  // 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;
});