旅行智能推薦系統(tǒng)可視化研究

摘 要 數(shù)據(jù)可視化設計旨在以圖形圖像的視覺形式一目了然地揭示數(shù)據(jù)中的復雜信息，并且達到更有效傳播的目的。而現(xiàn)有的旅行門戶網(wǎng)站大多提供些景點信息和旅行社各種旅行產(chǎn)品的查詢等，并沒有以可視化形式為個人提供最佳的旅行線路和旅行成本的查詢等服務。本文通過旅行智能推薦系統(tǒng)的設計及實現(xiàn)來實現(xiàn)數(shù)據(jù)可視化的具體應用。

關鍵詞 html5 旅行智能推薦系統(tǒng) 數(shù)據(jù)可視化

中圖分類號：TP391.41 文獻標識碼：A

一、引言

可視化（Visualization）是采用計算機圖形學和圖形處理技術將數(shù)據(jù)轉換成圖形或者圖像顯示出來的技術。可視化匯集了數(shù)據(jù)表示、數(shù)據(jù)處理和決策分析等一系列問題。

隨著科學技術的不斷發(fā)展，海量數(shù)據(jù)的出現(xiàn)加快了數(shù)據(jù)可視化技術的發(fā)展。很多平臺提供了實現(xiàn)數(shù)據(jù)可視化的技術，如Flash 和Silverlight 都提供了相應的繪圖技術，包含了SVG 和Canvas 的HTML5 提供了最新的數(shù)據(jù)可視化技術，而且現(xiàn)在主流瀏覽器大部分完成了對HTML5 標準的支持，包含IE9、Chrome、FireFox、Safari 等，同時現(xiàn)在智能手機以及平板電腦的瀏覽器對HTML5 都有很好的支持，這些移動終端的日益普及也使得基于HTML5 的數(shù)據(jù)可視化跨平臺成為了可能。

隨著人們生活水平的不斷提高和精神壓力的不斷增加，旅游已經(jīng)成為人們調節(jié)心情、釋放壓力、提高生活質量的重要活動，因此，家庭范圍內的自駕游會越來越受到人們的青睞和推崇。

現(xiàn)行的旅游門戶網(wǎng)站相應的查詢服務并沒有推出，打包式的旅游產(chǎn)品并不能滿足人們各式各樣的需求，特別是自駕游的朋友們的需要。因此，提供旅行最優(yōu)的旅行線路、預測旅行時間和成本等功能的旅行智能推薦系統(tǒng)會不斷涌現(xiàn)出來。一來它滿足人們個性化的旅行方式，二來它更好地預先安排人們的出行計劃，不至于讓本來身心愉悅的旅行變成煩人的過場。

二、技術的可行性和可用性

HTML5 標準是HTML 下一個主要的修訂版本，目前仍處于發(fā)展階段。其目標是取代1999 年所制定的HTML 4.01 和XHTML 1.0 標準，以期能在互聯(lián)網(wǎng)應用迅速發(fā)展的時候，使網(wǎng)絡標準達到符合當代的網(wǎng)絡需求。HTML5實際上指的是包括HTML、CSS 和JavaScript 在內的一套技術組合。

（一）HTML5。

HTML5 包含了SVG（Scalable Vector Graphics），同時提供了實時二維繪圖技術Canvas。本文就基于SVG對數(shù)據(jù)可視化的實現(xiàn)提出一種可行的方法。

（二）基于SVG 的數(shù)據(jù)驅動可視化工具D3.js。

D3（Data-Driven Documents） 是一個基于數(shù)據(jù)驅動的JavaScript 庫，通過使用HTML、SVG 和CSS 操作網(wǎng)頁元素，同時提供操作各種復雜數(shù)據(jù)集的方法。D3 的很多元素操作都基于css 選擇器，它可以選擇網(wǎng)頁元素并在改，刪，增上與數(shù)據(jù)集保持一致。同時D3 還提供了很好的交互的方法，例如動畫，事件處理等。D3 做為基于SVG的數(shù)據(jù)驅動可視化工具，提供了很好的Javascript 庫函數(shù)用來實現(xiàn)具體的可視化矢量圖形，而它的使用只需在HTML 中添加d3.js 的外部引用即可，如d3.selectAll（\"p\"）.style（\"color\"， \"white\"）； // 這條語句簡單的實現(xiàn)選擇所以HTML 中

并改變字體顏色為白色。

三、內容研究與設計

現(xiàn)在用HTML4編寫的網(wǎng)頁已經(jīng)滿足不了不同數(shù)據(jù)類型的需求。如網(wǎng)頁中的音頻和視頻等內容往往需要安裝插件來完成，缺少專門處理的標簽，缺少圖形和圖像的圓角、3D、陰影等特效的快速處理方法。

HTML5能夠很好地解決上述問題，它在圖形圖像處理、音頻、動畫、視頻、網(wǎng)頁應用、頁面布局和開發(fā)效率等方面給網(wǎng)頁結構帶來了巨大的變化。

（一）HTML5的表單新特性。

HTML5 中的表單部分是對 HTML4 中的表單部分的全面提升，在保持了原有簡易用的特點外，還增加了許多新的特性，不僅滿足了用戶新的需求，而且減少了開發(fā)人員的工作量， 提高了開發(fā)的效率。 在HTML4 中的標簽有 form、 input、textarea、 select 和 option 等等，在用戶輸入數(shù)據(jù)后，需要編寫腳本進行數(shù)據(jù)合法性的驗證，而且編碼復雜，需要用復雜的正則表達式檢驗用戶的輸入是否合乎規(guī)范。而 HTML5 則提供了新的一系列新的表單元素，這些表單元素增加了數(shù)據(jù)檢查的功能。

（二）旅行智能推薦系統(tǒng)的網(wǎng)頁設計。

1、通過表單實現(xiàn)選擇旅游的城市。

如何才能更快地查詢到旅游的城市，可以使用下拉菜單的方式，從省一級>市一級.省級排列順序按照地區(qū)先后，如華北地區(qū)，地區(qū)內按照旅游景點的知名度排名。市一級按市內旅游景點知名度排名。

實現(xiàn)效果如圖1所示：

圖1 國內旅游景點查詢

2、選擇城市內的旅游景點。

在實現(xiàn)選擇城市后，該城市的所有景點會以復選框的形式顯示出來并附加景點照片和介紹。現(xiàn)在景點查詢在各大旅游門戶網(wǎng)站已經(jīng)相當成熟。

通過勾選中意的景點。景點按照知名度和最終確認次數(shù)來排序。如同淘寶的購物車一樣，只是你購的不是物品，而是景點。

點擊查詢后（如選擇北京市—>北京市，如圖2），

然后把自己想去的景點點開，放入購物車中。

3、最終結果。

如同在電子商務網(wǎng)站購物一樣，最終會顯示出一個表格，前一列會顯示出選擇的城市，后一列會顯示出選擇的景點。在城市后面加下刪除等按鈕，同樣可以在對應的景點后面加入刪除等按鈕

為了更好的地符合旅行情況，還會加入自己的出發(fā)地和開車速度（單位公里每小時）等先決條件。

實現(xiàn)效果如圖3所示：

（三）ASP and tsp算法。

1、asp.net。

ASP中的ADO 被用于從網(wǎng)頁訪問數(shù)據(jù)庫。那什么是 ADO？ADO 是一項微軟的技術；ADO 指 ActiveX 數(shù)據(jù)對象（ActiveX Data Objects）；ADO 是一個微軟的 Active-X 組件；ADO 會隨微軟的 IIS 被自動安裝；ADO 是一個訪問數(shù)據(jù)庫中數(shù)據(jù)的編程接口。

從 ASP 頁面訪問數(shù)據(jù)庫，主要功能是實現(xiàn)向服務器查詢，如城市距離，景點之間的市內距離和景點門票等。

從一個 ASP 頁面內部訪問數(shù)據(jù)庫的通常的方法是：（1）創(chuàng)建一個到數(shù)據(jù)庫的 ADO 連接；（2）打開數(shù)據(jù)庫連接；（3）創(chuàng)建 ADO 記錄集；（4）從記錄集提取您需要的數(shù)據(jù)；（5）關閉記錄集；（6）關閉連接。

2、tsp算法的java實現(xiàn)。

旅行商問題，即TSP問題（Traveling Salesman Problem）是數(shù)學領域中著名問題之一。假設有一個旅行商人要拜訪N個城市，他必須選擇所要走的路徑，路徑的限制是每個城市只能拜訪一次，而且最后要回到原來出發(fā)的城市。路徑的選擇目標是要求得的路徑路程為所有路徑之中的最小值，這是一個NP難問題

城市數(shù)量大于4個時，用java實現(xiàn)的tsp算法，并在head標簽處嵌入網(wǎng)頁中，通過前一過程的向數(shù)據(jù)庫查詢到的城市距離或景點之間的距離。給出最優(yōu)路線并在網(wǎng)頁內顯示。

城市數(shù)量小于或等于4個時，用窮舉法，通過排列和組合，當數(shù)量為4個城市或景點時，共需要4*3*2*1共24種情況。

如用1代表出發(fā)城市，用2，3，4，5代表其他不同的四個城市。會出現(xiàn)24種不同情況，如表1。

四、數(shù)據(jù)可視化

數(shù)據(jù)可視化是關于數(shù)據(jù)之視覺表現(xiàn)形式的研究；其中，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為一種以某種概要形式抽提出來的信息，包括相應信息單位的各種屬性和變量。

數(shù)據(jù)可視化技術的基本思想是將數(shù)據(jù)庫中每一個數(shù)據(jù)項作為單個圖元元素表示，大量的數(shù)據(jù)集構成數(shù)據(jù)圖像，同時將數(shù)據(jù)的各個屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對數(shù)據(jù)進行更深入的觀察和分析。

數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達與溝通信息。但是，這并不就意味著，數(shù)據(jù)可視化就一定因為要實現(xiàn)其功能用途而令人感到枯燥乏味，或者是為了看上去絢麗多彩而又顯得極端復雜。

（一）從網(wǎng)頁中獲取數(shù)據(jù)。

為了更好顯示出花費及時間，我們數(shù)據(jù)分為二維，一是花費，二是時間。

到這個城市的前期出行花費、這個城市景點的出行花費、門票花費、住宿和飲食費用。時間也可以分為以下這個城市的前期出行花費時間、這個城市景點的出行花費時間、景點的花費時間，（休息時間和飲食時間為12：00-14：00，假設8：00-18：00為一天中出行時間）。

因為城市是采用閉環(huán)旅行，返回原點時會多一個返回的出行費用和時間，鑒于這種情況，把最后的這一個出行費用和時間并給出行的最后一個城市里面的出行費用及時間。

我們可以從網(wǎng)而上獲得最終選擇的旅游城市及景點，從第一列，我們可以獲得總共有五個城市，加上出發(fā)地上海，數(shù)量大于4個。用加載的tspcheck.js來獲得最優(yōu)路徑。需要從后臺數(shù)據(jù)庫，得到每兩個城市之間的距離，以參數(shù)形式給后臺的tsp函數(shù)，最終獲得最優(yōu)路徑為上海->北京->西安->洛陽->南京->杭州->上海。并以Array_triptsp數(shù)據(jù)數(shù)組形式存放最優(yōu)路徑。并按順序依據(jù)每二個城市之間的距離計算出出行費用和花費時間并存放到Array_tripfee和Array_triptime里。并將最后二個數(shù)據(jù)加起來，因為閉環(huán)上城市點比旅行城市多一個。后二者的數(shù)組個數(shù)比之前的數(shù)組少一個。

按照順序，計算出每一城市里面所有景點，并計劃景點出行的最佳路徑，以Array_citytriptsp1。同上會多出二個Array_citytripfee1，Array_citytrip_time1。同上Array_citytriptsp2（..345），Array_ctiytripfee2（..345），Array_citytrip_time2（..345）.

第三個數(shù)據(jù)為出行的門票費用和飲食住宿費用。門票費用可以直接計算出來，乘以總人數(shù)，可以計算出門票總費用并存放數(shù)據(jù)到數(shù)組Array_citytrip_ticketfee。飲食和住宿費用可以根據(jù)前期花費的時間，計算出需要多少小時，進而推出所需要天數(shù)。乘以總人數(shù)和天數(shù)，就可以得到飲食和住宿總費用并分別存放數(shù)據(jù)在數(shù)組Array_citytrip_meal和Array_citytrip_hotel.

每一個城市的景點所時間計算出并依次存放在Array_citytrip_sighttime1（..2345）。

（二）通過D3實現(xiàn)數(shù)據(jù)可視化。

Html5的D3實現(xiàn)的數(shù)據(jù)可視化的全部集charts.js，通過調用它，可以實現(xiàn)多種類型的可視化，如以combination of stacked-column為列。

把出行費用數(shù)據(jù)分別傳送給chars.js。

[Array_tripfee[1]；sum（Array_citytripfee1）；sum（Array_citytrip_ticketfee）；Array_citytrip_meal [1]；Array_citytrip_hotel[1]；]

分別求和可以求出所有的總費用。

分別求和可以求出所需要的總時間。每天有10個小時的出行時間，可以可以得到出行的天數(shù)。

最終的效果如下：

圖4 D3可視化結果

上圖不僅僅可以實現(xiàn)出行費用和出行時間的數(shù)據(jù)可視化，使數(shù)據(jù)以更加直觀的形式呈現(xiàn)出來，還可以通過選取功能。

有三種選取方法：

1、直接在圖形內點擊選取，每次只能選一個，上面的total標簽會顯示所中部分的總費用。

2、通過Axis labal選取，直接可以選取在一個城市時的總費用。

3、通過legend label選取，可以獲得每一個單項的花費。

五、結論與展望

人們可以根據(jù)出行的可接受的費用和限制時間，不斷調整自己的出行線路和所要觀看的景點，可以在有限的時間內達到最大限度的利用時間和費用，避免人們總是被動的根據(jù)現(xiàn)在的費用限制和時間限制去接受旅行公司給我們制定的出行方案。

此系統(tǒng)還可以根據(jù)人們出行時間，制定出出行計劃。之后還可以讓人們在制定的計劃上修改，就可以做出更適合人們個性的出行方案。

數(shù)據(jù)可視化提高的數(shù)據(jù)到結論的距離，可以減少數(shù)據(jù)失真，越來越朝著智能化方向發(fā)展。而HTML5中的D3模塊使數(shù)據(jù)可視化變得更加強大，可以實現(xiàn)charts模型開發(fā)和網(wǎng)頁開發(fā)的分離。

（作者：史衛(wèi)衛(wèi)，同濟大學經(jīng)濟與管理學院2011級管理科學與工程專業(yè)研究生；楊德華，同濟大學經(jīng)濟與管理學院管理科學與工程專業(yè)教授）

參考文獻：

[1]唐彬.利用HTML5實現(xiàn)網(wǎng)頁圖表的研究.《模型電腦應用》.2012（5）

[2]高科.基于HTML5數(shù)據(jù)可視化實現(xiàn)方法研究.《信息科技》.2013

[3]俞華鋒.基于HTML5的網(wǎng)頁設計與實現(xiàn).《科技信息》.2012（29）

[4]錢海軍.基于HTML5移動Web頁面開發(fā)技術研究.《電腦與信息技術》.2013.2

[5]王美香.楊繼奎.旅游線路優(yōu)化設計探討.《決策與信息》.2012（3）

[6]w3school在線教程.http：//www.w3school.com.cn/