言

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日祭手繪動畫：天津爆炸中“逆行者”的最后影像》兩個視頻，用沉痛的語調講述爆炸事故發生后參與救援的消防員的故事，催人淚下，直抵人心。

和其他報道形式不同的是，動畫新聞需要記者具有較強的選題策劃能力。動畫新聞的新聞容量比較大，在短短幾分鐘內就可以涵蓋可能數篇文字報道的內容，且制作周期相對較長，每一條動畫新聞都可以視作一個小的專題報道。記者只有提前進行選題策劃，才能制作出滿足受眾信息需求、真實準確的動畫新聞。

（周珊珊：清華大學新聞與傳播學院碩士生；賀梓秋：武漢大學新聞與傳播學院本科生；葉鐵橋：中國青年報官微運營室主任）