FFCreator - Use node.js to make data visualization videos

TNTWeb-the full name of Tencent News front-end team, the small partners in the group have practice and accumulation in the front-end web, NodeJS development, UI design, mobile APP and other big front-end fields.

At present, the team mainly supports the front-end development of Tencent News's various businesses. In addition to business development, it has also accumulated some front-end infrastructure to empower business efficiency and product innovation.

The team advocates open source and co-construction, and has a variety of technical experts. The team’s Github address: https://github.com/tnfe

Today I will introduce FFCreator to everyone, project address: FFCreator

introduction

Data visualization, a picture is worth a thousand words

Whether we are content producers or consumers, in the data age, we are dealing with data every day.

The ever-increasing content consumption capabilities of consumers place higher and higher requirements on content producers, and we are constantly seeking more efficient content types and content expression types. In the data age, "data visualization" as an expression type, production type, and content type is increasingly entering the audience's field of vision.

There is no need to repeat the benefits of data visualization. As the saying goes, a picture is worth a thousand words.

(In the "picture" below, I looked at a lot of words, and I looked at it carefully, but there was nothing. After reading it for a while, I saw only five words--'a look is worth a thousand words', and even a curse. It's an advertisement (1913 advertisement))

(And the "picture" below has no words, but you seem to see many words-"I understand the truth, but why is the pigeon so big", even the corners of the mouth smile unconsciously)

When data visualization meets short video

The two seemingly nonsensical pictures above may not have much to do with data visualization. We can still see the richer expressiveness of pictures relative to text. So when data visualization encounters video?

The train of the times slammed, and the pony of time sprinted.

We have entered from the era of paper media to mixed graphics and text, and from data visualization to visual video. Each change is for more efficient expression, to adapt to consumers with stronger content digestion and absorption capabilities, and to adapt to the era of high-speed running.

Everyone's digestion and understanding speed of content and data is different. As content consumers, some people like traditional paper media, which is serious and rigorous, with depth and attitude; some people like short videos, which are easy and convenient, entertaining and warm.

As content producers, consumer time is fragmented, and short videos, as a more diversified production method for content producers, have become the current content expression trend. Content creators need to compress video duration and carry more content.

Some experts may say that data visualization and video may not be the best match. Everyone has a different speed of absorbing data; and the rhythm of short videos is relatively fast and limited, which is not convenient for the audience to digest and understand.

(Netizen Xu Fengnian: ??? I thank you for being a brickman, I have three times the speed of watching dramas, don’t underestimate my absorption speed!!!)

On the one hand, it is the demand of consumers for "high-speed data absorption capacity"; on the other hand, it is the rich expressiveness of data visualization video. Why don't we embrace this type of content, content expression type?

Please see the example below.

There is no problem when we use a two-dimensional chart with the number of horizontal axis and the area of the vertical axis to present the data, but when we want to add the third dimension of time or more, the two-dimensional chart is not suitable. The biggest advantage of visual video is that it is more intuitive and has a large amount of information. Especially for multi-dimensional content involving time trends, combining video is a very good application scenario.

Therefore, we often see many types of data visualization videos on station B and Douyin. While we admire the efficient expression of these data visualization videos, I believe many friends are very curious about how these videos are done, right?

FFCreator

Google and Baidu clicked and searched, but still didn't understand how to do it or found the right tool. You might as well try this tool that uses node.js to make data visualization videos.

The FFCreator launched by the TNTWeb team is a lightweight and flexible short video production library based on node.js. You only need to add a few pictures or video clips plus a background music, you can quickly generate a cool video clip.

You can add various elements such as music, subtitles, text, and virtual anchor to the video. Of course, it is very convenient to make single or batch data visualization videos.

Maybe you can find a variety of tools on the Internet, but the needs for tools are different for different roles.

FFCreator is not a tool for content creators like those found on the Internet, but for developers, but it is super easy to use, and you can learn it quickly with a little front-end foundation.

Introduction

FFCreator is a lightweight and simple solution that requires very little dependency and low machine configuration to start working quickly. It is developed based on node.js, and ordinary front-end engineers can easily get started. And it simulates 90% of the animation effects of animate.css, and you can easily convert the animation effects on the web page side into videos.

Open source warehouse

https://github.com/tnfe/FFCreator

Document address

https://github.com/tnfe/FFCreator#overview

Some features of FFCreator

• It is completely node.js , very easy to use, and easy to expand and develop.
• Depends little, easy to install, cross-platform, and has low requirements for machine configuration.
• The video production speed is extremely fast, a 5 minute video only takes 1-2 minutes.
• Support nearly a hundred kinds of scenes with cool transition animation effects.
• Supports elements such as pictures, sounds, video clips, and text.
• Support subtitle component, can combine subtitle and voice tts to synthesize audio news.
• Support simple (expandable) virtual host, you can make your own virtual host.
• Contains animate.css , which can convert css animation to video.
• FFCreatorLite has a faster speed, sometimes it is more suitable for you FFCreator

Echarts

echarts is a very powerful chart component library, which is very well-known in the field of data visualization. Anyone who has studied the front-end knows echarts .

FFCreator6.0 new FFChart components, and supports echarts.js most demo , you can create a cool video data visualization.

Note: To maintain the stability of the version currently FFCreator used echarts.js version fixed v5.1.2

Tutorials

The background chat understands: data visualization video, the current efficient content expression method, I also want to have it!

Do you know what the tool is: FFCreator

Pre-knowledge: a lost front-end basics

Then take a look at the instruction manual~~

1. Install FFcreator

Install FFCreator and related dependencies, installation concise tutorial

2. Copy the configuration code

echart.js to the 061cacb22d6fef official website `demo page https://echarts.apache.org/examples/zh/index.html to find the chart you want, open edit the page to copy the configuration code.

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  ...
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

3. Add chart components

Note: Because the video is web , please reset the margin and font size to achieve the best results

Initialize FFChart and set option and theme themes, here you can refer to https://echarts.apache.org/zh/api.html official document.

const fchart = new FFChart({
  theme: 'dark',
  option: option,
  x: width / 2,
  y: height / 2 + 50,
  width: 700,
  height: 600,
});

You can also use the setOption method to set the data

fchart.setOption(option);
fchart.addEffect(['rotateIn', 'zoomIn'], 1.2, 1);

A DEMO source code https://github.com/tnfe/FFCreator/blob/master/examples/chart.js

4. Dynamic Chart

How to add animation FFChart FFChart provides the update method to update data. It is a timed execution function and its function is similar to setInterval . You can pass in an update hook function, the second parameter is the interval time.

Note: Also note that this adjustment animationDuration and animationDurationUpdate value and other options, and to updateTime keep the pace up.

fchart.update(chart => {
  const newData = ...;
  ...
  chart.setOption(newData);
}, 1000);

5. Animate now

Of course, you will also find a problem, that is, update is called but the animation is not executed immediately. This is because update is a time interval function and will not immediately call the hook function to execute. Of course, many times users want this effect.

If you want to execute the chart animation immediately, then please call updateNow

fchart.update(() => {}, 1000);
fchart.updateNow();

If you encounter any problems during the process, please leave a message in the comment area or call the team github

team

TNTWeb-Tencent news front-end team, TNTWeb is committed to the industry's cutting-edge technology exploration and the improvement of team members' personal capabilities. The latest high-quality content in the field of small programs and web front-end technology has been compiled for front-end developers, updated weekly✨, welcome to star, github address: https://github.com/tnfe/TNT-Weekly