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

简介: 首先这个名字很长的,就是上面 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月前
PPT 做出动态路线动画
PPT 做出动态路线动画
36 0
|
5月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
143 1
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
136 1
|
前端开发 JavaScript
前端动画(动态)图标库收集
前端动画(动态)图标库收集
151 0
|
小程序 定位技术
记录一款基于地图标注点展示的微信小程序开发过程纪要
记录整理一款基于地图的微信小程序开发过程,主要涉及标注点展示,可视范围内标注点动态更新,标注点自定义气泡,气泡点击及气泡内容实时更新
124 0
|
监控 搜索推荐 数据可视化
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
107 0
|
传感器 网络协议 物联网
5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量|学习笔记
快速学习5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量。
315 0
5_1_1_首页信息展示屏_整体介绍_技术点及获取电池电量|学习笔记
好客租房140-长列表性能优化(可视区域渲染)
好客租房140-长列表性能优化(可视区域渲染)
98 0
好客租房140-长列表性能优化(可视区域渲染)
|
移动开发 数据可视化 前端开发
基于自然流布局的可视化拖拽搭建平台设计方案
LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.
932 0
|
数据可视化 API 数据库
ThingJS: 做一个数据可视化项目的难点在什么地方?3D 可视化 three.js
项目开发的过程会分成三个部分:数据前置动作、三维建模环节、3D开发环节,数据前置动作,是一大难点。
ThingJS: 做一个数据可视化项目的难点在什么地方?3D 可视化 three.js