全球地铁路线可视化,长什么样?

栏目:网络教育  时间:2023-11-06
手机版

  原创 可视分析 可视分析

  本作品为2023年第十四期北京大学可视化发展前沿研究生暑期学校系列作品之01 - 全球地铁可视化。

  引言

  也许你经常乘坐城市地下飞驰的地铁,然而或许你并没有意识到,地铁线路图正是我们日常生活中最常见的可视化之一。

  曾经的地铁线路图非常复杂,难以读懂。1933年伦敦地铁图的设计者Harry Beck开始采用八度线性(octolinearity)来抽象每条线路。这个方式删繁就简,大胆地删去地图上人们不太关注的冗余信息,只保留最受关注的线路与站点,这样经典的制图方法一直到今天,哪怕在最繁华的大都市依然运行良好。

  今天的北京地铁图依然沿袭了1933年风格的伦敦地铁图

  在前期调研中,可以发现最有趣的是各个城市在地铁线路拓扑结构上的差异。一条条地铁宛如城市跳动的脉搏,不同的城市根据其自身的空间特点,采用不同的线路设计,将客流输送到城市各个角落。地铁线路也记录着城市的发展与变迁,城市内的时空距离被一条条线路迅速拉近,随着时间的推移,地铁线路不断增加,一些从前没有地铁的城市也开始兴建地铁系统。

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

  数据收集与整理

  总体而言,全球地铁是一个层次结构的数据,从国家地铁到城市地铁再到具体的每条地铁线路。这些数据还包含一些时间和空间属性。通过一些附加信息,可以进一步计算城市地铁的覆盖率等指标。

  全球地铁数据

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

  具体的数据处理步骤如下:

  修改时间格式、删除注释。这一步中,定义了一个名为 clean_json 的函数,它接受一个参数 json_data,并对其进行清洗。首先,遍历 json_data 中的每个城市和每条线路,然后将时间格式转换为 yyyy-mm-dd 的形式,并删除注释。最后,返回清洗后的数据。

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

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

  方案迭代

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

  方案一:动态列车

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

  方案二:城市方格

  “城市方格”设计迭代

  图形规则:

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

  图形设计规则

  布局规则:

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

  系统设计第一版

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

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

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

  系统设计第二版:反白与格式塔

  色彩规则:

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

  系统设计第二版:反白与格式塔

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

  系统设计第三版:真实线路颜色

  交互设计:

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

  系统设计第四版-详情页

  系统实现与案例分析

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

  2010年与2023年线路对比

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

  各城市面貌

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

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

  仅有香港和北京两座城市拥有地铁

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

  2002年的上海地铁

  2010年的上海地铁

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

  2008年的北京地铁

  结语

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

  1933年伦敦地铁图与今天的北京地铁

  小组成员:陈昕悦 北京大学、张逸轩 中央美术学院、杨雨彤 上海交通大学、陈静 南京艺术学院

  指导老师:袁晓如 北京大学、陈慰平 中央美术学院、徐瑞鸽 雪城大学

  暑期学校优秀课程设计将陆续收录在可视化看中国网页:

  https://vis.pku.edu.cn/vis4china

  暑期学校网页:

  https://chinavis.org/s23

  撰稿:第十组

  排版:陈昕悦

  原标题:《北大可视化暑期学校设计作品 1 – 全球地铁可视化》

  阅读原文

上一篇:公司信息更新报告:盈利能力提升超预期,温控龙头有望加速成长
下一篇:中南财经政法大学中韩新媒体学院:特色化中外合作办学 服务数字影像文化发展

最近更新网络教育