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

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

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

中圖分類號(hào)：TP391.41 文獻(xiàn)標(biāo)識(shí)碼：A

一、引言

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

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

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

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

二、技術(shù)的可行性和可用性

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

（一）HTML5。

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

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

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

并改變字體顏色為白色。

三、內(nèi)容研究與設(shè)計(jì)

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

HTML5能夠很好地解決上述問(wèn)題，它在圖形圖像處理、音頻、動(dòng)畫(huà)、視頻、網(wǎng)頁(yè)應(yīng)用、頁(yè)面布局和開(kāi)發(fā)效率等方面給網(wǎng)頁(yè)結(jié)構(gòu)帶來(lái)了巨大的變化。

（一）HTML5的表單新特性。

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

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

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

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

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

圖1 國(guó)內(nèi)旅游景點(diǎn)查詢

2、選擇城市內(nèi)的旅游景點(diǎn)。

在實(shí)現(xiàn)選擇城市后，該城市的所有景點(diǎn)會(huì)以復(fù)選框的形式顯示出來(lái)并附加景點(diǎn)照片和介紹。現(xiàn)在景點(diǎn)查詢?cè)诟鞔舐糜伍T(mén)戶網(wǎng)站已經(jīng)相當(dāng)成熟。

通過(guò)勾選中意的景點(diǎn)。景點(diǎn)按照知名度和最終確認(rèn)次數(shù)來(lái)排序。如同淘寶的購(gòu)物車一樣，只是你購(gòu)的不是物品，而是景點(diǎn)。

點(diǎn)擊查詢后（如選擇北京市—>北京市，如圖2），

然后把自己想去的景點(diǎn)點(diǎn)開(kāi)，放入購(gòu)物車中。

3、最終結(jié)果。

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

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

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

（三）ASP and tsp算法。

1、asp.net。

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

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

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

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

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

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

城市數(shù)量小于或等于4個(gè)時(shí)，用窮舉法，通過(guò)排列和組合，當(dāng)數(shù)量為4個(gè)城市或景點(diǎn)時(shí)，共需要4*3*2*1共24種情況。

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

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

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

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

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

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

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

到這個(gè)城市的前期出行花費(fèi)、這個(gè)城市景點(diǎn)的出行花費(fèi)、門(mén)票花費(fèi)、住宿和飲食費(fèi)用。時(shí)間也可以分為以下這個(gè)城市的前期出行花費(fèi)時(shí)間、這個(gè)城市景點(diǎn)的出行花費(fèi)時(shí)間、景點(diǎn)的花費(fèi)時(shí)間，（休息時(shí)間和飲食時(shí)間為12：00-14：00，假設(shè)8：00-18：00為一天中出行時(shí)間）。

因?yàn)槌鞘惺遣捎瞄]環(huán)旅行，返回原點(diǎn)時(shí)會(huì)多一個(gè)返回的出行費(fèi)用和時(shí)間，鑒于這種情況，把最后的這一個(gè)出行費(fèi)用和時(shí)間并給出行的最后一個(gè)城市里面的出行費(fèi)用及時(shí)間。

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

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

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

每一個(gè)城市的景點(diǎn)所時(shí)間計(jì)算出并依次存放在Array_citytrip_sighttime1（..2345）。

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

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

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

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

分別求和可以求出所有的總費(fèi)用。

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

最終的效果如下：

圖4 D3可視化結(jié)果

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

有三種選取方法：

1、直接在圖形內(nèi)點(diǎn)擊選取，每次只能選一個(gè)，上面的total標(biāo)簽會(huì)顯示所中部分的總費(fèi)用。

2、通過(guò)Axis labal選取，直接可以選取在一個(gè)城市時(shí)的總費(fèi)用。

3、通過(guò)legend label選取，可以獲得每一個(gè)單項(xiàng)的花費(fèi)。

五、結(jié)論與展望

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

此系統(tǒng)還可以根據(jù)人們出行時(shí)間，制定出出行計(jì)劃。之后還可以讓人們?cè)谥贫ǖ挠?jì)劃上修改，就可以做出更適合人們個(gè)性的出行方案。

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

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

參考文獻(xiàn)：

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

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

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

[4]錢(qián)海軍.基于HTML5移動(dòng)Web頁(yè)面開(kāi)發(fā)技術(shù)研究.《電腦與信息技術(shù)》.2013.2

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

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