做出酷炫的动态统计图表,不一定要写代码

简介: 首先这个名字很长的,就是上面 GDP 图表的作者 Jannchie见齐 基于 D3.js 开发的 将历史数据排名转化为动态柱状图图表 的项目,并在 github 上开源了。

大家在网上冲浪这么久,应该都看到过不少酷炫的图表。我之前也分享过一次:

数据是美丽的


近来随着视频的流行,很多图表也被做成了动态的视频。尤其是跟时间相关的数据,用视频来展示更加直观和震撼。


比如B站上有个很火的世界各国GDP变化

这个动态图表的作者是B站UP主 Jannchie见齐,是基于 JavaScript 的数据可视化库 D3.js 完成的。


虽然我们编程教室整天在讲代码。但我知道,有很多读者在代码方面并不擅长,只是需要完成某种任务,数据可视化就是其中很常见的一项。


这种情况下,其实我们大多数时候是可以不需要自己写代码,或者只需要在别人开源工具的基础上做少量改动就可以完成的。用程序员圈的一句话说就是:不要重复造轮子

下面我就分享动态图表几个特别好用的轮子:

 Historical-ranking-data-visualization-based-on-d3.js  


https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js

首先这个名字很长的,就是上面 GDP 图表的作者 Jannchie见齐 基于 D3.js 开发将历史数据排名转化为动态柱状图图表 的项目,并在 github 上开源了。


所以如果你想要制作类似的动态图表,只要有数据,按照项目说明里指定的数据格式整理好 csv 格式的表格文件,就可以做出同样的效果了。


我之前自己拿它尝试过一个小例子:


15年来,国民出行方式的变迁


 ECharts  

https://www.echartsjs.com


这个是我们的老伙计了,我们多次在项目中使用 ECharts,以及在其基础上衍生出的 pyecharts。在百度众多产品线中,ECharts 是用户口碑相当高的一个。很多公司前台大屏上的数据展示都是基于 ECharts 制作的。


它不仅提供了数量众多、几乎涵盖了所有你能想到的图表形式,


还可以自定义图标的样式细节。



而这这些,都不需要你动手改动代码,你只需要调整好配置,生成代码,下载本地,然后把自己的数据填进去就可以了。



我们之前关于 ECharts 的介绍,以及使用过的案例:

ECharts+Python 给你的数据做“美颜”

当下的Python就业前景如何

去年电影国内票房最高的演员是谁

 Flourish  

https://flourish.studio/


如果说,上面两个工具你还需要懂一点前端 HTML 的知识,需要修改运行代码。那么这一个“神器”则是彻底让小白可以零基础制作出酷炫图表。


同样是一个类似的动态柱状“竞速”图,这次是世界各国城市人口的变化


640.gif


在 Flourish 的网站上注册登录后,它会引导你选择你要的图表形式



设定样式


和添加数据


完成之后就可以发布了。全程无代码。唯一能阻挡你的,可能就是英文了。但现在网页翻译工具很多,工具化的操作也没有大段的复杂文字,摸索一次之后就可以搞定了。


而且,这样功能强大的网站,只要你做的图表选择公开的非商用展示,就无需支付任何费用


  国家数据 - 国家统计局  

http://data.stats.gov.cn/


有同学要说了,工具我知道,关键是数据到哪儿找啊?


这里就给一个数据宝藏:国家统计局的国家数据



上面有全国各地区各行业的年度/季度/月度指标,足够你用来练习和分析的了。

我之前的文章《中国的大学生太多了吗?》里面用的就是这里的数据。


又有同学问了:你介绍这么好的可视化工具,不是砸自己招牌嘛?我们都用这些工具就好啦,不用学编程了!


话分两头说。如果你的目的就是有时候需要将一些数据展示成精美的图表,那确实没必要非自己写代码不可。人家工具已经做得很好了。开发的核心是解决问题,写代码只是解决问题的一种方式,不是目的。搞清自己的目的,不要本末倒置。


但并不是所有情况都可以有现成工具解决。有的图表是需要根据系统里的实时数据进行变化的,得通过程序将其关联同步。另外,你可以通过代码来采集和整理数据,这个过程可以帮你节省大量时间。


上个月参加了我们爬虫学习小组的同学们,你们抓下来的招聘、租房、电影等信息,就可以拿来尝试下用上述工具制作成图表展示。(预告一下:接下来我们也会开数据可视化的小组。)


况且数据可视化只是编程的一个细分的应用分支。你可以直接用工具,是因为有别人替你写了代码。求人不如求己,想要应对现实中各种复杂多变的需求,自己get编程技能才是王道。





其他内容回复左侧关键词获取:python :零基础入门课程目录新手 :初学者指南及常见问题

资源 :超过500M学习资料网盘地址项目 :十多个进阶项目代码实例


如需了解视频课程及答疑群等更多服务,请号内回复 码上行动

推荐阅读经验:选专业 | Python转行 | 我用Python | 新手建议

干货:如何debug |  一图学Python  | 知乎资源 | 单词表案例:漫威API | 爬抖音 | 查天气 | 监控大V | 红包提醒

相关文章
|
3月前
|
前端开发 搜索推荐 JavaScript
探析单页应用(SPA)与多页应用(MPA):从技术角度选择合适的应用形式
随着Web应用的快速发展,单页应用(SPA)和多页应用(MPA)成为了开发者们在构建Web应用时常遇到的两种选择。本文将从技术角度出发,深入比较单页应用和多页应用的特点和优势,帮助读者更好地选择适合自己项目的应用形式。
19 0
|
8月前
|
前端开发 区块链
合成游戏看广告视频盒子系统开发方案逻辑/详细案例/功能设计/需求步骤/规则项目/源码说明
在Solidity中,与外部合约交互可以通过调用函数来完成。这些函数可以是在Solidity合约中定义的函数,也可以是在外部合约中定义的函数。调用外部合约函数需要知道合约的地址和函数的签名。
|
9月前
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
90 1
|
9月前
|
监控 搜索推荐 数据可视化
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
65 0
|
10月前
|
定位技术 Android开发
如何做一个简单的网页版地图
如何做一个简单的网页版地图
150 1
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
128 0
iOS开发 - 柱状图动态展现动画
|
前端开发 数据可视化 JavaScript
可视化大屏的几种屏幕适配方案,总有一种是你需要的
假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时一般都会基于一个固定的宽高,但是实际的屏幕可能大小不一,接下来我们就尝试几种简单且常见的方案,并简单分析一下利弊。
469 0
|
移动开发 数据可视化 前端开发
基于自然流布局的可视化拖拽搭建平台设计方案
LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.
829 0
|
JavaScript 数据可视化 NoSQL
D3.js 力导向图的显示优化(二)- 自定义功能
在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能。
772 0
|
前端开发 数据可视化 JavaScript
做可交互的统计图表,这套图形语法不容错过
“一图胜千言”,是最直观的数据可视化魅力。以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达。