Render the Basic Bar Chart ​

The essence of data visualization is to turn data into diagrams (or, in the case of this framework, animations). So the first step is to prepare the data.

Step 1: Prepare the data ​

The project currently supports reading Json data and CSV data. The CSV data is introduced here.

A CSV file is actually a table that uses commas and newlines to separate out cells.

You can edit CSV files directly using a text editor, or you can use Excel. The following is an example of a CSV file that is applicable to this project:

id,value,date
alpha,1,2020-01-01
alpha,2,2020-01-02
alpha,3,2020-01-03
beta,3,2020-01-01
beta,1,2020-01-02
beta,2,2020-01-03

The CSV file describes the following data:

In general, the data provided to the chart needs to be given in three fields.

• id: A unique identifier for each data entry.
• value: The value of the data entry.
• date: The date of the data entry.

Step 2: Load the data ​

Data, as a resource, can be shared globally by all components. You can load data like this:

anichart.recourse.loadCSV("path/to/csv/file.csv", "data");

The first parameter is the path to the file, and the second parameter is the name of the file.

Step 3: Define the chart ​

Next, we need to define the components of the bar chart. All chart component classes are named in the XxxChart format. The BarChart class is called BarChart.

const barChart = new anichart.BarChart();

That's all ​

Now you can play the animation directly! The overall code looks like this:

import * as anichart from "anichart";
const stage = new anichart.Stage();
anichart.recourse.loadCSV("path/to/csv/file.csv", "data");
const barChart = new anichart.BarChart();
stage.addChild(barChart);
stage.play();

As you can see, it only takes a few lines of code to implement a bar chart.

If you want to go deeper into the configuration, you need to know exactly what configuration items are available for each chart. Next, you should read the configuration manual.

Next ​

We can place the charts generated by anichart on the web page. However, many people need to export data visualization animations as videos for uploading on YouTube.

If we need to export videos, we also need a library called remotion. Next, I will describe how to export the video.