[SoC2020] Data-Driven Chart Animation

[neoddish]

数据驱动的图表动画
Data-driven chart animation

What is SoC2020: #885

描述 Description

以数据为中心，驱动图表变化并以动画形式表现变化过程

Data-centric, driving chart changes and showing the change process in the form of animation.

目标 Goal

1. 定义数据集和图表， 当图表加载数据后，就可以进行图形绘制和动画播控
2. 可以操控播放过程和速度，比如动画播放到某个阶段时，可暂定，恢复，重播，也可指定某个阶段的循环播放
3. 动画的实现需要具备可扩展性，方便对任意类型的图表添加和替换

1. Define data sets and charts, when the charts are loaded with data, you can perform graphics drawing and animation control
2. Can control the playback process and speed, for example, when the animation reaches a certain stage, it can be tentatively, resumed, replayed, and can also specify a certain stage of loop playback
3. The realization of animation needs to be extensible to facilitate the addition and replacement of any type of chart

类似案例 Examples

• https://motionarray.com/after-effects-templates/infographic-chart-creator-36176
• https://lottiefiles.com/21557-chart
• https://digg.com/video/coronavirus-spread-animation

需要技能 Prerequisite Skills

• JavaScript、Canvas等前端基础技能
• 图形语法相关知识
• 动画实现和原理
• 具备G2/F2开发经验更佳

• JavaScript, Canvas and front-end engineering skills.
• Graphic grammar related knowledge
• Animation implementation and principle
• Better G2 / F2 development experience

[maze-runnar]

Hi, @jiazhewang I want to apply for this project for ASoC. Can you please help me to dive in. I have prior F2 development experience.

[neoddish]

Hi, @jiazhewang I want to apply for this project for ASoC. Can you please help me to dive in. I have prior F2 development experience.

Welcome! You can check #885 for more instructions. First of all, visit https://www.alibabacloud.com/zh/campaign/summerofcode2020 and "Apply Now". Then follow the steps of this website.

If you have detailed question about the topic of this issue, please feel free to comment here.

[maze-runnar]

@jiazhewang I just want to ask that the three resource link you provide -

https://motionarray.com/after-effects-templates/infographic-chart-creator-36176
https://lottiefiles.com/21557-chart
https://digg.com/video/coronavirus-spread-animation

did they cover all 3 scenarios of the project which is needed?

1. Define data sets and charts, when the charts are loaded with data, you can perform graphics drawing and animation control
   2.Can control the playback process and speed, for example, when the animation reaches a certain stage, it can be tentatively, resumed, replayed, and can also specify a certain stage of loop playback
2. The realization of animation needs to be extensible to facilitate the addition and replacement of any type of chart

[zengyue]

@maze-runnar No, these are not, these are just the effects we expect to achieve, just examples of the effects

[maze-runnar]

@maze-runnar No, these are not, these are just the effects we expect to achieve, just examples of the effects

ok, thanks @zengyue

[maze-runnar]

Hi, @jiazhewang I want to apply for this project for ASoC. Can you please help me to dive in. I have prior F2 development experience.

Welcome! You can check #885 for more instructions. First of all, visit https://www.alibabacloud.com/zh/campaign/summerofcode2020 and "Apply Now". Then follow the steps of this website.

@jiazhewang @zengyue I have submitted a proposal for this project can you please review that and let me know if I need to add anything else.

[neoddish]

Unfortunately, no one's proposal passed the committee's selection. But this issue is still of great concern to us, and we still need help and co-construction in this direction. Interested friends can continue to contact us, although not as an ASoC project, but still a good open source cooperation task.

[neoddish]

@maze-runnar

Unfortunately, your proposal was not accepted. This does not mean that your proposal is not good, but the competition is fierce, and other proposals may be more suitable for the corresponding project. Thank you very much for participating in this event.

[maze-runnar]

Thanks @jiazhewang