这种动态条形图+折线图怎么做?今天我来教你!

大家好,我是小五🐶

前几天我看了一个不到2分钟的视频,动态展示了我国的GDP增长。而且是动态条形图和折线图叠加一起使用,比较少见!然后我立了一个Flag,说要仿制。

本来当天就找了合适的方法,并简单仿制了出来。不过要写成文章的话,要各种截图录动图,还要加亿点点细节,所以就又拖了两天。然后做好了视频还要漫长的审核,摊手。

吐槽完毕,下面开始正文:

原视频细节

我又把原视频贴出来了哈,毕竟有小伙伴之前可能没看过。

其实它标题应该叫《中国GDP增长动态图,小红线,向上攀!》

这个动态图主要由两部分构成,即动态条形图动态折线图,而且从图层来说的话,折线图应该在下方。两者都表现的是我国GDP的增长动态,不过折线图是1953-2020年,动态条形图则是从1961年才开始出现。

不知道大家注意没有,两张图的统计单位其实并不一致,动态条形图是跟国外其他国家对比,所以统一用的都是美元。而我们单独的GDP动态折线图单位是人民币。

操作过程

第一步,先获取数据👉

获取数据

涉及GDP的数据可以直接去国家统计局直接下载

大家可以直接在「凹凸数据」后台回复“动态图”获取下载好的数据。

在之前的文章的中,我曾经教大家用Flourish来制作动态折线图,但这次需要两个图层叠一起。

于是我想到了国内的另一个可视化网站——镝数,可以编辑它的数据图文实现将两个动态图叠在一起。

镝数可视化

打开官网👉https://dycharts.com/

新建数据图文,调整画布合适的长宽比

在数据图文中先插入了动态折线图模板,具体操作如下

然后我们还得改亿点点细节,有点多,我就不一一录gif了。这里给大家截图几个关键点,后面自己看情况调节吧。

通过上述操作,就做好了一个动态折线图了:

在刚刚的基础上,我们再添加一个动态条形图。比较开心的就是它默认的动态条形图,正好就是各国GDP的增长动态,这也就是说——不用我们再去自行添加数据了。

👆查看上图即可看到,两图叠加后就和原视频很相像了。只需我们添加更多细节,比如调整两者尺寸和位置,更改动态条形图各国的颜色等等

如果大家想要与原视频颜色保持一致的话,可以查看下表,小五直接用调色板挨个选取各国的颜色(都是为了仿制的更像呀)

国家颜色代码国家颜色代码国家颜色代码
美国#4046a9印度#5cbc4f澳大利亚#faf440
中国#c82e33意大利#427adb西班牙#8a6a65
日本#90cd4b巴西#26816a墨西哥#1c5349
德国#9b0d54加拿大#e57a00荷兰#f1a100
英国#2ea186俄罗斯#32a3e0瑞士#4d7adb
法国#9f40b7韩国#f6d900阿根廷#90dafc

对了,还有就是原视频两个图是间隔出现的,这里我建议两个图延迟间隔5秒👇

通过修改细节,可以使我们的可视化图表与原视频更像。这时候就可以点击分享预览,方便我们下一步操作。

打开预览链接👉https://dycharts.com/xshow/index.html?id=32c1ae96b16d7c34d5dc325fbfb3d825

👆上方就是刚刚预览链接打开后样子,同时启动两个动态图就可以获得跟原视频几乎一样的效果啦!

注:还记得刚刚我们设置延迟时间嘛,正是为了方便我们用软件录屏呀🐶

制作视频

小五用录屏软件截取了需要的视频部分,随便选一个剪辑软件加个BGM即可。

这个不重要,我其实是用手机剪的,2分钟就能做好。

提醒大家一下,原视频的BGM是《Victory》。

它也是比较常见用来动态可视化的BGM,毕竟这可是十大气势背景音乐之一呀!气势磅礴的旋律,足以征服听众的内心。

最后,让你们看一下小五简陋的“仿品”吧

如果大家想直接下载GDP数据,可以在「凹凸数据」后台回复“动态图”来获取数据。

本文转转自微信公众号凹凸数据原创https://mp.weixin.qq.com/s/ZhbJaiLT99YKSHWdKDyyvQ,可扫描二维码进行关注: 如有侵权,请联系删除。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )

KVM调整cpu和内存

一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid