案例：《为什么帝国大厦和纽约永远不会一成不变》Why the Empire State Building, and New York, May Never Be the Same

[Sephana]

作品推荐：《为什么帝国大厦和纽约永远不会一成不变》Why the Empire State Building, and New York, May Never Be the Same

https://www.nytimes.com/interactive/2021/09/15/nyregion/empire-state-building-reopening-new-york.html
第二小组：刘蕾岑、伍甜甜、王蓼汀、田佳宁

一、作品简介

· 媒体来源：The New York Times
· 创作团队：Keith Collins, Nikolas Diamant, Peter Eavis, Or Fleisher, Matthew Haag, Barbara Harvey, Lingdong Huang, Karthik Patanjali, Miles Peyton and Rumsey Taylor
· 发布日期：Sept. 15, 2021
· 主要可视化技术：3D建模（由Community District提供的NYC 3D模型及视觉参考）、JavaScript、CSS
· 数据来源：Community District; United States Securities and Exchange Commission; CoStar等

a. 选题背景：

近90年来，帝国大厦一直是美国经济实力的象征。但最近，它成为了与冠状病毒斗争的象征。
帝国大厦就像它所在的城市纽约一样，依赖源源不断的游客、繁荣的零售企业和愿意租赁其大量办公空间的公司来获取经济效益。但新冠病毒的大流行使得这座建筑和城市的景点、商店和办公室空空如也，长达数月之久。在纽约市逐步重新开放之后，来自《纽约时报》的记者和数据分析师团队试图分析帝国大厦日益减少的入住率，他们调查并追踪了帝国大厦的办公室租户，就他们重返办公室的计划进行了采访。

b. 作品内容：

· 信源：数十名租户和公开的数据记录、社会研究
· 方法：通过采访和对公共记录进行分析
· 内容架构：

导语： 阐释帝国大厦在纽约城的地位。过去它作为旅游地标性景点吸纳源源不断的游客，作为办公大楼为数量巨大的零售业和公司租赁办公场所，但如今，新冠疫情使得这座曾经繁忙的大楼空空如也，长达数月，当复工复产的承诺屡次被搁置，大楼使用者的情况勾勒出了对未来办公的一种预测。
正文： 从大楼里的“观景台、办公室、零售商店”三个角度说明疫情带来的影响和未来的发展趋势。
（1）观景台游客数量的减少凸显了纽约市旅游业的崩溃。

（2）帝国大厦的大部分空间都是办公空间，由于大企业和小企业的混合体，这座楼
能反映纽约的办公空间状况和城市经济状况。

10.5.mp4

通过占大楼办公空间的近一半（48名）租户搬回办公室的计划，大部分人将留在这座大楼里，但往后他们将接受混合工作模式，员工可以选择部分时间远程办公。根据最近的一项调查，在曼哈顿，70%的雇主计划采用混合模式；在疫情期间租约到期的租户很少表示决定续签租约，大楼的管理层为了能让他们留下甚至提供了一些激励；许多打算在这栋大楼里居住的租户的租约还剩几年，不管他们是否完全占据办公室，他们通常都必须全额支付租金。通常，抵消闲置空间成本的唯一方法是将其转租给另一家公司。因此即使写字楼空置，纽约的写字楼业主们能够收取租金，避免出现严重的财务危机。
（3） 零售商店的客流量减少，营业额降低，租金也达到了十年来的最低水平，大多商店已经从线下卖货转变为只支持配送订单。

10.5.1.mp4

结尾：引用丹尼尔·阿尔珀特的话，配以帝国大厦在曼哈顿投下的巨大阴影的照片：“帝国大厦是一座老旧的摩天大楼，租户中有许多中小型企业，与最近在曼哈顿拔地而起的新办公楼相比，它更容易受到当前动荡的影响。但是，就像金字塔一样，它将永远存在于那里。”用一种隐喻的方式表达出虽然现在纽约城遭受疫情的巨大冲击，但它也像帝国大厦一样在洪流中不断调适和适应，找到自己的生存方式。

二、 作品分析

a. 数据源

本篇的数据来源广泛，既来源于现有文献，也得益于自主调查，可以看出记者多方求证的努力。
其中，平方英尺的数字是近似值，基于租户的估计、向美国证券交易委员会提交的公开文件、空置清单、帝国大厦的宣传材料和 CoStar 的房地产数据。
模拟游客流量的数据来自Kiran Consulting Group，其中包括整个观景台的游客，但只显示了出现在 86 层观景台上的游客。
企业租户在办公模式上的选择及去留帝国大厦的抉择等数据，来自企业的公开分享及记者的自主调查。

b. 视觉设计分析：

（1）色调：本文选取优雅、静谧的灰蓝色为主色。
这与本文主角——帝国大厦作为纽约城近百年传统地标性建筑的老派复古气质相得益彰。灰蓝色还是用于象征工薪阶级（租户）、劳动人民（零售业）的常用颜色，符合本选题三大探讨方向办公室、零售商店、观景台）给人的感性印象（沉静、朴素、踏实）。配色上选取和灰蓝色对比度高的橙色与绿色，色彩搭配协调，重点处醒目、惹眼。
（2）可视化呈现形式：二维可视化和三维可视化相结合，形式新颖。
报道第一帧是一张标志性的纽约城市景观的照片

接着，这张照片被无缝地编织到作品的图形设计方案中。

并随即被动画化成3D交互式模型。

10.4.mp4

且随着读者的滚动，最初围绕着珍贵的摩天大楼的建筑物逐渐消失，并被轮廓所取代，以提供清晰的焦点。同时，帝国大厦从其纹理外罩转变为灰色3D模型。

还通过展示楼层横切面，突破纯3D建模外形展示带来的干瘪感，带领读者以上帝的全知视角透视楼层内部状态，随鼠标滑动带来的文字上的时间推移，视觉上41层员工人数也动态减少。

本篇作品既运用交互式滚动、3D建模方法，又将抽象的调研数据和一个个实的小故事相结合，逻辑上既有宏观又有微观；图片上既有设计类图表，又有纪实图片，很好地融合了技术、数据与故事：鼠标滑动，每展示一个租户的故事，页面就会相应地对帝国大厦的模型进行流畅的挪动，定位并高亮该租户所处的楼层，如同读者用自己的手在操纵模型，妙趣横生；图文结合，将复杂的出租楼层关系用图像展示得一目了然，给予读者以直观、真实的感受，让人印象深刻。

c. 技术实现：

(1) 3D建模是本篇在视觉呈现上的重要技术支持。
在插入canvas元素的前提下，NYT突破传统3D动画的窠臼，采用交互式3D技术，进行实时渲染，使帝国大厦3D模型可以随读者阅读进度放大、缩小、调整角度，提升了读者阅读时的互动式、沉浸式体验。

其3D模型的素材来源有 Community District的NYC 3-D 模型、现实视觉参考及其他信源提供的数据。其中，NYC 3D 模型是一个公开可用的、标准化的可靠模型，包含 2014 年纽约市的每座建筑，该模型基于 DOITT 2014 年的航空调查，能够有效还原屋顶结构细节及某些标志性建筑的高级细节。后经城市规划部门调整，整个模型转换为与 Rhinoceros 3D建模软件兼容的.3dm 格式，DOITT文件也得到了增强。
(2)CSS (层叠样式表)

CSS是什么
CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

（1）浏览器载入 HTML 文件（比如从网络上获取）。
（2）将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。
（3）接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。
（4）浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
（5）上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
（6）网页展示在屏幕上（这一步被称为着色）。

                                      （示意图）

（3）响应式图片srcset属性

在img标签中，使用srcset属性使响应图像的尺寸调整变得更加简单。它使您可以定义同一图像的不同大小版本的列表，并提供有关每个图像大小的信息。然后由客户端（浏览器）决定加载合适尺寸的图片。
这对开发者来说可能很明显，我们希望在不同的设备上显示不同的图片，以确保用户在浏览网站时不会因为网速太慢从而对的移动端用户产生太大的影响。我们真正想做的是为每个用户都提供最大的可用图片：在高分辨率下，则为他们提供高分辨率的图像，对于手机用户或者低分辨率用户，我们则为他们提供较小的图像。Srcset就实现了提供多图像源的技术。
首先，需要为同一图像创建几个不同大小的版本。通常都希望为每个图像创建至少四个版本：“正常”尺寸的一个，然后再以两倍大小（2x），三倍（3x）和四倍（4x）来创建。这对浏览器没有任何影响，但会让编码更加易懂，并且srcset属性中指定的源文件数量没有限制。
srcset属性中包括了图像地址信息和设备像素比（可以通过window.devicePixelRatio查看，且可以通过CTRL+MOUSE齿轮缩放网页来调整devicePixelRatio的大小）。
（4）JavaScript
这篇报道最出彩的可视化技术，就是3D/2D交互、页面滚动显示文字交互性，由静变动，这背后离不开JavaScript的运用。

JavaScript是什么
JavaScript 是世界上最流行的脚本语言，它属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话，被设计为向 HTML 页面增加交互性。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。

本文关于JS的运用主要有：
本文调用nyt自己编写的程式，所有的交互、页面数据加载方式都是来源于这些后缀为nyt.com的脚本，是nyt内部模板的运用，包括nyt自带的Scroll组件：实现页面滚动、显示文字的交互式阅读。

p.s. JSON（JavaScript Object Notation，JavaScript 对象表示法）
JSON 是用于存储和传输数据的格式。JSON 是文本，文本可以在任何地方传输，并可通过任何编程语言读取。JavaScript 对象可以转换为 JSON，JSON 可以转换回 JavaScript 对象。这样，我们可以将数据作为 JavaScript 对象使用，而无需复杂的解析或转换。

p.s. 一些js运用的小技巧
1）Tag（标签）
标签模板是模板字符串使用的一种高级形式，用代码示意就是——
这是我们常见的模板字符串：
const author = 'zhangxinxu';console.log(write by ${author});

这个就是标签模板，是模板字符串使用的高级形式：
const author = 'zhangxinxu';function tag (arr, exp) {
return ${arr[0]}${exp};
}console.log(tagwrite by ${author});

两段内容返回的结果是一样的。
仔细看 tagwrite by ${author} 这段代码，其中 tag 就是标签模板中的“标签”，write by ${author} 就是标签模板中的“模板”。
因此，“标签”实际上并不是指的标签，而是类似于标签性质的函数，“模板”则是这个函数的参数。
2）Iterator（遍历器）
Javascript中表示“集合”的数据结构，主要是 Array、Object、Map、Set 这四种数据集合，除此之外，它们相互之间还可以组合使用，例如Array的成员是Map，Map的成员是Object等。因此Javascript的需要一种统一的接口机制，来处理所有不同的数据结构。
遍历器（Iterator）就是这样一种机制。它是一种接口，可以为各种不同的数据结构提供一种访问机制（访问接口），任何数据结构部署Iterator接口，就可以完成该数据解构成员的遍历操作（Iterator 接口主要供for...of使用）。详细可参照：https://blog.csdn.net/imagine_tion/article/details/113119415

（5）Script defer属性

defer:表示脚本可以延迟到文档页面完全被解析和显示后再执行，只适用于外部脚本，虽然不是异步，看起来效果确实是异步，但是其本意仅仅是延迟执行。当script标签有defer属性时，也是浏览器在遇到script标签时，会异步下载脚本，但下载完并不立即执行脚本。即：遇到脚本就下载，下载的同时可以继续解析HTML；但要等到文档解析完成才会执行脚本，这样的话就能使页面的渲染不被阻塞。

（6）网页Chartbeat.com

Chartbeat.com是什么
根据官网介绍，Chartbeat是为出版商提供的内容智能平台，使媒体公司能够通过桌面、社交和移动平台的实时和历史编辑进行数据分析。Chartbeat与60多个国家的60,000多个媒体品牌合作，提供有兼顾古今的数据库（real-time and hitorical dashboards）、深入的标题测试（in-depth headline testing）、页面内优化工具（in-page optimization tools）、强大的报告（robust reporting）等资源依托。

（7）Google tag manager

Google tag manager是什么
Google Tag Manager类似网站和我们要添加代码的工具（如Google Ads, Facebook Ads，Google Analytics等）之间的中介。它帮助我们把这些工具的跟踪代码添加到网站上，从而能够将网站的数据传递给这些工具

d. 选题意义：

（1）具有以小见大的社会意义。以数据驱动的新闻，总是很“整体化”，无论是区域内的疫情、堕胎、失业等问题，都很容易上升到全国乃至全世界。选题聚焦于帝国大厦，立足点小，但反映面广，讲述了疫情给曼哈顿零售业造成的负面影响，反映了纽约的城市经济状况和办公空间状况。这种以小见大的视野，将全球性的疫情这一宏观痛点落实到对一个城市乃至一个地点的具体影响，既新颖又深刻。
（2）具有值得反思的现实意义。在这个新闻背后有一种非常真实的担忧，即企业要重新考虑对办公空间的需求。虽然，混合模式意味着企业可以拥有更多员工，而无需相应的房地产管理费用，但无论是出于象征性还是合法性的目的，企业仍然需要一个可见的足迹，再加上Zoom带来的生产力下降，线上办公具有诸多不便，或许人们最终还是要回归办公室，印证了新闻最后一句话，“就像金字塔一样，帝国大厦将永远存在于那里。”

e. 不足与反思：

1. 角度新奇，观点陈旧。
   由小见大的视角虽然新奇，论述也由此更生动，但最终还是难逃“疫情对零售业、旅游业、房地产造成冲击”这一观点窠臼。
2. 数据可靠性不足。
   部分数据来自自主调查，存在数据不全的情况；又部分数据来自帝国大厦宣传材料及房地产公司的数据，数据可靠性有待进一步提升。
3. 论证不严谨。
   作者们似乎在引导读者，将零售店面租金下降、办公方式调整、外卖形式的增加，归因于疫情的影响。但实际上，这些趋势早在疫情前就存在，疫情只是加速了这些趋势。如果不能够将这种“加速度”体现出来，记录摩天大楼是否适应混合工作模式、外卖，反而让人怀疑作者的重心在于判断帝国大厦是否真正代表纽约市。
4. 页面互动有限。
   因数据不全或其他技术原因，除滚动外，读者体会到的交互性很有限，他们无法手动选择查看其他楼层的更多详细信息。