US Federal R&D budget

US Federal R&D budget In this more involved example, we explore the history of the US Federal R&D budget between 1955-2020. On top of the base functionality, this story showcases:

• Styling the overall story
• Setting the size of the story
• Slides with multiple steps

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

// Get the created element
const vp = document.querySelector("vizzu-player");

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

dataLoaded.then((data) => {
  // Set the style of the charts in the story

  const style = {
    plot: {
      yAxis: {
        label: {
          fontSize: "1em",
          paddingRight: "1.2em",
        },
        title: { color: "#ffffff00" },
      },
      xAxis: {
        label: {
          angle: "2.5",
          fontSize: "1.1em",
          paddingRight: "0em",
          paddingTop: "1em",
        },
        title: { fontSize: "0.8em", paddingTop: "2.5em" },
      },
    },
    logo: { width: "5em" },
  };

  // Each slide here is a page in the final interactive story
  const slides = [
    // Add the first slide,
    // containing a single animation step that sets the initial chart
    {
      // Only include rows where the Function value != Defense
      filter: (record) => record.Function !== "Defense",
      config: {
        channels: {
          y: {
            set: ["Amount[B$]", "Function"],
            // Set the range of the y-axis
            // to the min and max of the data being shown
            // default value is 110% of the maximum value
            range: { min: "0%", max: "100%" },
          },
          x: { set: ["Year"] },
          color: "Function",
        },
        title: "Stacked Area Chart - U.S. R&D Budget in 1955-2020",
        geometry: "area",
      },
    },
    // Show components side-by-side
    {
      config: {
        split: true,
        title: "Show Components Side by Side",
      },
    },
    // This slide contains multiple steps
    [
      // Step 1 - let's get back to the previous view
      { config: { split: false } },
      // Step 2 - Add the defense function to the chart by removing it from the filter
      {
        filter: null,
        config: { title: "Add New Category While Keeping the Context" },
      },
    ],
    // Show share of components
    {
      config: {
        align: "stretch",
        title: "Show Share of Components (%)",
      },
    },
    // Compare data from 1955 and 2020
    [
      // Step 1 - switch back to value instead of percentage
      { config: { align: "none" } },
      // Step 2 - switch to a stacked column chart by changing the geometry
      {
        config: {
          geometry: "rectangle",
        },
      },
      // Step 3 - zoom to data from the first and last years
      {
        filter: (record) => record.Year === "1955" || record.Year === "2020",
        config: {
          title: "Zoom to Specific Elements",
        },
      },
    ],
    // Group & rearrange elements for comparison
    [
      {
        config: {
          x: ["Year", "Function"],
          y: "Amount[B$]",
          label: "Amount[B$]",
          title: "Group & Rearrange for Better Comparison",
        },
      },
      {
        config: { x: ["Function", "Year"] },
      },
    ],
  ];

  // Create story configuration object, add data, style and slides to it
  const story = {
    data,
    style,
    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);

    // Set a handler that prevents showing the year values that are not divisible by 5
    chart.on("plot-axis-label-draw", (event) => {
      const Year = parseFloat(event.data.text);
      if (!isNaN(Year) && Year > 1950 && Year < 2020 && Year % 5 !== 0) {
        event.preventDefault();
      }
    });
  });
});