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.4/dist/vizzu-story.min.js"; import Csv2Js from "https://vizzu-story.vizzuhq.com/0.4/assets/javascripts/csv2js.js"; // Get the created element const vp = document.querySelector("vizzu-player"); const vizzuLoaded = import(vp.vizzuUrl); // Create data object const dataLoaded = Csv2Js.csv("https://vizzu-story.vizzuhq.com/0.4/examples/population/population.csv", ["Year"]); Promise.all([dataLoaded, vizzuLoaded]).then((results) => { const data = results[0]; const Vizzu = results[1].default; // 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: Vizzu.presets.stackedArea({ x: "Year", y: "Medium", stackedBy: "Subregion", title: "Population of Africa 1953-2098", }), }, { config: Vizzu.presets.percentageArea({ x: "Year", y: "Medium", stackedBy: "Subregion", }), }, { config: Vizzu.presets.stream({ x: "Year", y: "Medium", stackedBy: "Subregion", }), }, { config: Vizzu.presets.violin({ x: "Year", y: "Medium", splittedBy: "Subregion", }), }, ]; // Create story configuration object, add data and slides to it const story = { data, slides, }; // Set the size of the HTML element vp.style.cssText = "width: 100%; height: 400px;"; // Set up the created element with the configuration object vp.slides = story; vp.initializing.then((chart) => { // Switch on the tooltip that appears // when the user hovers the mouse over a chart element chart.feature("tooltip", true); }); });