1. Anichart is introduced

I have shared an article about the production of dynamic sorting graph before, using the animation function of Matplolib. If you are interested, you can take a look

The basic function is realized, but the final effect is not so friendly. The basic principle of this method is to visualize data into each frame of picture with Matplotlib first, and then spliculate each frame into video. The disadvantages are obvious: complicated steps, large amount of code and poor visualization effect

Today, I share another way to make such state diagrams. I use anichart, a Github project. As we all know, javascripts are indispensable for making silky and smooth visual interaction, and this project is mainly implemented in typescript. The project is maintained by a B station Up master [Jannchie see qi]

Typescript is a programming language developed on the basis of JS to compensate for its poor maintainability and type confusion. The main function of Anichart is to make dynamic sorting diagram, which has much better visualization effect. The following is the final sorting diagram I drew based on the test data provided for the project.

]

2. Environment Introduction

First, let me explain the project environment used this time. Anichart is a front-end project, so all the tools used this time are related to the front-end. This tutorial only introduces how to use this project, and there is no need to consider the details, so there is no need to worry about whether you have front-end knowledge.

The software required is as follows:

  • Node. Js;
  • Ffmpeg.

The test system is Win10.

Node.js has two main functions: 1. It manages the dependencies needed to download the project; 2.

Ffmpeg mainly converts sequence images into video

Node. js and FFmpeg are easy to download and install on Windows. There are two links for you to follow:

Node. Js installation: www.jianshu.com/p/2958fc051…

Ffmpeg installation: zhuanlan.zhihu.com/p/118362010

After installing both software, don’t forget to configure environment variables

3. Use the Anichart library

3.1 anichart installation

Anichart has been uploaded to the official website of NPM. Open the command line and use the command NPM I Anichart to install it. There is no need to clone it from Github.

What is NPM? NPM is actually the Package Manager for Node.js, which means that after you configure the Node.js command, NPM can be used normally

3.2 Creating a JS file

Once installed, you can use the anichart installation path to create a new JS file with any name, and then add the following code to the js file you just created

const ani = require('anichart')
const stage = new ani.Stage()
stage.options.fps = 24
stage.options.sec = 30
stage.output = false

const bgAni = new ani.RectAni()
bgAni.component.shape = {
  width: stage.canvas.width,
  height: stage.canvas.height,
}
bgAni.component.fillStyle = '#1e1e1e'

const textLinesAni = new ani.TextLinesAni()

textLinesAni.component.fillStyle = '#eee'
textLinesAni.component.textAlign = 'center'
textLinesAni.component.textBaseline = 'middle'
textLinesAni.component.position = {
  x: stage.canvas.width / 2.y: stage.canvas.height / 2,}const textAnichart = new ani.TextAni()
textAnichart.component.fontSize = 48
textAnichart.component.font = 'Sarasa Mono Slab SC'
textAnichart.component.text = 'Anichart'
textAnichart.component.fontWeight = 'bolder'
textAnichart.type = 'blur'


textLinesAni.children.push(textAnichart)


ani.recourse.loadImage('H:/Data/data/ANI.png'.'logo')
ani.recourse.loadImage(
  'https://avatars3.githubusercontent.com/u/29743310?s=460&u=8e0d49b98c35738afadc04e70c7f3918d6ad8cdb&v=4'.'jannchie'
)

ani.recourse.loadCSV('H:/Data/data/test.csv'.'data')


const rectAni = ani.createAni(
  [
    new ani.Rect({
      position: { x: 100.y: 0 },
      shape: { width: 100.height: 0 },
      fillStyle: '#d23',}).new ani.Rect({
      shape: { width: 100.height: 200 },
      fillStyle: '#2a3'.alpha: 1,}).new ani.Rect({
      shape: { width: 100.height: 0 },
      fillStyle: '# 569'.alpha: 0,})], [0.1.2],
  ani.ease.easeElastic
)

const logoCenter = new ani.Image({
  path: 'H:/Data/data/ANI.png'.position: {
    x: stage.canvas.width / 2.y: stage.canvas.height / 2,},alpha: 0.25.center: { x: 128.y: 128 },
  shape: { width: 256.height: 256}})const logoAni = ani.createAni(
  [
    new ani.Image({
      path: 'H:/Data/data/ANI.png'.position: {
        x: 0.y: stage.canvas.height - 108,},shape: { width: 128.height: 128}}),new ani.Image({
      path: 'H:/Data/data/ANI.png'.position: {
        x: stage.canvas.width - 128.y: stage.canvas.height - 108,},shape: { width: 128.height: 128 },
      alpha: 1.0,}).new ani.Image({
      path: 'H:/Data/data/ANI.png'.position: {
        x: stage.canvas.width - 128.y: stage.canvas.height - 108,},shape: { width: 128.height: 128 },
      alpha: 0,})], [0.1.2],
  ani.ease.easeBounce
)

const barChart = new ani.BarChart({
  shape: { width: stage.canvas.width, height: stage.canvas.height },
  labelFormat(id) {
    return id
    // return meta.get(id).name;
  },
  aniTime: [0.30],})const lineChart = new ani.LineChart({
  aniTime: [0.30].shape: { width: stage.canvas.width, height: stage.canvas.height / 2 },
  position: { x: 0.y: stage.canvas.height / 2 },
})


stage.addChild(bgAni)
// stage.addChild(a)
stage.addChild(logoCenter)
stage.addChild(textLinesAni)
stage.addChild(rectAni)
stage.addChild(logoAni)
stage.addChild(barChart)
stage.addChild(lineChart)


const pie = new ani.PieChart({
  aniTime: [0.30].radius: [80.120].position: { x: stage.canvas.width / 2.y: stage.canvas.height / 2 },
})

stage.addChild(pie)
stage.play()
Copy the code

Before running, you need to change several parameters, the first of which is to change the data path

ani.recourse.loadCSV('H:/Data/data/test.csv', 'data')
Copy the code

The data format should be stored in the following form, where data represents the changed column name in the data source. For example, in this case, date is serialized as a variable

The name, the date, the value, the channel, other Jannchie, 2020-01-01, 1, science and technology, other Jannchie, 2020-01-03, 6, technology, and other Jannchie,2020-01-05,3, Science, Other Jannchie,2020-01-07,-, Science, Other Jannchie,2020-01-09,7, Science,other Jannchie,2020-01-12,12, Science, Other Cake47,2020-01-03,10, life,other Cake47,2020-01-02,5, life,other Cake47,2020-01-06,2, Life,other Cake47,2020-01-09,3, life,other Cake47,2020-01-11,4, life,otherCopy the code

Second, you need to change all PNG paths and make them your own. You can replace them with your image paths at will without much impact

ani.recourse.loadImage('H:/Data/data/ANI.png', 'logo')
Copy the code

3.2 Running the JS Script

After the above modification, the next step is to start the script, open a command line in the js file directory, type node xxx.js, press Enter, XXX. Js represents your JS file, the effect is as follows

Then an Out folder will be generated to store the images drawn by Anichart

3.3 Generate videos with FFMPEG images

Finally, go into the out folder and use the ffmpeg command to compose the image into a video,

ffmpeg -f image2 -framerate 12 -i output-%d.png foo.avi
Copy the code

– Framerate 12 indicates the FPS of the generated video, which can be set according to your own situation. Here, I set 24.

Finally, a dynamic sorting video is generated, and then you can add some BGM to make the video feel

4. Describes some parameters in js

The author doesn’t have much to say about how to use Anichart, and the Github homepage only describes the simplest way to use anichart

So in order to generate some nice visualizations for you, I will briefly introduce some of the parameters in the js code above to add some understanding of the Anichart library

4.1 FPS, the SEC

stage.options.fps = 24
stage.options.sec = 30
Copy the code

FPS is the number of frames per second, and SEC is how long it takes to generate slices (unit: second). Using the above parameters, it will generate 24×30 = 720 images; These two parameters determine the smoothness of the final video. It is recommended to keep the framerate parameter FPS the same when using FFMPEG to generate videos

4.2 ANI. Recourse. LoadImage

ani.recourse.loadImage(
  'https://avatars3.githubusercontent.com/u/29743310?s=460&u=8e0d49b98c35738afadc04e70c7f3918d6ad8cdb&v=4',
  'jannchie'
)
Copy the code

LoadImage is used to add an image logo to each data bar in the bar chart. The former parameter indicates the image path or web link, and the latter parameter indicates the name of the data bar to be added. For example, the name of the data bar to be added is Jannchie

4.3 BarChart, LineChart, PieChart

BarChart, LineChart and PieChart represent BarChart, curve chart and PieChart respectively. In addition to these three types of graphs, Anichart also has ItemChart, BaseChart, MapChart, etc.

Anichart needs to add two parameters to all graphics objects, Shape and aniTime. The former represents the size of the shape and the latter represents the duration of the graph in s

4.4 stage. AddChild (xx)

Anichart validates the created object with the stage.addChild() function, where the stage represents the global canvas, generated by the following command

const ani = require('anichart')
const stage = new ani.Stage()
Copy the code

5. Source data acquisition

For convenience, the source code and test data involved in this article have been packaged together by me, and can be obtained by using the public account Xiao Zhang Python background, reply keyword: 210604

6. Summary

About dynamic sorting drawing in addition to the two methods, and to recommend a website named flourish, url: flourish. Studio/examples /

Flourish final generation is also very good, but the downside is that a large number of parameters need to be fine-tuned

Ok, about the production of the sorting diagram is introduced here, if the content is helpful to you might as well click a like to encourage me ~

Thank you for reading, and we’ll see you next time