基于Web的新聞數據可視化

韓玉萍，朱立谷

(中國傳媒大學計算機學院，北京 100024)

?

基于Web的新聞數據可視化

韓玉萍，朱立谷

(中國傳媒大學計算機學院，北京 100024)

對新聞數據可視化技術進行了研究，并充分整合數據挖掘、文本分析、分布式存儲及可視化技術，設計實現了一個新聞數據可視化系統(tǒng)。它把采集到的新聞數據進行分類，并結構化存儲，在WEB端為用戶展示新聞數據的可視化分析成果。系統(tǒng)在交互式設計上提供了強大的用戶界面來輔助新聞關注者對網絡輿情的直觀掌控，并通過對系統(tǒng)性能的測試，證明了系統(tǒng)在大量用戶使用及大規(guī)模數據呈現的情況下都具有較好的性能。

新聞；新聞數據；可視化分析；交互式設計；網絡輿情

1　引言

當今世界已進入數字信息時代，越來越多的人通過互聯(lián)網的便利來獲知信息?；ヂ?lián)網中信息數量呈現出幾何級數的增長，海量信息給用戶在關注和尋找熱點重點信息的同時帶來了煩惱。ProPublica是一家在線新聞網站，網站專門開辟了一個Data頻道，用來展示記者們創(chuàng)造的新聞數據的可視化作品[1]。如今它已經成為美國數據新聞用戶最活躍的網站。在發(fā)達國家，利用數據可視化進行新聞數據分析的業(yè)務已至成熟，而在我國文化創(chuàng)意產業(yè)中才初步呈現跡象。國內的新聞數據可視化發(fā)展尚有諸多不足之處，不僅表現在維度少，樣式上也比較單一，而且目前國內的新聞數據可視化實例還較少。本文將數據可視化概念引入到海量新聞數據中，設計并實現了新聞數據可視化系統(tǒng)，它充分整合了新聞的大量數據收集，重復信息過濾，冗余信息精簡以及關鍵信息的展示等特征。這些特征正好應對新聞關注者面臨的種種問題，為用戶提供直觀簡潔、重點突出的界面捕捉新聞信息。

2　方法及實現

新聞數據可視化系統(tǒng)是基于WEB的新聞數據爬取及可視化分析系統(tǒng)，提供了豐富靈活的交互功能，引導用戶不斷探索新聞數據的內在本質 ，使用戶可根據個人興趣查看不同分類下某時間段內的新聞變化趨勢，幫助用戶發(fā)現其中規(guī)律[2]。系統(tǒng)框架包含4部分：數據收集、結構化存儲、數據分析和可視化呈現，如圖1所示。

圖1　新聞數據可視化系統(tǒng)框架　

2.1數據收集

新聞數據可視化系統(tǒng)由Java編寫的網絡爬蟲從搜狐新聞 、新浪新聞等種子站點爬取新聞記錄數據，爬取過程遵循寬度優(yōu)先策略。但是，再好的爬蟲也難免出現大量的重復網頁，系統(tǒng)的去重工作不僅是通過抽取標題及正文對比刪除相似度高達70%以上的網頁，還要避免多次爬取同一URL。為高效去重，并節(jié)省CPU資源，該系統(tǒng)采取的方法就是建立一個URL存儲庫，每次爬取網頁之前都要查詢該鏈接是否已下載，并且已經下載完成的URL在進行檢索時要加載到內存中。

2.2結構化存儲

系統(tǒng)把取到的數據整理歸納，存儲到分布式NOSQL數據庫MongoDB中。之所以用MongoDB數據庫，主要是考慮到MongoDB對象型數據存儲的特性，在數據的存儲格式上使用了類似JSON格式的BSON格式，面對日漸增多的龐大新聞數據量，必須選擇自由靈活的數據庫[5]。新聞數據共有兩個集合：不同分類新聞數量統(tǒng)計和新聞細節(jié)數據。

2.3數據分析

為呈現時間序列上不同分類新聞數據的變化趨勢及靈活的交互性，新聞數據可視化系統(tǒng)主要實現三種不同時間周期的新聞數據的多層面展示及分析，包括年視圖、月視圖及周視圖。年視圖通過SVG和HTML5元素以折線圖、堆積條形圖以及分類控制分析呈現一年內的不同分類下每天新聞數據的變化趨勢，月視圖通過折線圖并綁定html標簽控制分析一個月周期內的新聞數據變化趨勢及每天的新聞概況，周視圖與月視圖類似，但是在分析展示每天的新聞數據上內容相對更加詳細。每個視圖由三個模塊構成：上下文模塊、新聞焦點模塊和分類控制模塊。在圖形設計上，通過不同的顏色、形狀、大小、方向、材質、色調以及位置比對優(yōu)劣，選出某種較能突出重點的組合實現與數據屬性的關聯(lián)[7]?？紤]到新聞數據具有時序性、地理空間性、種類多樣性以及更新頻繁等屬性，三個模塊將按照新聞數據的不同屬性實現不同的可視化效果。

上下文模塊是系統(tǒng)的時間控制及數據預覽模塊，由D3.js繪制折線圖顯示一定周期內每天來自新浪及搜狐的新聞數據總量變化趨勢，并配置刷子選定周期時間內的一個時間子集合，用戶可通過自由單擊和拖動刷子在新聞焦點模塊控制查看時間子集合內的不同分類下新聞數據的變化趨勢和每條新聞記錄。新聞焦點模塊是系統(tǒng)數據可視化分析成果展示模塊，在年視圖中由D3.js繪制堆積條形圖顯示刷子選定時間集合內及用戶選定新聞分類下的新聞數據，在月視圖和周視圖中由D3.js獲取數據并綁定html標簽控制展示用戶選定條件下的具體新聞記錄。每次的數據更新都會伴有適當的動畫效果。分類控制模塊由Angularjs編寫指令控制用戶選擇的新聞分類，而前兩個模塊的實現是通過Angularjs編寫的控制器，指令與控制器之間的通信是通過冒泡機制，將指令內分類控制參數冒泡傳寄給對應視圖的控制器。系統(tǒng)前端技術架構如圖2所示。

圖2　新聞數據可視化系統(tǒng)前端技術架構　

3　新聞數據可視化分析成果

新聞數據可視化系統(tǒng)的可視化分析成果主要基于時間序列和交互設計來充分展現新聞數據的魅力。首先是年視圖，如圖3所示。

年視圖的左側上下文模塊由D3.js繪制折線圖反映一年內每天來自搜狐及新浪的新聞發(fā)布情況，折線圖在有限區(qū)域顯示一年的數據相對比較密集，但通過控制刷子可在新聞焦點模塊查看具體每天8種分類下的新聞發(fā)布統(tǒng)計。為實現數據更新操作如點擊分類按鈕及還原、平移刷子及隨處點擊刷子移動范圍時新聞焦點模塊數據平滑過度，新聞數據可視化系統(tǒng)在每個數據所綁定的區(qū)域內都添加了適當的動畫效果，給用戶更舒適的視覺體驗，如圖4所示。

圖3　新聞數據可視化系統(tǒng)年視圖可視化分析　

月視圖當前顯示刷子所選7天內除軍事類新聞的發(fā)布情況，上下文模塊刷子的移動范圍為一個月，新聞分類的顏色對應關系是通過建立樣式離散序列比例尺。前面提到AppCtrl定義全局變量：分類對象數組MYMscope.categories，含有類別名稱、類別對應顏色、類別對應css屬性類名稱。在指令中綁定分類控制模塊獲取點擊分類及還原的操作，通過冒泡把參數傳遞給控制器進行數據更新及畫面渲染。月視圖對新聞進行了篩選和精簡，減輕了用戶在新聞過濾上的負擔。

如圖5所示，周視圖中新聞焦點模塊顯示刷子所選某天的具體每條新聞標題、摘要及相關圖片，每條新聞標題都添加超鏈接，用戶可點擊查看新聞網頁。由于每條新聞存儲為一條數據記錄，在對選定時間的新聞數據進行過濾后會生成三維新數組，在此新聞數據可視化系統(tǒng)進行了數組降維，方便數據綁定及操作。用戶可以通過周視圖快速瀏覽捕捉一天內感興趣的新聞內容，并迅速了解當前輿論行情。

圖4　新聞數據可視化系統(tǒng)月視圖可視化分析　

圖5　新聞數據可視化系統(tǒng)周視圖可視化分析　

4　系統(tǒng)性能測試

新聞數據可視化系統(tǒng)是基于Web的應用服務系統(tǒng)，由瀏覽器、Web服務器、應用服務器、數據庫服務器、基礎網絡系統(tǒng)等構成[8]。系統(tǒng)采用支持高并發(fā)訪問的Nodejs服務器，在服務器端采用WebBench來檢測新聞數據可視化系統(tǒng)在多用戶訪問時系統(tǒng)的性能。折線圖展示了在用戶規(guī)模不斷擴大的情況下，系統(tǒng)吞吐量的變化。利用命令WebBench-c1000 -t30http：//222.31.76.22/可測出30秒內1000個用戶訪問成功了32361個頁面，系統(tǒng)吞吐量每秒4.71M。而多次測試下來發(fā)現，當用戶數量至少達到2900時，運行結果中才出現了請求頁面失效，也就說明系統(tǒng)超出負荷了。總的測試結果如圖6所示。

圖6　系統(tǒng)性能與用戶數量的折線圖　

在測試結果中可見，新聞數據可視化系統(tǒng)支持局域網內高并發(fā)訪問，證明了系統(tǒng)具有很好的工作性能。并且隨著數據量不斷的收集，雖然總數據規(guī)模在不斷擴大，但系統(tǒng)進行可視化呈現的三個視圖數據集規(guī)模是基本不變的，分析視圖最多展示31天的新聞信息，數據規(guī)模在2700條至3200條，通過Chrome瀏覽器及IE瀏覽器加載視圖耗時統(tǒng)計發(fā)現，數千條數據渲染只需1200毫秒左右，不會影響D3.js的渲染效果，所以系統(tǒng)在以后的使用過程中也可以保持其高效的性能。

5　總結

本文針對目前大量用戶在閱讀海量繁雜的新聞信息無法快速捕捉關鍵信息及網絡輿情的問題上對新聞數據可視化技術進行了研究，并設計實現了新聞數據可視化系統(tǒng)，較好的改善了用戶的新聞閱讀體驗，并通過系統(tǒng)性能測試證明了系統(tǒng)具有可行性。系統(tǒng)為用戶展示一定周期內多種分類下的新聞數據變化情況及具體新聞概況，提供了豐富靈活的交互功能，界面直觀、易讀，引導用戶不斷探索新聞數據的內在本質，輔助用戶進行決策，實現了鼠標單擊和拖動進行數據過濾及動畫過渡視圖，允許同一數據子集基礎上不同可視化類型的切換，使用戶可根據個人興趣查看某時間段內新聞變化趨勢，幫助用戶發(fā)現其中規(guī)律。盡管系統(tǒng)已經在新聞數據可視化分析上取得了一定進展，但系統(tǒng)需要進一步完善，后期還會添加針對特定熱點新聞及通過關鍵詞搜索的新聞數據的分析評估，這務必需要提高系統(tǒng)的自然語言處理技術，并采取更多的數理統(tǒng)計方法處理獲知的信息，最終通過更豐富靈活的可視化界面及交互效果來展示所關注的新聞數據。

[1]ProPublica.http：//www.propublica.org/data/

[2]LloydL，KechiagasD，SkienaS.Lydia：Asystemforlargescalenewsanalysis[J].VolumeLectureNotesinComputerScience，2005，3772：161-166.

[3]孫立偉，何國輝，吳禮發(fā).網絡爬蟲技術的研究[J].計算機工程應用技術，2010，6(15)：4112-4113.

[4]WittenIH，PaynterGW，FrankE，etal.KEA：Practicalautomatickeyphraseextraction[C].InProceedingsofthefourthACMConferenceonDigitallibraries，ACM，1999：254 -256

[5]孫思源.基于MongoDB的網站日志分析系統(tǒng)的設計與實現[D].中國地質大學碩士學位論文，2014：12-14.

[6]NathanYan，著.張伸，譯.數據之美——一本書學會可視化設計[M].北京：中國人民大學出版社，2014：149-152.

[7]ManuelLima，著.杜明翰，陳楚君，譯.視覺繁美——信息可視化方法與案例解析[M].北京：機械工業(yè)出版社，2013:60-62.

[8]魏元雷，胡西虹，潘立偉.Web服務器的性能測試方法[J].上海計量測試，2007，(06).

[9]KMorton，RBunker，JMackinlay，RMorton，etal.Dynamicworkloaddrivendataintegrationintableau.onManagementofData，2012 -dl.acm.org

[10]PrecisionTree.PTPalisade-DecisionAnalysisinMicrosoftExcel，2005

[11]張煌，葛聲，孫海龍，馬殿富.web服務組合處理系統(tǒng)的研究與實現[J].北京航空航天大學學報，2005.

[12]楊亮慶.中美網絡多媒體新聞發(fā)展狀況比較[J].傳媒評論，2014，(3)：81-83.

(責任編輯：王謙)

VisualizationTechnologyofNewsDataonWeb

HANYu-ping，ZHULi-gu

(ComputerScienceSchool，CommunicationUniversityofChina，Beijing100024，China)

Thisarticlehasaresearchonvisualizationtechnologyofnewsdata.Wedesignandimplementasystemofnewsdatavisualbyfullyintegratetechnologydatamining，textanalysis，distributedstorageandvisualizationtechnology.Thesystemcoulddisplaythevisualizationanalysisresultsofnewsdataforusersonwebafterthegatherednewsdatabeclassifiedandstructuredstorage.Systemprovidesapowerfuluserinterfacetoassistusersofnewsfocusonthecontrolofnetworkpublicopinionowetotheinteractivedesign.Aftersystemtestingwefindthatsystemhasagoodperformanceatcircumstancessuchaslarge-scaledata’sdisplayandusers’use.

news；newsdata；visualizationanalysis；interactivedesign；networkpublicopinion

2015-10-10

韓玉萍(1989-),女(漢族),山東日照人,中國傳媒大學計算機學院碩士研究生.E-mail:yuping0713@126.com

TP302.1

A

1673-4793(2016)03-0041-05

基礎基金：國家自然科學基金項目(61730063)