一、说明

之前在抖音上看到GDP等各种排名的可视化,一直想知道是怎么实现的。之前也有研究过一次,但觉得太麻烦放弃了,昨天又心痒难耐研究了一翻。

先是看到这篇文章说是有人基于d3.js实现:https://blog.csdn.net/qq_15351167/article/details/81363798

我想实现一个GDP的可视化排名,数据是从世界银行下载的。首先的一个问题是,该文章指的项目中的csv时间是作为一列,而世界很行下载的csv时间是一行。

当然,理论上我可以手动将世界银行下的csv改造成该项目的csv格式,但一是工作量很大二是时间作为一行的格式合理,凡事是有底线的如果为了实现排名功能费很大的力气做不合理的事这简直是一种侮辱。

要么直接阅读和修改源代码,要么直接放弃以后没人指导就别再想这排名可视化的事情。一是代码审计能力一般、二是javascript水平一般、三是d3.js就没用过,放弃又说服不了自己只好硬着头皮看代码改。

二、世界各国GDP动态排名可视化实现

项目地址:https://github.com/PrettyUp/GdpDynamicRankVisual

2.1 项目结构说明

-|----src
| |----node_modules----npm安装jquery和d3生成的目录
| |----API_NY.GDP.MKTP.CD_DS2_en_csv_v2_10515210.csv----从世界银行下的的GDP数据
| |----bargraph.html----可视化的html文件
| |----config.js----可视化配置文件
| |----main_country.csv----从API_NY.GDP.MKTP.CD_DS2_en_csv_v2_10515210.csv提取出的G20国家GDP
| |----package-lock.json----npm产生的文件,不用管
| |----stylesheet.css----可视化css文件
| |----visual.js----可视化功能实现的主要文件
|
|----src_bak----原项目src目录,其下文件未改动
|
|----LICENSE----原项目许可证,未改动
|
|----README.md----说明文件,已改动

2.2 运行效果

运行:下载----进入项目src目录----使用浏览器打开bargraph.html---载入要可视化的文件。(有网友反映运行后条形图并不显示,这应该是换行导致的问题,见下边评论回复)

以main_country.csv为例,main_country.csv格式如下:

运行效果如下:

2.3 通用化改造

我们这里实现了各国GDP动态排名可视化,但下次可能就想实现各省GDP、各省汽车产量等等的排名可视化,下面讲一下在当前基础上的改造要点。

数据表----csv格式,各列先后顺序无影响。

数据表----因为没有做任何额外处理所以作为key的各项一定要在第一行。

数据表----如果年分不是1960年开始2017年结束那么要同步修改config.js中的start_year和total_year。

数据表----现在时间增长通过类似"year += 1"的形式实现,如果时间不是年份而是“年-月”的形式那么要另外处理一下月份增长问题。

数据表----如果使用数据表年份除外的列名(如这里的Country_Name/Country_Code/Indicator_Name/Indicator_Code)可以是任意的(但中间不要有空格),但如果不是四列则要将config.js中的before_time_columns改成相应的列数。

参考:

https://blog.csdn.net/qq_15351167/article/details/81363798

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

世界各国GDP动态排名可视化实现(基于d3.js)的更多相关文章

  1. vue项目中基于D3.js实现桑基图功能

    前端实现数据可视化的方案有很多种,以前都是使用百度的echarts,使用起来很方便,直接按照特定的数据格式输入,就能实现相应的效果,虽然使用方便,但是缺点就是无法自定义一些事件操作,可自由发挥的功能很 ...

  2. MOOC课程信息D3.js动态可视化

    版权声明:本文为博主原创文章,转载 请注明出处:https://blog.csdn.net/sc2079/article/details/83153693 - 写在前面 好久没更新博客了,主要还是最近 ...

  3. 动态可视化 数据可视化之魅D3,Processing,pandas数据分析,科学计算包Numpy,可视化包Matplotlib,Matlab语言可视化的工作,Matlab没有指针和引用是个大问题

    动态可视化 数据可视化之魅D3,Processing,pandas数据分析,科学计算包Numpy,可视化包Matplotlib,Matlab语言可视化的工作,Matlab没有指针和引用是个大问题 D3 ...

  4. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  5. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  6. python画新冠肺炎国内和世界各国累计确诊数量热图

    新冠肺炎国内疫情基本控制住,很多地方都开始摘下口罩了.但是国外的疫情依然处于爆发期,特别是美国,截止目前其累计确诊数量已突破110w.五一节北京柳絮杨絮满天飞,不适合外出.在家心血来潮,献丑画一下各地 ...

  7. 用 Python 带你看各国 GDP 变迁

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 周萝卜 源自:萝卜大杂烩 PS:如有需要Python学习资料的小伙伴 ...

  8. [COGS257]动态排名系统 树状数组套主席树

    257. 动态排名系统 时间限制:5 s   内存限制:512 MB [问题描述]给定一个长度为N的已知序列A[i](1<=i<=N),要求维护这个序列,能够支持以下两种操作:1.查询A[ ...

  9. bzoj1901&zoj2112&cogs257 Dynamic Rankings(动态排名系统)

    bzoj1901&zoj2112&cogs257 Dynamic Rankings(动态排名系统) cogs zoj bzoj-权限 题解 bzoj和zoj都是骗访问量的233,我没有 ...

随机推荐

  1. parse

    import Parse from 'parse'; import { AsyncStorage } from 'react-native'; // 创建新的子类 var GameScore = Pa ...

  2. go语言time包的使用

    时间类型 time.Time类型表示时间. //时间类型 func timeDemo() { now := time.Now() fmt.Println(now) //2019-04-20 13:52 ...

  3. ubuntu 17.10 安装mvn

    首先,我用的系统是Ubuntu17.10,编辑器用的 vim ,Maven以 3.5.0为例 第一步,去官网下载maven. 官网下载页面.png 第二步,解压到/opt/maven目录(我安装在这个 ...

  4. iOS进阶之如何进行 HTTP Mock(转载)

    这篇文章会对 OHHTTPStubs 源代码的分析,其实现原理是建立在 NSURLProtocol 的基础上的,对这部分内容不了解的读者,可以阅读这篇文章 iOS 开发中使用 NSURLProtoco ...

  5. pywinauto简单操作写字板的例子

    前段时间写了做web程序界面自动化的简单例子,今天写一下windows gui程序界面自动化测例子吧. ps.咱中国人YinKaisheng封装的UIAutomation库也很好用,https://g ...

  6. iOS __block 关键字的底层实现原理 -- 堆栈地址的变更

    默认情况下,在block中访问的外部变量是复制过去的.但是可以加上 __block  来让其写操作生效. 原理: Block 不允许修改外部变量的值,这里所说的外部变量的值,指的是栈中指针的内存地址. ...

  7. 通过反射将request中的参数封装到对象中

    import java.beans.PropertyDescriptor; import java.lang.reflect.Method; import java.text.SimpleDateFo ...

  8. pyhon-request之repsonse的常用方法reponse.text和reponse.content的区别

    1. requests在python2 和 python3中通用,方法完全一样 2. request简单易用 requests的作用 作用:发送网络请求,返回响应数据 用法 response = re ...

  9. C#操作Control异步工具类

    /// <summary> /// 异步工具类 /// </summary> public class TaskTools { /// <summary> /// ...

  10. mysql查询表是否存在

    查询表是否存在 SHOW TABLES LIKE "表名" tp5查询表是否存在 Db::query('SHOW TABLES LIKE "表名"');