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.
All built-in charts will reference the
date fields by default. You can also configure the names of the referenced fields in the chart's options.
Step 2: Load the data
Data, as a resource, can be shared globally by all components. You can load data like this:
The first parameter is the path to the file, and the second parameter is the name of the file.
The name of the data is very important. All built-in charts read a data table named "data" by default. It can be configured in the charts component.
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
const barChart = new anichart.BarChart();
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.
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.