解析《自然》150 周年纪念刊封面网络可视化
湃客：服老思 2020-01-17 19:20

服老思和同学们 P话

大家还记得上图的可视化作品吗？在 pwords 2019 年 12 月 5 日的数据周报美国高中生的发型“进化”史 中我们曾提到过这个来自《自然》杂志 150 周年纪念刊的作品。之后，有读者对作品背后的制作原理提出疑问，于是，这次的数据周报，我们从制作团队背景、网页代码分析、数据源和背后的图嵌入算法 对作品进行了更深入的解读，下面你将看到一个全方位的技术分析，为了弄懂作品背后 图嵌入算法 的具体实现原理，我们还特地向制作团队发送邮件进一步了解。你想知道它背后的故事吗？来看看吧！

信息

网状图主页

图中每一个点代表一篇曾刊发于自然杂志的论文，其中不同颜色代表不同的学术领域。点击其中的一点，即可查看这篇论文相关信息，以及与其有共引用关系（co-citation）的其他论文。

官方网站：http://go.nature.com/n150int

Nature 的数据故事：https://www.nature.com/articles/d41586-019-03308-7

相关信息：https://www.nature.com/magazine-assets/d41586-019-03308-7/17347036

Youtube 链接：https://www.youtube.com/watch?v=GW4s58u8PZo

制作团队

作品由多位研究者合作完成，其中，图中的网状可视化主要由来自 IBM Research 的 Mauro Martino 主导完成。Mauro 是一位意大利的设计师，他致力于研究人工智能在设计领域的应用。同时，他还是 IBM Research “Visual Artificial Intelligence Lab” 的创始人和领导者。在此之前，他是剑桥麻省理工学院（SEN）SENS Eable City Lab的研究分支机构的研究员，致力于该实验室多个项目及其相关研究项目 Urban Interaction Design 中的数据可视化。

Mauro Martino

技术总结

数据来源：《自然》杂志创刊 150 年，所有刊发的文章。结构化的数据来自 Clarivate Analytics’ Web of Science (WoS)，为美国路透社公司建立的引用文献索引资料库系统。设计团队根据 WoS 上 1900 - 2017 年论文的引用信息，挑选出了接近 7 亿条引用关系。

数据是公开资料，可以下载从网页背后进行下载，共有cociteNodes.csv和cociteEdges.csv两个原始数据文件。cociteNodes.csv：节点数据表。每一篇论文存为一个节点。cociteEdges.csv：边数据表。如果两份论文同时出现在一篇论文的参考书目中，即它们被共同引用，那么两篇论文间就会出现一条连线。

节点的大小和其在网络中的度数（degree）成正比。

网页可视化是用 THREE.js 做的，THREE.js 是一个基于 WebGL 的 Javascript 开源框架，简言之，就是能够实现 3D 效果的 JS 库。利用 THREE.js 可以制作出很多酷炫的3D动画，并且 THREE.js 还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。THREE.js 本质上是一项利用 JavaScript API 渲染交互式 3D 电脑图形和 2D 图形的技术,其基本三要素是 场景 , 相机 和 渲染器。

THREE.js 的主要代码储存在网页的 impact-vr.js 文件中。感兴趣的同学可以点开下方链接查看具体的实现方式。

其中，这个网状可视化作品的挑战在于怎样实现网络嵌入（Network Embedding），即给每个网络节点分配一个笛卡尔座标系中的座标。这类嵌入的计算是离线完成的。cociteNodes.csv文件中已经包含了每一个节点的嵌入坐标。cociteEdges.csv进一步将不同点间的路径（连接两个节点的弧的参数）进行编码转换。（PS：在这张 3D 图上的“弧”实际上是由若干小的直线段组合而成的）

impact-vr.js：https://www.nature.com/immersive/d41586-019-03165-4/js/impact-vr.js?v=2

THREE.js

首先我们可以了解一点 THREE.js 的基本概念，作品的核心代码在 Impact-vr.js中。这是一个可重用的脚本，可以当作范本研究和学习。只要提供可用于生成 3D 图中节点和边的数据，就可以轻松实现这样的可视化。下面我们将简单介绍THREE.js的实现过程和主要功能。

可视化

THREE.BufferGeometry 是 THREE 的一个常用数据结构，用于高效地存取节点和边所对应的几何形状。

cociteNodes.csv 文件各列的数据在地图中分别确定位置，颜色和大小。最终构造出 THREE.Points。

cociteEdges.csv文件各列的数据在地图中分别确定位置和颜色。最终构建出THREE.LineSegments。

用户交互

作品以window.addEventListener（浏览器默认的内建事件处理函数）为基础实现交互功能。可以通过在前段代码中搜索这个关键词，查看其对应的功能。

点击屏幕定位到文章的功能是这样实现的：THREE.Raycaster 对象和它的intersectObjects方法被用于计算点击的位置。输入的是鼠标点击的位置，即屏幕上 2D 的座标（存储于 mouse 中）；输出是在 3D 空间中，和点击位置交叉对象。关键代码如下：

缩放和旋转：作品将所有的节点和边所对应的视觉元素，包含进一个视觉组内（Visual Group），对这个组进行缩放和旋转，可以实现对所有元素的同步缩放和旋转。缩放和 3D 旋转的信号是由THREE.DeviceOrientationControls获得。THREE.js可以调动浏览器去监听设备方向的变动，并对视觉组进行变换。

animate()包含了主要的计算逻辑架构。它识别设备的方向调整之后，将该调整的反变换作用于视觉组。即，并不是根据设备视角移动相机，这个功能以相反方向移动视觉组，达到貌似相机移动的效果。animate()使用的requestAnimationFrame()是浏览器自带的功能，通过这功能，开发者可以在每次浏览器渲染之前做计算，生成最新一帧的关键信息。animate 和 requestAnimationFrame 的相互调用，形成一个无限的循环，这是制作基于 Web 浏览器动画的标准套路。

图嵌入

这是整个作品最复杂的部分。需要进行很严谨精确的计算，确保：

各个点之间的网络关系被维护 --- 相关性高的节点被放置在比较近的位置；同样，相关性不强的节点被放置在相距很远的位置上。

每个节点放置在合适的位置，而又不显得杂乱。

另外，还需要考虑视觉美感。

有关图嵌入，没有公开的资料介绍。为了得到了更多的相关信息，我们向作者团队发送邮件想了解此作品图嵌入背后的原理。根据 Mauro 的介绍，作品在经典 Force 直接布局的基础上使用了“弹性链接（Elastic Link）算法”，感兴趣的读者可以参考 Nima Dehmamy，Soodabeh Milanlouei 和 Albert-LászlóBarabási 的 2018 年发表在《自然》杂志上的论文 “A structural transition in physical networks”。

论文链接：https://www.nature.com/articles/s41586-018-0726-6?proof=trueIn

一个图嵌入的例子：��个人微信群组关系网络图 (ego-network)

Nature 的数据故事

文章“Nature’s reach: narrow work has broad impact”由 Alexander J. Gates, Qing Ke, Onur Varol 和 Albert-László Barabási 共同完成。作者以《自然》杂志 7 亿条论文引用关系的数据为基础进行分析，希望发现 Nature 背后的数据故事，最终他们得出的主要结论是 —— 学科交叉的现象在科学研究中越来越明显。

不同领域的文章，跨学科引用的情况不同。作者分析发现，生物医学很大部分的引用文章来自同领域的文章，但引用生物医学文章的论文中约有一半将分布在其他类别中。另一方面，工程技术的论文是最热门的“被引用”文章。虽然“工程和技术”论文在《自然》杂志中只占论文总数的很小部分，这类文章确常被引用。这可能是因为工程和技术在自然科学领域属于较基础的学科。相比“工程和技术”的论文 ，“地球和空间科学”领域的论文就属于另一个极端，这一领域的文章有 72% 都是被自己领域的其他论文引用，这大概是因为地球和空间科学领域属于比较专业的小分类，所以一般其他领域不会涉及。下图即为有关学科引用关系流向的桑基图。

另外，作者团队分析发现，《自然》杂志文章的引用条数和引文中学科的多样性正在增加，科学工作也越来越跨越固有的学科边界，学科之间的界限也越来越不明显。

从下面这张图可以看到，将《自然》杂志上的论文和《科学》、《物理评论》（Phys. Rev.）上的论文做比较，对比不同杂志收录论文的引用多样性。相比之下，通俗科学期刊文章引文的学科多样性一直高于其他地方发表的文章，这表明这些期刊的内容在科学界比从其获得的范围更广。这些期刊往往旨在扩大读者群并发表重大进展。但有时，激发论文的领域与产生影响的领域明显不同。例如，系统生物学家 Leroy Hood 和 David Galas 于 2003 年在自然杂志上发表的“ DNA数字编码”一书，其大部分灵感来自分子生物学，但最后却在计算机科学，临床医学和社会科学领域得到更多的引用。

文章链接：https://www.nature.com/articles/d41586-019-03308-7

CREDIT

—

编辑：@ 服老思

排版：@ 包小包

就是这个人还没点在看

原标题：《答读者｜解析《自然》150 周年纪念刊封面网络可视化》