可视化作品分享1——全球地铁可视化

引入

来源:2023年第十四期北京大学可视化发展前沿研究生暑期学校系列作品

也许你经常乘坐城市地下飞驰的地铁,然而或许你并没有意识到,地铁线路图正是我们日常生活中最常见的可视化之一。曾经的地铁线路图非常复杂,难以读懂。1933年伦敦地铁图的设计者Harry Beck开始采用八度线性来抽象每条线路。这个方式删繁就简,大胆地删去地图上人们不太关注的冗余信息,只保留最受关注的线路与站点,这样经典的制图方法一直到今天,哪怕在最繁华的大都市依然运行良好。

本项目的设计目标是用具有视觉冲击力的简洁艺术性表达方式,概括各个城市地铁线路拓扑结构的特点,并呈现随时间变化,不同城市地铁线路的发展与变迁。

数据

本项目对维基百科中全球地铁的数据列表进行爬取,获得了66个国家/地区的206个城市的地铁数据,其中包括地铁的位置信息及每条线路的具体信息,给出了各城市现有地铁的情况。经过数据清洗,每条线路数据都包括8个字段:线路名称、首发时间、延长线时间、起点站、终点站、车站数、长度、车型编组。每个城市数据都包括了城市面积、人均GDP、城中心经纬度。

一些小细节:

调用API获取首发站和终点站的经纬度。这一步中,定义了一个名为 get_location 的函数,它接受两个参数:地址和密钥。该函数使用高德地图API来获取地址的经纬度,并返回经度和纬度。

计算每条线路的覆盖率=线路长度*1/城市面积。这一步中,首先读取表格数据并转换为字典,然后读取JSON数据。接着,遍历每个城市和每条线路,计算线路长度除以城市面积得到覆盖率,并将其存储在字典中。最后,找到所有覆盖率中的最大值和最小值,并对所有覆盖率进行归一化处理。最后,将结果写回JSON文件

方案迭代

这个部分很有意思,启发比较大

最初,同学们想到的是用动态柱状图来表示地铁国家不断涌现的现象。每一条柱体(地铁列车)代表一个国家,柱体的长度代表出现的时间;网页前进速度为地铁速度,随页面向左移动,地铁城市和站点逐一出现,用地铁列车出不断前进的视觉隐喻来体现全球地铁的发展。列车每个车厢代表城市,当有新的城市出现,车厢增加,车厢里的气泡代表不断增加新的地铁线路,气泡大小代表线路里程。

在和指导老师的讨论中,小组同学意识到最开始的思路在希望表达过于复杂全面的信息。这样的方案反而难以实现有效和新颖的表达。例如在上面的例子中,如果该城市所代表的车厢已经移动出画面,类似伦敦这种很早就有地铁的城市,那后来增加的线路气泡就无法显示在画面中。最后设计的方案中,采用更为简洁的设计,把每个城市抽象成小正方形排布在页面上,每个城市只用简单的线条或者形状示意性地展示地铁建设情况:

“城市方格”设计迭代

图形规则:

在具体设计中全球地铁项目采用以下图形编码规则。首先,一个城市用一个方格表示,线路主要有三种抽象形式,分别是普通线路、环形线路、三折线路。我们使用首末站两点确定一条线,用这两点和城市中心的相对位置确定线在方格中的位置。为了美观将每一条线延长到方格尽头。为了更真实有效地展示地铁线路覆盖到城市的范围,每条线的宽度表示覆盖率。即该条线路的长度除以所在城市的面积,并对所有线路进行了归一化。

布局规则:

当把城市方格拿出来平铺在页面上:一个国家编码为一个九宫格,城市为其中一格,线路为方格内的线条;每当新线路出现,相应城市方格内加一根线,东西走向为横线、南北走向为竖线;线的粗细标识地铁覆盖率;特殊线路标识为彩色,加入点击效果可查看具体信息。解决了线路出现时间与时间不对应、无法看到线路增加的问题。

但是把国家编码为九宫格的方案也存在局限,一方面,这会使得线路难以看清,另一方面,有得国家有超过九个城市拥有地铁。在此基础上,我们决定舍弃国家九宫格的方案,但保留城市方格,方格中的线条定位成真实的地铁线路位置。根据“视觉冲击”、“城市线路发展”两个需求,确立两个目标:

1.得出全球城市抽象线路的静态展示

2.在系统可对中国城市地铁发展进行动态展示

色彩规则:

后续我们又对地铁线路的颜色、位置排列、计算方式、交互做了一系列调整。

在最终的设计中,全球地铁收录了全球206个已经修建地铁的城市,它们之间的相对位置是根据真实经纬度排列的,从左到右依次是美洲、欧洲、亚洲。每个城市的地铁线路都有自己的颜色,所以我们最色彩设计规则选用了每条线路各自的真实颜色。整个页面上方有一条时间轴标注当前的时间。

交互设计:

如果想看其中一个城市的发展该怎么办?我们进一步设计了单个城市的信息详情,点击某条线路,该线路会被高亮出来,线路上会显示该线路的名称等具体信息。

系统实现与案例分析

如果将时间轴移动到2010年。我们会发现亚洲地区有大量空白,这直观地展示了中国及印度等国家在那个时候尚未修建地铁。将时间轴滑动到2023年,观察者将会目睹中国城市地铁的极速发展。这个对比清晰地展示了全球城市地铁线路在时间上的发展变化。在图表中,用户不仅可以通过线条的疏密与粗细看出城市规划的空间形态,还能透过不同时间点的对比,观察全球城市地铁线路的演变。

更有趣的是,可以发现通过这些抽象线路的组合形态以及基于本身线路图的配色,能够展现城市的特点。例如,北京的地铁线路更多地采用横纵垂直布局,而马尼拉的配色则体现了东南亚的风格。莫斯科的地铁网络则呈现出经典的环状和放射状布局。这个可视化图表不仅提供了地铁线路的信息,也可以通过对比分析的方式深入了解全球城市的规划和发展。

为了更好的体现全球地铁线路的发展历史,可以用信息交互的手法来体现数据的演变。在这里有一个时间轴,用户可以通过滑动滑块观察到从第一条线路出现至今地铁线路的发展趋势、速度、位置等信息。以中国为例:

1978年改革开放时中国仅有香港和北京两座城市拥有地铁。

到了2002年,上海获得了2010年世博会的主办权。上海当时仅有不到100公里长的地铁,完全无法应付世博会将会带来的巨大客流。上海提出“要举全市之力,加快地铁建设”,全市上下“紧急动员”,大干快上了一批地铁项目。在最高峰时,上海同时有116个地铁车站在建设,近百台盾构机全面推进,可以说是代表了中国新时代地铁建设的最高潮。2010年世博会开幕时,上海市完成了一个几乎不可能完成的目标:全市地铁里程达到428公里,共11条线路和280座车站,完美地为世博会保驾护航。

2008年7月19日,北京地铁8号线首通段(奥运支线)、10号线一期、首都机场线这三条线路在同一天开通,服务于将于不久后盛大召开的2008年北京奥运会及残奥会。地铁8号线在后来的2022年冬奥会上也发挥了新的作用。

结语:

1933年,Harry Beck将伦敦地铁图,由复杂的地图抽象成具体的线路,在极小的空间里为乘客提供了最大的便利。在纷繁复杂的信息流中,人们不断寻求新的可视化方法,将最准确、最重要的信息在最合适的场景传达出来。本项目也是一次这样的尝试,通过将城市抽象为地铁线路的集合,以期探索城市地铁的拓扑结构,以及背后的城市发展与变化。

评价

这个作品我真的很喜欢,它的整个设计流程也写的很好,写清楚了从最开始的想法是怎么一步步演变到最后的结果,突出那种视觉冲击力、简洁艺术性,对于这种可视化设计,不要有那种这个想要把所有的信息都呈现出来的想法,要明确自己的点,然后进行设计,没有给人罗列信息的感觉,而且第一眼看上去艺术性就很好,细看设计得也很好,案例分析也让人感触。

需要能够一句话说明白在可视化什么内容,目的在于探索什么。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
完整版:https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值