言

25年过去了，Brooks博士著名的“没有银弹”的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的“炸蛋”：发展迅速、势不可挡。随着HTML5技术的普及，用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显：网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易，等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手们都纷纷开始研究javascript了，而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来。

HTML5涵盖的技术点很多，甚至延伸到了前端、后端、通讯等各个层面。前端的canvas绘图这块无疑是它的核心内容。Canvas的API虽然不是很复杂很强大，但是做一般的2d绘图基本都够用了。基于这些API，一大堆的2d绘图组件纷纷出炉。Echarts、d3.js都是很不错的项目。 Echarts主要是chart组件，而d3相对杂一些，很多呈现方式很有创意，值得研究。

概述

研究d3的起因是最近有一个项目，用户截了一张效果图让我们用HTML5做一下：

看着很眼熟，搜了一下，感觉就是d3例子中的sunburst效果，程序在这里：

http://bl.ocks.org/mbostock/4063423

看上去似乎也不难，就是一圈一圈的饼图，把树状结构数据按占比一层一层绘制上去就行了。所以引起了自己动手做一个的兴趣。“sunburst”英文里应该是“云开日出”的意思，类似强烈的光芒从云层背后透射出来，不知为何中文里大多把它翻译成“日落”。比如这把Fender Telecaster吉他型号是Brown Sunburst款，就会被大家翻译成“日落色”。

关于日出和日落更喜欢哪一个的问题，网上还真有这样的调查。有意思的是，选择喜欢日落的远多于选择日出的。日出代表希望，日落代表成熟，都是一种美，哪个更美要看你个人的心境，因为它的美丽是由心生。为了不在这个问题上站错对，我们还是给他重新起一个更加响亮霸气的中文名字：“彩虹爆炸图”，怎么样?

仔细研究一下彩虹爆炸图的结构，无非就是一个树形结构，并采用发射状的布局。根节点在中间(也可以认为没有唯一的根，而是一堆根节点围绕在第一圈)，一次向外发散排列。每一个节点有名称、数值。节点可以按照自身数值在扇区所占比例进行绘制，这样就不用管节点具体数值有多大多小了。

这种图最先是由布朗大学教授John T. Stasko设计。

http://www.cc.gatech.edu/~john.stasko/

经过一天的折腾，终于做出了一个还算过得去的“彩虹爆炸图”。先上个图看看：

主要功能包括了：

可以通过json来定义数据和样式(类似百度的echarts那样);

颜色可以固定，也可以自动彩虹色;

自动计算数值及角度占比;

动态显示导航路径;

鼠标动态高亮显示路径;

动画飞入、展开导航路径;

文字显示及角度控制;

全矢量，可鼠标缩放、平移，不失真;

下面重点码一下折腾过程中的几个重点：

一、定义节点对象

首先定义每一个小扇片节点。每个扇片可以用一段饼图来绘制。为了简单方便，这里用了最简单高效偷懒的方法：用一个半径很粗的线画一段角度的arc，即可。如下图：

另外还有文字等内容。所以定义它的json结构大概如下：

var item = {name: '名称', color: 'red', angle: '45', …};

此外，下一圈的数据，可直接定义为这个节点的“孩子节点”，直接在item中定义一个data的子节点数据：

var item = {name: '名称', color: 'red', angle: '45', data:[

{name:’孩子一’, color:’green’,…},

{name:’孩子二’, color:’yellow’,…},

]};

这样就可以组成一个树状结构。接下来要在canvas上绘制图形了。为了方便，这里直接使用了矢量图进行定义：

twaver.Util.registerImage('node', {

v: [{

shape: 'circle',

r: ...

lineColor: function(data,view){return data.getClient("lineColor");},

lineWidth: ...

startAngle: ...

endAngle: ...

},{

shape: 'text',

textBaseline: 'middle',

textAlign: ...

text: ...

x: ...

y: ...

font: ...

fill: ...

rotate: ...

visible: ...

shadow: ...

}],

});

矢量图中定义了2个图形元素：一个arc弧线、一个文字对象，分别用于画node和绘制其文字。颜色、字体、是否可见、阴影、对齐、位置、线宽、角度…等等均在上面的定义中用一个function动态获取。例如，这个节点的半径，通过下面的方法，就可以在图形的lineColor属性中保存并驱动，需要修改，直接修改lineColor这个client属性即可，而不用去修改绘图参数，非常方便：

r:function(data,view){return data.getClient("lineColor");}

这里有一个比较啰嗦的地方是：每个扇片的角度需要根据每个item定义的原始值进行计算角度占比。而且，对于太小的扇片，可以给一定的最小值(例如 1度)，保证能视觉上看到它。否则，显示10000和1两个数值，由于对比过大，可能就杯具了，因为1连1度都占不到，显示效果会非常差。还有，每个扇片之间应该尽量留有一定的空隙。如果连续绘制，就会连成一片，没有“分片”感。这些可以在代码中进行简单控制。

二、文字控制

文字控制也比较啰嗦。首先是对齐方式。最简单的方式当然是让文字在所在扇片处，直接居中、旋转。这样文字会在径向的中间位置，如下图：

但这样显示感觉并不是很完美。对于中文来说，如果能统一靠近圆心方向的位置对齐，会更好看一些。这样，即使文字过长，也会向外延伸，不会和里面的重叠。如下图：

还有，当文字在左半圆时，如果不做特殊处理，文字旋转会导致文字大头朝下，阅读起来有把脖子歪断的风险。所以应该动态判断，如果文字在左侧，应该文字再增加旋转180度。同时左侧的文字对齐也要特殊考虑，应该变成右对齐，才能保持径向的整齐一致。

文字还有一个细节就是颜色和阴影的问题。不使用阴影，单纯的使用颜色(例如白色)，则在一些方向上的节点的文字会看不清楚，因为我们做的是彩虹爆炸图，各个方向颜色都不一样，而且还会随着圈数增加而变淡颜色，所以几乎不可能用一个固定的颜色(例如白色或黑色)能保证文字在所有地方都能和node颜色搭配并看清楚。所以思来想去还是使用了阴影效果。

联想了一下我们看美剧时候的字幕，似乎也是同样的问题。视频字幕要显示在千变万化的视频场景里面，视频场景的颜色完全随机出现无从知晓，要想让字幕看清楚，必然也会想一些办法解决。我们仔细观察一下视频字幕：

仔细观察，字幕是白色文字加了一圈黑色外框，这样就不怕任何场景了。我们在文字定义时也模拟一下，设置阴影和阴影偏移试一试：

fill:'white',

shadow: {

offsetX: 2,

offsetY: 2,

blur: 4,

color: 'black',

},

看一下使用前和使用后的效果对比：

使用阴影后不但文字更清晰了，而且也增加了立体感，效果还是不错的。下面图显示在应用在节点上的效果：

可见不论什么颜色，都能比较好的勾勒出文字轮廓，保持清晰可读。

三、生成彩虹颜色

关于颜色，是一个有趣的话题。对于广大程序猿来说，颜色是一个既简单又困难的东西。我们随手就能写下’red’, ‘green’, ‘orange’, ‘yellow’这样的色彩斑斓的颜色，还能保证没有语法错误;我们还会写’#FF55AA’、’#0c0’、’RGB(0,204,0)’、’ RGB(0%，80%，0%)’这样的各种颜色写法;我们也明白RGBA的含义和用途。但是，我们很少能把一个demo写的颜色很好看、很搭配。关于颜色和配色以后再专门讨论。这里我们只想自动生成一圈彩虹一样的颜色。用我们熟悉的RGB方法好像比较困难了。于是想起了那个HSV的颜色定义方法，它貌似很适合解决这个问题。

HSV颜色模型定义了色调H、饱和度S和亮度V，由A. R. Smith在1978年创建的一种颜色空间。其中H用一圈360度表示所有颜色，从红色开始按逆时针方向计算，红色为0度。饱和度S从0到1，越大越饱和。亮度V从0到255(也可以转换为从0到1，方便使用)，越大越明亮，越小越暗淡。

Js里面并没有直接处理HSV颜色的函数。不过用下面的代码很方便可以从hsv转为rgb：

写一个对应的js函数也很简单：

/* h, s, v (0 ~ 1) */

function getHSVColor(h, s, v) {

var r, g, b, i, f, p, q, t;

if (h && s === undefined && v === undefined) {

s = h.s, v = h.v, h = h.h;

}

i = Math.floor(h * 6);

f = h * 6 - i;

p = v * (1 - s);

q = v * (1 - f * s);

t = v * (1 - (1 - f) * s);

switch (i % 6) {

case 0: r = v, g = t, b = p; break;

case 1: r = q, g = v, b = p; break;

case 2: r = p, g = v, b = t; break;

case 3: r = p, g = q, b = v; break;

case 4: r = t, g = p, b = v; break;

case 5: r = v, g = p, b = q; break;

}

var rgb='#'+toHex(r * 255)+toHex(g * 255)+toHex(b * 255);

return rgb;

}

再回到我们的彩虹爆炸图。每一个节点对应的所在角度(中心角度)决定了它自己的颜色值。所以，我们可以直接根据这个角度得到颜色的h。然后，为了让彩虹逐渐一圈一圈变淡，再把s饱和度从1逐圈递减(例如0.1)，产生变淡的效果。为了防止圈太多最后看不清，减到0.2到0.3左右可以停止递减。

var fromAngle=node.getClient(‘fromAngle’);

var toAngle=node.getClient(‘toAngle’);

var level=node.getClient(‘level’);//节点在第几圈

var h = (fromAngle+to)/2 % 360 /360; //中心角度，并转换为弧度

var s = Math.max(0.2, 1-level*0.1);//每圈s递减0.1，直到0.2为止

var v=1;

var color=getHSVColor(h, s, v);

这样就获得了一圈颜色。实验效果如下：

如果相对某个节点的颜色做特殊处理，例如强制为橙色来凸显，我们可以在数据中定义时加个标记，设置颜色时候直接使用而不用计算即可。

{name:'浦东新区', value: 2600, color: '#FE9A2E'}

接下来要实现鼠标划过节点，自动计算路径、高亮路径节点、暗淡非路径节点。为了方便路径寻找，程序把每个节点的下一圈子数据定义为子节点，子节点通过getParent函数可以直接获得父对象。这样，通过不断getParent就可以获得整个路径上的节点，并修改其颜色为预设颜色，实现高亮效果：

var node=highlightedNode;

while(node){

node.setClient(‘color’, node.getClient(‘color.original’));

node=node.getParent;

}

对于非路径节点的颜色，可以设置为预设颜色但饱和度为0.1的淡颜色 ，让它变淡，以便突出高亮路径：

var color = getHSVColor(h, 0.1, v);

node.setClient(‘color’, color);

四、动画效果

最后，为了图形更生动，使用了一些动画效果。首先想到的就是图形出来时候，用动画从小到大发散开来，会很动感。这样做需要用动画函数来驱动每一个节点的半径位置，从0增加到所在的半径位置，如果大家一起设置，整个图就会动起来。这里用了一个动画函数来驱动，并使用了网上常用的easing函数来控制，避免线性的动画太死板：

new Animate({

from: 0,

to: 1,

dur: 3000+level*100,

easing: 'elasticOut',

onUpdate: function (value) {

node.setLocation('pie.location’, value);

},

}).play;

上面定义的动画，用3秒钟跑完，用'elasticOut'的easing方式。每一帧，修改node的位置信息。这样就完成了橡皮筋一样的环形弹出散开效果。

另外，导航条的出来也比较突兀，这里也使用一下动画，让它从左到右慢慢伸出：

new Animate({

from: {x:x1, y:y1},

to: {x:x2, y:y2},

delay:50,

type: 'point',

dur: 1000,

easing: 'bounceOut',

onUpdate: function (value) {

node.setCenterLocation(value.x, value.y);

和上一个动画的不同之处在于这里使用了{x、y}的point结构，每一帧直接更新节点位置。同时设置了50毫秒的delay，让动画有一点点粘性停滞，不至于太突兀。效果不错。

至此，彩虹爆炸图基本上就做的差不多了。使用起来也很简单，只要准备一些json数据就可以了，下面是一些有趣的数据做出来的效果。感兴趣的同学可以到这里索取代码。

实际应用在项目中的示意图。如果你也希望项目中用一下彩虹爆炸图，欢迎给我发邮件索取：info@servasoft.com

扫推荐微信：中国大数据

推荐理由：一手新鲜，绝对干货

当今时代，网页设计和开发行业正在以惊人的速度变化。人们希望拥有安全，可扩展且具有众多功能的网站。用户对更好的网络体验以及个性化内容的需求也在不断扩大。简而言之，Internet用户希望能够使用功能强大的智能站点，从而为他们提供超个性化的体验。

大约30年前-1993年-Mosaic图形Web浏览器的出现引发了互联网用户对网站内容的感知方式的革命。从那一刻起，旧金山的网站设计人员和开发人员就花费了数年的时间来尝试为万维网上的用户体验提供准确而清晰的含义。

其中一些巨大的变化是由于技术的进步而发生的。例如，宽带互联网的出现允许访问多媒体内容。同样出现了HTML5。同时，其他变更来自于不同的数据驱动研究，这些研究对什么有效，什么无效以及当专家想要获得完美结果时的连续重复过程进行了研究。

用户的需求改变了他们对更多个性化网站内容和体验的期望。这就是为什么旧金山的网站设计和开发公司必须产生创新的想法，而不是坚持传统的方法、策略和策略。从根本上讲，这种方法是在当今市场上取得成功的唯一方法。

如今，人工智能（AI）至关重要。技术重新定义了所有常规的网页设计和开发概念，并通过将用户体验作为最高优先级，使它们进一步迈进了一步。尽管如此，在更好地了解AI如何改变行业之前， 本期专业的网页设计公司Angle就带大家先去了解什么是人工智能。

人工智能简而言之

人工智能是计算机科学的一部分，致力于制造像人类一样对世界起作用并作出反应的智能机器。这些活动与学习、计划、解决问题、语音识别等有关。此外，人工智能是机器学习，思考和维持类似于这些的其他过程的一种方式。这个研究和开发领域试图使所有计算机变得智能。喜欢实际上很聪明。随着机器功能的稳步发展，曾经被认为需要智能的人们的智力资源最终将被淘汰。机器将扮演新的角色。

使用AI的优点

1、用户体验

这是网页设计的最关键方面。如果你网站的访问者不能有效地使用它，那么他们几乎可以肯定会走到其他地方。众所周知，网站的用户是访问者（并将分享他们的经验）。确保你的产品容易找到并且客户可以轻松购买它们至关重要。许多以客户为中心的网站应用程序开始依赖AI来改善客户体验。

2、个性化内容

内容规则（博客、视频或文章），通过在你的网站上实施人工智能，你可以向某些受众群体成员展示专门为他们设计的内容。人工智能还可以根据过去的行为为用户推荐新的视频、音乐和其他相关内容。用户还可以轻松发现新内容，并相信他们会发现这些内容相关。

3、人工智能作为UX元素

人工智能改变现代网站设计面貌的第一个也是最明显的方式是，无数的人工智能工具正在成为现代设计的标准。最明显的例子是聊天机器人的爆炸式增长，这已成为近年来几乎所有网站属性中的固定要素。从理论上讲，它们的目的是在一种全新的网站界面中缩小这种差距，该界面由对话而非触摸或点击驱动。 最初，聊天机器人仅基于预编程的对话路径。但是这些导致相当令人失望的结果。但是最新的聊天机器人现在使用复杂的自然语言处理系统与不遵循引导路径的访问者进行有意义的对话。现在这些新的人工智能聊天机器人已经成熟，几乎可以肯定它们将很快普及。

使用AI的缺点

1、人类呢？

根据一项研究，到2030年，高达90％的工作将面临被智能机器取代的危险。这些专业可能包括网页设计，图形设计和移动应用程序设计。由于事实证明，AI在内容形成方面更有效，可以适应各种设备，我们是否甚至需要知道如何编码？

2、隐私问题

可以构建人工智能和机器学习来监视消费者行为和在线交互。这些功能通常使许多消费者感到不适。与人工智能结合使用的特定软件具有从客户提取数据和其他信息的无限潜力。这个症结可能使消费者感到恐惧-—其是当94％的消费者希望与完全透明的公司开展业务时。

人工智能可以通过多种方式影响网页设计和开发行业。尽管将技术集成到设计和流程中有很多弊端，但通过确保更高级别的质量和已创建网站的可用性，利弊大于利弊。而且如果你使用AI来帮助你构建网站项目的某些部分，这并不意味着人类没有地方。如果你是一个网站设计工作室，并且为一家公司创建了一个网站，那么在进行交易，提供支持或进行电子邮件通信时，他们仍将与客户互动。作为一个由网页设计人员和开发人员组成的团队，你想要为客户提供构建网站的最佳解决方案，这首先是在设计和开发过程中使用AI所能保证的。本期专业的网页设计公司Angle就为大家分享到这里了。

周珊珊 贺梓秋 叶铁桥

灾难报道永远是检验一家媒体报道能力的重要指标。随着媒体形态的发展与传播格局的变化，用户的选择性大大增加。媒体在做灾难报道时需要比以前更加注重优质内容，并且将优质内容通过各种形式快速、准确地传播出去。天津滨海新区爆炸事故发生后，许多媒体第一时间派出记者前往现场，采用直升机航拍、无人机航拍等多元化的新媒体技术参与报道。本文以天津爆炸事故报道为例，分析新媒体技术在新闻报道中的应用。

本文所探讨的新媒体技术是指除传统纸媒的文字、图片报道和电视媒体的视频报道之外，依托互联网发展起来的，近年来才刚出现的新传播技术。这些新媒体技术打破了传统报道形式的局限。

秒拍视频和实时拍摄

8月12日23时26分，天津网友@小寶最爱旻旻最早在微博上发布与天津滨海新区爆炸相关的秒拍视频。此后，陆续有很多天津网友发布不同角度的爆炸秒拍视频。秒拍是一个短视频分享应用，宣传标语是“10秒拍大片”，事实上可以拍出几秒到几十秒不等的短视频。这并不算是专业报道，但这是媒体记者抵达现场前的最直观信息，对灾难消息的传出和外界对灾难规模的判断起到重要作用。

现场视频往往比文字和图片更直观，具有更广泛传播的潜能。这些短视频往往由网民用手机即时拍下，可能像素不高、精度不够甚至毫无拍摄技巧，在行家看来可能很业余甚至很粗陋，但是它们是第一手的，最快速也最接近现场。正是它们的这些特性使得秒拍视频经常被传统媒体转载、转播，成为一个重要的信息来源。

而在传统媒体的报道中，现场直播技术早已非常成熟，智能手机的存在大大突破了电视直播的条件限制，使记者可以第一时间抵达现场并在第一时间为大众传递第一手消息。

手机实时拍摄也成为此次天津爆炸事故报道中不可或缺的一部分。一度闹得沸沸扬扬的“CNN(美国有线电视新闻网)记者在天津医院做事故现场直播时被干扰”事件中，CNN的那名男记者即是用手机实时拍摄画面传回直播。

直升机航拍、无人机航拍与卫星图

航拍又称空中摄影或航空摄影，是指从空中拍摄地球地貌，获得俯视图。相比于一般的摄影，航拍图能够更清晰地表现地理形态。

据央视报道，消防部门的无人机在火灾发生的5个小时之后升空，并全程记录、传回火场情况。央视等媒体也使用了其中的部分素材进行报道。

8月13日上午，中国国际广播电台主办的新闻网站国际在线连发数张航拍照片。凤凰网也转载了源自法制晚报记者的航拍图片。此外，天津航警AC311警用直升机也紧急出动，奔赴火灾现场，执行空中航拍和图像传送任务。

8月13日下午，新华社也推出了数张天津滨海新区爆炸现场的航拍照片。8月15日，新华社发布无人机航拍天津港重大火灾爆炸事故现场的视频。

8月13日上午10点左右，央视新闻频道通过现场连线，播出一部分无人机航拍视频。

财新网8月13日连推两段无人机航拍事故现场视频，分别时长34秒和1分52秒，主要展现了事故现场爆炸后的直观情况；腾讯网使用了来自腾讯拍客的无人机视频。

除了这些航拍的追踪报道，天津滨海新区爆炸时，日本“向日葵”-8号卫星、MTSAT-2卫星以及韩国COMS-1卫星均从天空探测到此次爆炸在红外波段产生的强烈热信号。这也成为媒体报道的内容之一。新浪图片和网易等率先转载了卫星图像；新浪科技根据中国资源卫星应用中心等提供的卫星影像做成爆炸前后对比图；澎湃用来自谷歌的卫星图片制作成HTML5，将爆炸前后对比图用中间一条竖线隔开，将竖线左右拉动可查看全图，并将部分区域放大，对比更加醒目。

相比于直升机航拍、无人机航拍等形式，卫星图像的应用算是比较新颖的视角，能从不同的角度看到天津爆炸事故产生的影响。

可视化制图

可视化制图是近两年热门的新媒体报道形式。不仅是门户网站等新媒体，传统媒体也在尝试用数据、图表来解释新闻事件，补充文字报道。

可视化制图的表现内容，大致可分为以下几类：

1.地理位置信息图。在灾难事故发生后，事故发生的准确地理位置肯定是受众最为关心的信息之一。媒体推出的可视化制图自然离不开这个板块。

腾讯、搜狐、网易、新浪都在专题或者专门的图说栏目推出可视化制图。它们主要提供的是基于地理位置的信息，在实景或者地图上标注爆炸点，以及爆炸点附件的灾情、损失以及居民居住状况。这个类型的制图一般比较简单、直观，提供的信息不多。

澎湃推出的《一图看懂天津滨海新区爆炸，事发13小时已造成44人死亡》，从地点、时间、伤亡人数、周边环境、风向、空气质量等多角度来可视化有关天津爆炸事故的信息。

除此之外，还有针对天津港危险品管理情况的制图。比如《财经》8月16日发布的《图解：化工基地选址 为何“炸弹”离我们越来越近》，主要是根据2014年至今的化工爆炸事故，图解危化品事故发生地，以及分析为什么化工厂成了“定时炸弹”。信息比较生活化，以接近性取胜。

财新传媒“数字说”在8月18日推出了《天津港危险品管理乱象》，通过给出全国八大港口的简图和天津港区域图，配合对九类危险品的关注，把联合国危险货物分类与天津爆炸事故中的危化品进行对比，提出四项关于危险品管理的质疑。

2.时间轴与大事记制图。时间轴与大事记形式的可视化制图，在灾难报道中也是比较常见的做法。

凤凰资讯“图说新闻”栏目推出《爆炸17小时回顾》，梳理了爆炸事故发生至13日16:30的主要事件和具体情况。

界面新闻制作了包含文字和照片的信息长图，时间精确到秒，抓住了爆炸事故发生至13日中午几个大的时间节点进行制图。

网易新闻则梳理了从8月13日凌晨到27日上午的长时间轴，主要通过文字加少量图片等形式进行直播。

《财经》的可视化制图，通过财经网原创频道先行发布。长图以时间轴的形式记录了8月12日到8月14日的主要时间节点，以及该时间点上的重大事件、新的伤亡数据等，并在曲线形式的时间轴中嵌入天津港的简图。

除了针对天津爆炸事故本身的时间轴和大事记之外，还有一些对以往事故的回顾。

财新传媒8月14日发出了《盘点：近年来企业重大爆炸事件》，主要以文压图的形式，展示了2008年以来，包括广西宜州化工事故、兰州石化公司重大爆炸事故、河北淀粉厂燃爆事故、大连输油管道爆炸、南京栖霞区工厂爆炸、伊春烟花厂爆炸事故、贵州福泉炸药车爆炸案、西安街头爆炸案、广东英德爆炸案、青岛输油管爆炸事件、昆山工厂爆炸事故、古雷PX项目两度爆炸等在内的企业重大爆炸事件及其造成的死伤影响。

3.科普知识信息图。鉴于此次爆炸事故系化学品爆炸，对于化工知识的科普信息图也成为此次报道中的一大亮点。对于此次天津爆炸事故的科普知识信息图主要有三个主题：一是对于危化品爆炸危害的解读及如何自救；二是对于国内外消防员保护及消防体制的探讨；三是针对毒性较大、传播较广的氰化钠的性质解读。

腾讯新闻的“新闻百科”栏目推出《天津爆炸事故核心事实》、《天津爆炸事故三大核心疑问》、《危险化学品事故为何多发？》、《数百吨氰化钠到底意味着什么》等图解新闻。按时间顺序，先梳理事故基本情况，提出核心疑问，查找背景原因，在危险品曝光后解释后果。

以数据新闻著名的网易“数读”栏目也推出一系列可视化作品，如《如何保护消防员：美国单个消防员的装备价值》、《中国危险化学品事故多发地分布》、《美国应对不明化学品爆燃：疏散并等它烧完》。

新浪新闻把重点放在了与消防相关的内容上，推出了《美国消防体制图解-用专业捍卫生命》。

8月19日，财新传媒推出了关于氰化钠的可视化信息图《氰化钠，它有多厉害？》，从防护措施、氰化钠性质、用途、化学特性、处置、中国产量等角度来解读氰化钠。

8月19日，《财经》也同样把目光放到了氰化钠的身上，发布一篇图解，名为《图解：“毒药之王”氰化钠遇水后会更危险》。8月20日，《财经》又推出《图解：天津港爆炸事故后 危化品你知多少？》，集中使用了危化品标识，以及用折线图、柱状图和饼图等比较传统的图示方法呈现了统计数据。图解也同时包括了本次天津爆炸事故涉及的危化品，以及危化品监管应该由谁负责的科普。

总体而言，可视化制图越来越为各类媒体所重视，从数量到质量都非常可观。网媒对于可视化制图的掌控能力更好，经验更丰富，使用的图标、示例等表现方式也更清晰；纸媒中表现较好的是以《财经》和财新传媒为首的杂志类媒体。可视化制图面临的问题主要是话题同质化以及“伪可视化”，仅仅堆砌文字和图片，并没有信息增量。

4.事故追问信息图。可视化制图的主题不完全是对于数据的整理和再表达，也包含了对于爆炸事故的追责。

搜狐新闻的“数字之道”先后发布了《天津爆炸事故发布会大数据》、《救火英雄的中国难题》、《天津爆炸中的“权”与“贵”》和《瑞海公司政商关系网》等图解，主要针对发布会乱象、消防员殉职率居高不下，以及瑞海公司的背景等问题进行追问。

新浪新闻的“图解天下”栏目主要针对瑞海公司进行追问，《危险通关战：瑞海国际如何通过层层审批？》图解瑞海公司是如何拿到危化品运营资质的以及为何化学品火灾难以扑灭；《瑞海国际的水有多深？》则是直接图解瑞海国际的“朋友圈”。

关注发布会的还有澎湃新闻，《盘点天津港爆炸七场发布会，数据告诉你哪里没说清》是针对七次发布会上的关键词出现次数的信息图，展现媒体对于天津爆炸事故的问责。

5.全景图、互动图和HTML5。互动是新技术可视化的核心元素，主要交互逻辑则是基于地理位置信息，包括全景图、互动图和HTML5在内的多种表现形式在此次天津爆炸事故的报道中都有所体现。

澎湃新闻推出了《360°全景|天津爆炸现场汽车成废铁，民宅内家具震落一地》的全景图。着眼处是事故核心现场附近的进口新车停车场，可通过滑动屏幕查看上下左右360°全景，并可点击查看详细大图，或进入旁边的住宅楼内，看到受损的房间，玻璃被震碎，屋内一片狼藉。人仿佛就站在这片停满了废弃新车的场中央，目所能及是一片废墟般的场景，身临其境感强烈。

腾讯网推出《天津爆炸事故伤情地图》，采用交互呈现的方式来整合地理位置信息。互动地图上以闪着红光的爆炸点为中心向外扩散同心圆，标注着距离爆炸点××米的位置，点开可查看具体伤情的小图或前后对比图，和简要文字说明。

财新传媒8月13日推出了名为《天津港仓库连环爆炸》的互动图。互动图依据天津港的谷歌地图或卫星地图，以文字配图简洁陈述天津爆炸事件的基本过程，并可以点击查看爆炸标记点和照片信息点，以地图配图文的方式与用户互动。

澎湃新闻在很短的时间内就做出了《互动地图|直击天津滨海新区爆炸现场》的HTML5，在移动端上大量传播。爆炸地点、现场周边、周边小区、临时安置点均可点击查看多张大图。

3D动画

和前文提到的几种视频报道形式不同，3D动画新闻并不是以现场真实画面为主要展现内容，而是将前方记者采写的新闻事实，运用3D动画技术制作出画面，呈现给观众。这种技术在传统电视媒体的报道中并不鲜见，但在本次天津爆炸事件的报道中，很多纸媒也依托自身网站发布了不少3D动画新闻，引人关注。

《新京报》是其中表现最突出的。在爆炸发生后的24小时内，新京报网“动新闻”板块即发布了第一条3D动画新闻《3D解读天津爆炸事故威力：相当于46枚战斧式巡航导弹》。在1分47秒的视频里，记者运用动画技术向受众普及了TNT当量等相对专业的术语，并用46枚战斧式巡航导弹作为替代，让受众直观感受到这次爆炸的威力之大。之后几天里，新京报网陆续发布了关于天津爆炸事故的3D动画及其他动画新闻15条，可见3D动画已经成为其报道的重要形式之一。

澎湃新闻8月13日发布《视频|3D动画还原天津滨海新区爆炸》，同样也是以3D动画结合现场画面，配以画外音解说，较清楚地还原了天津爆炸事故现场。

和传统的视频报道不同，3D动画新闻具有很多其他报道形式无法匹敌的优势。

1.重现能力。灾难事故往往发生在一瞬间，媒体跟进报道也都是在事故发生之后，利用传统的报道形式很难向受众还原事故发生时的情况。这次天津爆炸事故虽有不少网友通过秒拍等形式记录下了爆炸瞬间，但都离事故发生地点较远，对于现场的情况很难清楚地展现出来，而3D动画技术就可以以前方记者采访到的事实为基础进行重现，将爆炸当时的情况展现出来。类似的报道形式还出现在“东方之星”沉船事故的报道当中。

2.深度报道能力。在之前的视频报道形式中，无论是秒拍视频，还是直升机、无人机航拍视频，都是对基本事实的展现。通过对现场画面的多角度展现，让受众直观地感受到爆炸威力之大，灾难过后现场之惨烈，但很难进行深一步的挖掘。而3D动画则突破了传统视频素材的限制，通过动画制作可以对一些比较抽象的问题进行深入探讨。比如前文中提到的《3D解读天津爆炸事故威力：相当于46枚战斧式巡航导弹》。新京报网随后还发布了题为《动画呈现天津爆炸现场冲击波有多大、人体有何感受》的报道，视频通过动画形象地向受众解释了冲击波超压为0.5个大气压时人体可能受到的损伤，并普及了面对这种突发情况如何自救的小知识。这些视频相比较其他视频报道虽然少了一些视觉上的冲击力，但是在报道日益同质化的环境下，这些动画视频报道提供了很多新的视频报道思路。

3.表达记者人文关怀的能力。在大的灾难面前，人类的情感往往会受到巨大的冲击。动画由于具有虚拟性，经过精心的制作可以很好地表达记者内心的情感和人文关怀。比如新京报网在事故发生的第一个24小时内和爆炸死难者头七那天，分别发布了题为《手绘讲述：天津爆炸中“逆行者”的22个小时》和《7日祭手绘动画：天津爆炸中“逆行者”的最后影像》两个视频，用沉痛的语调讲述爆炸事故发生后参与救援的消防员的故事，催人泪下，直抵人心。

和其他报道形式不同的是，动画新闻需要记者具有较强的选题策划能力。动画新闻的新闻容量比较大，在短短几分钟内就可以涵盖可能数篇文字报道的内容，且制作周期相对较长，每一条动画新闻都可以视作一个小的专题报道。记者只有提前进行选题策划，才能制作出满足受众信息需求、真实准确的动画新闻。

（周珊珊：清华大学新闻与传播学院硕士生；贺梓秋：武汉大学新闻与传播学院本科生；叶铁桥：中国青年报官微运营室主任）