DEV Community

玄魂
玄魂

Posted on

[Practical] Create a Dynamic Infographic in 10 Minutes

#datavis #infographic #vstory #visactor

Background

Dynamic infographics are a powerful form of visual expression that can transform complex data and information into intuitive, vivid graphical presentations. Through dynamic infographics, we can:

  1. Better tell data stories, making dry data lively and interesting
  2. Improve information transmission efficiency, helping audiences quickly understand core information
  3. Enhance expressiveness and interactivity, providing immersive user experiences
  4. Achieve real-time data updates and dynamic display

This article will detail how to create a dynamic infographic using VStory, helping everyone quickly master this powerful tool.

Preparation

Understanding VStory

First, visit the VStory official website to understand VStory and its basic concepts: https://www.visactor.com/vstory/guide/tutorial_docs/Getting_Started

Clone Repository and Local Environment

First, globally install @microsoft/rush:

npm i --global @microsoft/rush
Enter fullscreen mode Exit fullscreen mode

Then clone the code to your local machine:

git clone git@github.com:VisActor/VStory.git
cd VStory
Enter fullscreen mode Exit fullscreen mode

You can also choose Github Desktop

Install Dependencies

// Note: Execute in the project root directory
rush update
Enter fullscreen mode Exit fullscreen mode

Start VStory Local Development

rush story
Enter fullscreen mode Exit fullscreen mode

After success, open http://localhost:6789/ in your browser to see the following screen:

You can check completed infographics under infographic

Start Creating

Decide What to Create

You can choose topics based on your interests or current news events. Infographics are charts that tell data stories through various visualizations containing data.

Here, I plan to use charts to introduce the impact of DeepSeek's open-source model release on the AI market and explain why it had such an impact.

Collect Data

Based on the purpose, I need to collect relevant data: what changes occurred in US stocks after DeepSeek released its open-source model.

Ask AI for relevant information:

  • DeepSeek officially released its latest open-source model DeepSeek R1 on January 20, 2025. The model achieved performance comparable to OpenAI's o1 model at an extremely low training cost (only about $6 million) and caused a sensation globally.

  • After the open-source model became increasingly popular, one week later on January 27 (US local time), the US tech sector plummeted due to DeepSeek's impact. NVIDIA's stock price fell nearly 17% in a single day, setting a record for the largest single-day market value drop in US stock history. Microsoft, AMD, and other companies' stock prices also suffered significantly.

Collect accurate data for January 27 from financial websites:

Company Name Stock Code Jan 24 Closing Price Jan 27 Closing Price
NVIDIA NVDA 142.62 118.42
Broadcom AVGO 244.70 202.13
AMD AMD 122.84 115.01

Prepare Graphic Content

Data Display

I choose to use charts to display this data. Ask AI what chart type would be better for display. Got the following recommendation:

Now I go to the VChart official website to draw this chart using VChart. No need to download VChart; you can debug directly using the online editing capability provided on the official website.

First, find the grouped column chart example

Then adjust the chart's display effect:

  1. Modify the chart's data to what I want to display
  2. Narrow the data range to make data changes clearer
  3. Remove the value axis as individual stock prices aren't very meaningful compared to decline percentages
  4. Add annotations to mark the decline percentage for each stock

Here's the final chart effect. Record this configuration spec.

Title and Content Introduction

Use AI to generate titles and text that match my ideas:

**English Title:**

DeepSeek's Shockwaves: AI Giants Lose $170B in 72 Hours

(Subtitle: When Algorithms Crack the Silicon Fortress)

**Analysis Text (English):**

DeepSeek's breakthrough exposes a seismic shift in computing economics. The synchronized collapse of chip leaders signals that AI's next phase may bypass brute-force hardware scaling. NVIDIA's historic plunge—its worst performance since the crypto-mining crash—mirrors Wall Street's awakening: when algorithms can achieve 10x training efficiency, the $3 trillion semiconductor industry must reinvent its value proposition. This isn't a correction, but a Copernican revolution in AI infrastructure.
Enter fullscreen mode Exit fullscreen mode

Add a Background Image

Create a background image related to the content using AI:

Design Content Layout and Display Effect

Ask AI for a basic layout suggestion:

Summary of layout effects:

  1. A large title at the top
  2. Subtitle right above the chart
  3. Description on the right side of the chart

Given there's no more content, pay attention to the chart's dimensions and text content size to avoid too much blank space at the bottom.

Start Creating

Step 1: Create New Demo

Create your own demo file in this directory of the project:

packages/vstory/demo/src/demos/infographic
Enter fullscreen mode Exit fullscreen mode

Here's the file I created:

Then you can first copy content from another infographic to your file, delete the DSL content, it looks something like this:

import React, { useEffect } from 'react';
import { IStoryDSL, Player, Story } from '../../../../../vstory-core/src';
import { registerAll } from '../../../../src';

registerAll();
export const DeepseekShockwave = () => {
  const id = 'DeepseekShockwave';
  useEffect(() => {
    const container = document.getElementById(id);
    const canvas = document.createElement('canvas');
    canvas.width = 1024;
    canvas.height = 1024;
    container?.appendChild(canvas);

    const dsl: IStoryDSL = {
      acts: [],
      characters: []
    };

    const story = new Story(dsl, {
      canvas,
      width: 1024, // Planning to make a 1024 X 700 rectangular infographic
      height: 700,
      scaleX: 'auto',
      scaleY: 'auto'
    });
    const player = new Player(story);
    story.init(player);
    player.play(-1);

    return () => {
      story.release();
    };
  }, []);

  return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
};
Enter fullscreen mode Exit fullscreen mode

Add your demo to the app directory. app.tsx is located at:

Then add your content under Infographic in menus, remember to import your component in app.tsx first:

import { DeepseekShockwave } from './demos/infographic/deepseek-shockwave';
Enter fullscreen mode Exit fullscreen mode

Here's what I added:

Now you can see your demo in the right menu after starting debug.

Add Elements

Let's first add all elements we need to display, giving them random positions. Elements are added to characters:

Background

First add image resources:

Note the rule: Image resources must be placed in this directory:

packages/vstory/demo/src/assest/infographic/${yourDemoName}
Enter fullscreen mode Exit fullscreen mode

Then add an image type element:

// Import image element
import bg from '../../assets/infographic/deepseek-shockwave/bg.png';

characters: [
        {
          id: 'background', // Element ID will be used later
          type: 'Image', // Type
          zIndex: 0,  // Layer level
          position: { // Element position and size
            x: 0,
            y: 0,
            width: 1024,
            height: 700
          },
          options: {
            graphic: {
              image: bg, 
              fillOpacity: 0.4 // Opacity
            }
          }
        },
]
Enter fullscreen mode Exit fullscreen mode

Chart

characters: [
    // ... others
    {
      id: 'chart',
      type: 'VChart',
      zIndex: 1,
      position: { // Give it a random position first
        x: 50,
        y: 50,
        width: 400, // Note to give width and height
        height: 400
      },
      options: {
        spec: spec // Chart configuration from content preparation
      }
    }
]
Enter fullscreen mode Exit fullscreen mode

Text

characters: [
    // ... others
    {
      id: 'title',
      type: 'Text',
      zIndex: 1,
      position: { x: 512, y: 0, width: 1024, height: 100 },
      options: {
        graphic: {
          text: `DeepSeek's shockwave: AI's technological revolution`,
          fill: 'black',
          fontSize: 48,
          textAlign: 'center',
          fontWeight: 'bolder'
        }
      }
    },
]
Enter fullscreen mode Exit fullscreen mode

After adding all elements.

Configure a display action for them. (We'll configure animations last)

const dsl: IStoryDSL = {
  acts: [
    {
      id: 'defaultAct',
      scenes: [
        {
          id: 'defaultScene',
          actions: [
            {
            // Give all elements a display action first, without specific animation properties, they will display directly
              characterId: ['background', 'title', 'subTitle', 'desc1', 'desc2', 'chart'],
              characterActions: [
                {
                  action: 'appear'
                }
              ]
            }
          ]
        }
      ]
    }
    ...character
}
Enter fullscreen mode Exit fullscreen mode

You should see a messy infographic:

Layout and Fine-tuning

Now we need to adjust elements to their corresponding positions and adjust properties to make it look more coordinated:

  • You can adjust element position and size through the character's position property
  • Text's text property can be an array, so you can manually line break like this: 
 text: [`When Algorithms Crack`, '\n', `the Silicon Fortress`],
Enter fullscreen mode Exit fullscreen mode

After simple adjustment of positions, text colors, and sizes, this infographic is almost complete:

Artistic Enhancement

This part is subjective, such as adding shapes, watermarks, adding backgrounds to text, etc.

Add Animations

Just now when adding elements, we added a unified appear action in the action. Now let's configure different animation effects for elements individually.

Taking the right text as an example:

const dsl: IStoryDSL = {
  acts: [
    {
      id: 'defaultAct',
      scenes: [
        {
          id: 'defaultScene',
          actions: [
            {
              characterId: ['desc1'],
              characterActions: [
                {
                  action: 'appear',
                  startTime: 1000, // Animation start time
                  payload: [
                    {
                      animation: {
                        duration: 800, // Duration
                        easing: 'linear', // Interpolation method
                        effect: 'wipe' // Effect
                      }
                    }
                  ]
                }
              ]
            }
           // ... other actions
           ]
         }
       }
     ]
   }
   // ... characters
Enter fullscreen mode Exit fullscreen mode

Specific animation configuration documentation is here: https://www.visactor.com/vstory/guide/tutorial_docs/VStory_Concepts/action

Final Effect

Upload

  1. Pull new branch from develop, PR target is also develop.
  2. When submitting PR, select demo update and invite Reviewers: xuefei1313 or neuqzxy or xiaoluoHe

Reference PR
How to submit PR

Welcome to Communicate

Discord: discord.gg/3wPyxVyH6m

WeChat Official Account: Open link to scan code

Twitter: twitter.com/xuanhun1

Top comments (0)

Read next

codeplato profile image

The Bicycle-shed effect

code plato -

forwardmsg profile image

How to Forward Messages from Discord to Telegram

ForwardMsg -

tcgyver profile image

AI agent

Gyver Tc -

devlinkstudios profile image

Top 20 Cloud Computing Trends to Watch in 2025

Devlink Tips -