《數(shù)據(jù)可視化》課程設(shè)計(jì)-西南科技大學(xué)

1、西南科技大學(xué)計(jì)算機(jī)學(xué)院20192020學(xué)年第1學(xué)期本科生課程數(shù)據(jù)可視化課程設(shè)計(jì)綿陽市餐飲數(shù)據(jù)可視化組長(zhǎng)：佐助木葉村組員：鳴人木葉村組員:小櫻木葉村指導(dǎo)老師：2019年11月課程設(shè)計(jì)說明和要求本課程設(shè)計(jì)依據(jù)西南科技大學(xué)本科生課程數(shù)據(jù)可視化的教學(xué)大綱要求制定。課程設(shè)計(jì)滿分為100分，占數(shù)據(jù)可視化課程考核成績(jī)的60%。要求所有選課學(xué)生嚴(yán)格按照要求完成課程設(shè)計(jì)，按時(shí)提交課程設(shè)計(jì)報(bào)告和可執(zhí)行程序，并參加小組答辯。具體要求如下：一、各組學(xué)生自行收集用于課程設(shè)計(jì)的數(shù)據(jù)，采用D3、Processing或其他可視化軟件和工具，獨(dú)立完成一個(gè)數(shù)據(jù)可視化案例。教師根據(jù)各小組提交的案例質(zhì)量、文檔質(zhì)量、成員貢獻(xiàn)三個(gè)方面給

2、出分?jǐn)?shù)。具體要求和評(píng)分細(xì)則見下頁課程成績(jī)表。二、課程設(shè)計(jì)撰寫及提交注意事項(xiàng)1、課程設(shè)計(jì)請(qǐng)勿抄襲。如發(fā)現(xiàn)課程設(shè)計(jì)抄襲，該小組所有成員成績(jī)記0分。2、課程設(shè)計(jì)必須在2019年12月20日（17周周五）前提交電子版。電子版用word格式，與可執(zhí)行程序一起，壓縮后以課程設(shè)計(jì)的題目命名，發(fā)送至任課老師指定郵箱，并在郵件中留下電話或其他聯(lián)系方式。紙質(zhì)報(bào)告雙面打印、左側(cè)裝訂，課程答辯時(shí)提交。課程答辯時(shí)間和地點(diǎn)由任課老師指定。答辯時(shí)，所有成員需到場(chǎng)參與課程答辯，接受提問。3、為保證報(bào)告格式規(guī)范和統(tǒng)一，請(qǐng)勿修改本報(bào)告的版面布局、字體、字號(hào)等格式。課程成績(jī)表項(xiàng)目評(píng)分細(xì)則成績(jī)案例質(zhì)量（60分）目標(biāo)任務(wù)45分：可視化

3、目標(biāo)明確、任務(wù)具體34分：可視化目標(biāo)基本明確、主要任務(wù)清楚03分：可視化目標(biāo)模糊、任務(wù)單一或過于簡(jiǎn)單數(shù)據(jù)處理810分：數(shù)據(jù)處理方案可行，處理結(jié)果符合可視化要求68分：數(shù)據(jù)處理方案可行，處理結(jié)果基本能滿足可視化要求06分：數(shù)據(jù)處理方案有缺陷，處理結(jié)果達(dá)不到可視化要求呈現(xiàn)方案2025分：可視化呈現(xiàn)方案合理、結(jié)果美觀1520分：可視化呈現(xiàn)方案基本合理，有確切結(jié)果015分：可視化呈現(xiàn)方案設(shè)計(jì)存在缺陷，無確切結(jié)果交互方案1215分：交互方案設(shè)計(jì)合理、功能全面、使用方便912分：交互方案設(shè)計(jì)合理、功能基本滿足可視化要求09分：交互方案過于簡(jiǎn)單、功能設(shè)計(jì)存在缺陷方案評(píng)估45分：能較全面、客觀、準(zhǔn)確地評(píng)估課程

4、設(shè)計(jì)方案34分：能在一定程度上對(duì)課程設(shè)計(jì)方案的某些方面做出評(píng)估03分：對(duì)課程設(shè)計(jì)方案的評(píng)估虛浮，缺乏有效性文檔質(zhì)量（201620分：文檔結(jié)構(gòu)完整，內(nèi)容充實(shí)，重點(diǎn)突出，撰寫規(guī)范1216分：文檔結(jié)構(gòu)基本完整，內(nèi)容較充實(shí)，規(guī)范性尚可012分：文檔結(jié)構(gòu)散亂，內(nèi)容空洞浮泛，排版混亂，員獻(xiàn)20)分成貢分佐助鳴人小櫻總分綿陽市餐飲數(shù)據(jù)可視化一、可視化目標(biāo)與任務(wù)1.可視化目標(biāo)（1）有效呈現(xiàn)數(shù)據(jù)的重要特征；（2）揭示數(shù)據(jù)的客觀規(guī)律；（3）將大量的、多維度的、不完全的、隨機(jī)的數(shù)據(jù)，通過可視化提取出隱含在其中的、未知的、潛在有用的信息和知識(shí)；（4）引導(dǎo)用戶從可視化結(jié)果分析和推理出有效信息，提升信息認(rèn)知的效率；（5）

5、美學(xué)形式與功能齊頭并進(jìn)，有效傳達(dá)與溝通信息。2.可視化任務(wù)（1）通過分析顧客與老板的需求，與餐飲店鋪評(píng)論數(shù)據(jù)建立聯(lián)系；（2）確立數(shù)據(jù)挖掘的方向，篩選出相關(guān)聯(lián)的數(shù)據(jù)，進(jìn)行處理；（3）分析、預(yù)測(cè)處理后的數(shù)據(jù)的特征、規(guī)律，尋找出與其相關(guān)聯(lián)的其他維度數(shù)據(jù)，進(jìn)行處理；（4）選擇合適的多個(gè)視圖美觀地可視化多維度數(shù)據(jù)信息，使視圖之間產(chǎn)生聯(lián)動(dòng)；（5）利用可視化交互更容易、直觀、多角度地了解數(shù)據(jù)信息。3.采用的編程語言或工具（1）編程語言：Python、JavaScript（2）代碼編輯器：PyCharmCE、VisualStudioCode（3）前端框架：React（4）前端組件樣式：AntDesign（5）

6、詞云可視化：wordcloud2.js二、數(shù)據(jù)處理方案1.數(shù)據(jù)說明（1）數(shù)據(jù)來源綿陽市某團(tuán)購網(wǎng)站2)數(shù)據(jù)規(guī)模時(shí)間：2015.1.1至2015.11.11期間數(shù)量：3623家餐飲類店鋪數(shù)據(jù)的基本信息及30572條評(píng)論信息3)數(shù)據(jù)樣本item-id:1B023099,Fm”:“圣島d啡（一代天驕店汕,starH.e,costie.O,tastiV.e.environment：7.8,l,serwiceM:7.6jreview-CounfiB條點(diǎn)評(píng)”，item_pic,:nulV,11:1啡廳|人民公園幅園路東段55號(hào)，一代天驕大廈3樓“iteni_key_cird:nulldata_idl：100

7、00602B,Juser-id:176610304,itefli.id:21015057,rating;50,tastl,:4.0,environment1:4衛(wèi).service:4,0(“tim衣“；”耽-1刖,|(review:團(tuán)購點(diǎn)評(píng)味道非常好，苕粉，方忖爭(zhēng)好，苕粉久孺不爛“，user_pic:httpiVX/iBdpfile*com/s/.img/uc/default-avatar48c48.prigIRfrecommend；null,user_name:(M_fl427579B15Hf*user_rank:1.0h(4)樣本說明店鋪基本信息表中包含：店鋪id、店鋪名稱、店鋪星級(jí)、服務(wù)

8、評(píng)分、口味評(píng)分、環(huán)境評(píng)分、評(píng)論數(shù)量、店鋪地址、店鋪類型等；評(píng)論屬性表中包含：評(píng)論id、用戶id、店鋪id、綜合評(píng)分、口味評(píng)分、環(huán)境評(píng)分、服務(wù)評(píng)分、評(píng)論內(nèi)容、評(píng)論時(shí)間、用戶名、用戶等級(jí)等。2.數(shù)據(jù)預(yù)處理店鋪基本信息表刪除表中屬性reviewcount值中的中文，僅保留數(shù)字;刪除表中兩個(gè)空值屬性item_pic和item_key_word;對(duì)表中屬性item_info的值進(jìn)行分割，分別存儲(chǔ)給兩個(gè)新的屬性item_type(存放店鋪類型)和item_address(存放店鋪地址)；評(píng)論屬性表刪除表中空值屬性recommend；統(tǒng)一修改表中屬性times值的格式為YYYYMMDD;對(duì)表中屬性revie

9、w值為團(tuán)購點(diǎn)評(píng)的評(píng)論，刪除評(píng)論開頭團(tuán)購點(diǎn)評(píng)這4個(gè)漢字;(3)效果數(shù)據(jù)預(yù)處理目的是規(guī)范化數(shù)據(jù)格式，大部分預(yù)處理后的數(shù)據(jù)后期會(huì)被數(shù)據(jù)處理工作多次使用，為此帶來了便捷性、有效性、準(zhǔn)確性、可靠性、一致性等;3.數(shù)據(jù)處理目的：便于條形圖可視化各類店鋪評(píng)論數(shù)量隨時(shí)間變化;數(shù)據(jù)：店鋪基本信息表(item_id、item_type)、評(píng)論屬性表(item_id、times);數(shù)據(jù)處理：通過屬性item_id關(guān)聯(lián)店鋪基本信息表和評(píng)論屬性表，統(tǒng)計(jì)每種店鋪類型的評(píng)論時(shí)間，并且整合每個(gè)評(píng)論時(shí)間當(dāng)天的評(píng)論數(shù)量，最后按照評(píng)論時(shí)間進(jìn)行排序;難點(diǎn)及理由：難點(diǎn)是將兩個(gè)表中的屬性聯(lián)系在一起處理，因?yàn)檫@是根據(jù)可視化需求才會(huì)想到的解

10、決方案。目的：便于環(huán)圖可視化各類店鋪各個(gè)星級(jí)比例;數(shù)據(jù)：店鋪基本信息表(star、item_type)；數(shù)據(jù)處理：統(tǒng)計(jì)每種店鋪類型不同星級(jí)的店鋪數(shù)量；難點(diǎn)及理由：一些店鋪類型的某一種星級(jí)店鋪數(shù)量為0，導(dǎo)致數(shù)據(jù)處理后僅保留下來店鋪數(shù)量大于0的星級(jí)數(shù)據(jù)；所以再次處理數(shù)據(jù)，補(bǔ)全店鋪數(shù)量為0的星級(jí)數(shù)據(jù)。目的：提高評(píng)論屬性表中屬性review值的準(zhǔn)確性；數(shù)據(jù)：評(píng)論屬性表(review);數(shù)據(jù)處理：利用Python第三方庫jieba,基于TFIDF算法的抽取出評(píng)論數(shù)據(jù)的關(guān)鍵詞，詞性限制為地名、名詞、動(dòng)名詞、動(dòng)詞；難點(diǎn)及理由：由于原數(shù)據(jù)中屬性review的值是個(gè)句子且不規(guī)范，所以需要修改成適合詞云可視化的數(shù)

11、據(jù)。目的：提高詞云可視化數(shù)據(jù)的準(zhǔn)確性；數(shù)據(jù)：店鋪基本信息表（item_id、item_type）、評(píng)論屬性表（item_id、times、review）；數(shù)據(jù)處理：根據(jù)中文分詞結(jié)果，統(tǒng)計(jì)每種店鋪類型的每個(gè)評(píng)論時(shí)間內(nèi)的不同詞出現(xiàn)的數(shù)量；難點(diǎn)及理由：為了使詞云可視化可以呈現(xiàn)出評(píng)論的熱門、冷門話題，需要提前統(tǒng)計(jì)出每個(gè)評(píng)論詞的數(shù)量。（5）目的：美化詞云可視化結(jié)果呈現(xiàn)效果；數(shù)據(jù)：店鋪基本信息表（item_id、item_type）、評(píng)論屬性表（item_id、times、review）；數(shù)據(jù)處理：利用標(biāo)準(zhǔn)差標(biāo)準(zhǔn)化（歸一化處理方法）詞云可視化數(shù)據(jù)；難點(diǎn)及理由：詞云可視化是根據(jù)詞頻來呈現(xiàn)，由于之前未標(biāo)準(zhǔn)化處

12、理的數(shù)據(jù)，會(huì)導(dǎo)致詞頻極高的詞和詞頻極小的詞顯示異常，所以需要對(duì)數(shù)據(jù)進(jìn)行歸一化處理。三、可視化呈現(xiàn)方案1.可視化布局（1）條形圖概述：條形圖是用寬度相同的條形的高度或長(zhǎng)短來表示數(shù)據(jù)多少的圖形。條形統(tǒng)計(jì)圖可以清楚地表明數(shù)量的多少，它是統(tǒng)計(jì)圖資料中最常用的圖形。按照排列方式的不同，條形圖可以橫置或縱置，縱置時(shí)也稱為柱形圖。此外，條形圖有簡(jiǎn)單條形圖、復(fù)式條形圖等形式。工作原理：使用水平的柱子顯示類別之間的數(shù)值比較。其中一個(gè)軸表示需要對(duì)比的分類維度（店鋪類型），另一個(gè)軸代表相應(yīng)的數(shù)值（評(píng)論數(shù)量）。當(dāng)用戶初始設(shè)置起始日期、終止日期，通過兩個(gè)按鈕可以設(shè)置條形圖工作的四種狀態(tài)，條形圖隨著時(shí)間軸的變化，通過降序

13、排列方式動(dòng)態(tài)調(diào)整各個(gè)店鋪類型的位置。特點(diǎn)：a.能夠使人們一眼看出各個(gè)數(shù)據(jù)的大?。籦.易于比較數(shù)據(jù)之間的差另U;c.能清楚的表示出數(shù)量的多少，辨識(shí)效果良好。合理性和有效性：對(duì)比分類數(shù)據(jù)的數(shù)值大小，當(dāng)分類情況過多時(shí)，條形圖的文本為了排布合理，需要進(jìn)行旋轉(zhuǎn)，不利于閱讀，相比于縱向條形圖，橫向柱狀圖更適用于此類分類較多的場(chǎng)景。而數(shù)據(jù)集中的店鋪類型有21種，屬于分類較多的場(chǎng)景，條形圖既能顯示各個(gè)店鋪類型之間評(píng)論數(shù)量的差異，而且隨時(shí)間軸的變化顯示信息明確，兼容性很好，擴(kuò)展性強(qiáng)，可有效顯示大量信息。（2）餅圖（環(huán)圖）概述：餅圖廣泛得應(yīng)用在各個(gè)領(lǐng)域，用于表示不同分類的占比情況，通過弧度大小來對(duì)比各種分類。餅圖

14、通過將一個(gè)圓餅按照分類的占比劃分成多個(gè)區(qū)塊，整個(gè)圓餅代表數(shù)據(jù)的總量，每個(gè)區(qū)塊（圓弧）表示該分類占總體的比例大小，所有區(qū)塊（圓?。┑募雍偷扔?00%?？梢院芎玫貛椭脩艨焖倭私鈹?shù)據(jù)的占比分配。環(huán)圖，其本質(zhì)是餅圖將中間區(qū)域挖空。工作原理：環(huán)圖根據(jù)各個(gè)部分的數(shù)據(jù)占比情況，根據(jù)比例將環(huán)形繪制成成面積不同、顏色不同的扇形，隨著給定數(shù)據(jù)集的變化，環(huán)形圖會(huì)動(dòng)態(tài)發(fā)生變化，通過篩選給定的屬性標(biāo)簽，可以可視化出不同屬性之間的數(shù)據(jù)差異。特點(diǎn)：a.用環(huán)形的面積表示部分在總體中所占的百分比；b.易于顯示每組數(shù)據(jù)相對(duì)于總數(shù)的大?。籧.易于表達(dá)各個(gè)部分的數(shù)量差異。合理性和有效性：餅圖的整體性太強(qiáng)，會(huì)將注意力集中在比較餅圖內(nèi)

15、各個(gè)扇形之間占整體比重的關(guān)系。但如果將兩個(gè)餅圖放在一起，餅圖很難同時(shí)對(duì)比兩個(gè)圖。環(huán)圖在解決上述問題時(shí)，采用了讓用戶更關(guān)注長(zhǎng)度而不是面積的做法。這樣就能相對(duì)簡(jiǎn)單的對(duì)比不同的環(huán)圖。同時(shí)環(huán)圖相對(duì)于餅圖空間的利用率更高，比如我們可以使用它的空心區(qū)域顯示文本信息，比如標(biāo)題等。此外，環(huán)圖美觀、簡(jiǎn)潔方面比基礎(chǔ)餅圖更勝一籌。（3）詞云圖概述：詞云就是通過形成“關(guān)鍵詞云層”或“關(guān)鍵詞渲染”，對(duì)數(shù)據(jù)集文本中出現(xiàn)頻率較高的“關(guān)鍵詞”的視覺上的突出。詞云圖過濾掉大量的文本信息，某種程度上提供了“第一印象”，權(quán)重最高的詞一目了然，使用戶只要一眼掃過文本就可以領(lǐng)略文本的主旨。工作原理：詞云使用字體的大小與顏色對(duì)關(guān)鍵詞的重

16、要性進(jìn)行編碼。越重要（權(quán)重越大）的關(guān)鍵詞的字體越大。根據(jù)用戶需求進(jìn)行文本處理；以合適的視覺編碼和視覺布局方式呈現(xiàn)文本特征；不同用戶感興趣的部分可能各不相同，通過其他視圖的交互，可以聯(lián)動(dòng)詞云，提供了在可視化視圖中瀏覽和探索感興趣部分的手段。特點(diǎn)：a.快速感知最突出的文字；b.快速定位按權(quán)重順序排列的文字中相對(duì)突出的部分；c.可以從不同維度展現(xiàn)數(shù)據(jù)：詞匯本身、頻率（詞匯大?。?、以及詞匯的顏色；d.相比其他視圖吸引注意力；e.占用排版空間；f.相同大小的詞匯很難比較，人眼不擅長(zhǎng)于分辨區(qū)域活詞匯的大小。合理性和有效性：由于評(píng)論內(nèi)容數(shù)都為中文長(zhǎng)句，對(duì)其數(shù)據(jù)處理（提取關(guān)鍵詞）后，非常適合利用詞云來呈現(xiàn)文本

17、核心信息。不同的用戶對(duì)信息的理解和需求各不相同，數(shù)據(jù)集中中評(píng)論內(nèi)容的關(guān)鍵詞就是介紹該店鋪類型的核心內(nèi)容，而詞云可以在大量數(shù)據(jù)下篩選有效的關(guān)鍵詞來展示，并且突出顯示權(quán)重更高的關(guān)鍵詞，極大程度滿足用戶的需求。2.可視化編碼（1）標(biāo)記標(biāo)記定義為用來映射數(shù)據(jù)的幾何單元，例如點(diǎn)、線、面、立方體和橢圓等。標(biāo)記可以用維度來區(qū)分。一維的標(biāo)記是點(diǎn)；二維的標(biāo)記有曲線和平面標(biāo)記，包括方形、長(zhǎng)方形、圓形和橢圓形；三維的標(biāo)記包括三維的面和體，如立方體、球面、橢球面和橢球體。本次課程設(shè)計(jì)用的標(biāo)記主要是是二維標(biāo)記中的平面標(biāo)記。（2）G2視覺通道的設(shè)計(jì)position（位置），二維坐標(biāo)系內(nèi)可以映射到x,y,三維坐標(biāo)系可以映射

18、到x,y,zcolor（顏色），包含了色調(diào)、飽和度和亮度size（大?。?，不同的幾何圖形對(duì)大小的定義有所差異shape（形狀），幾何圖形的形狀決定了某個(gè)圖表類型的表現(xiàn)方式。例如點(diǎn)圖，可以使用圓點(diǎn)、三角形、小的圖片表示；線圖可以使用折線、曲線、點(diǎn)線等表現(xiàn)形式opacity（透明度），圖形的透明度，這個(gè)屬性從某種意義上來說可以使用顏色代替，需要使用rgba的形式，所以在G2中我們獨(dú)立出來。（3）標(biāo)記和視覺通道的優(yōu)先級(jí)條形圖中，優(yōu)先級(jí)為：size（大?。?、position（位置）、color（顏色）、shape（形狀）、opacity（透明度）；因?yàn)殚L(zhǎng)度（即大?。┦堑湫偷亩恳曈X通道，用戶直覺地用長(zhǎng)

19、度去描述同一數(shù)據(jù)屬性的不同的值，且該視圖呈現(xiàn)數(shù)據(jù)是排序之后的，用戶直覺地用位置去描述同一數(shù)據(jù)屬性的不同的值，各個(gè)類型又由不同顏色表示；環(huán)形圖中，優(yōu)先級(jí)為：size（大?。?、shape（形狀）、position（位置）、color（顏色）、opacity（透明度）；因?yàn)槊娣e（即大小）是典型的定量視覺通道，而用戶直覺地用面積去描述同一數(shù)據(jù)屬性的不同的值，且該視圖呈現(xiàn)數(shù)據(jù)也是排序之后的，各個(gè)類型由不同顏色表示；詞云中，優(yōu)先級(jí)為：size（大小）、shape（形狀）、position（位置）、color（顏色）、opacity（透明度）；詞云呈現(xiàn)的效果主要跟詞頻有關(guān)，而詞頻越高，顯示的size就越大。

20、3.可視化呈現(xiàn)結(jié)果（1）條形圖（評(píng)論數(shù)量可視化）該視圖通過設(shè)置起始時(shí)間、終止時(shí)間，以及選擇4種速度之一，可以呈現(xiàn)出綿陽市各類餐飲評(píng)論數(shù)量排名前10的店鋪類型，隨時(shí)間軸的變化。（2）環(huán)圖（店鋪星級(jí)數(shù)量可視化）該視圖可視化了綿陽市各個(gè)星級(jí)店鋪數(shù)量的比例，以及各個(gè)店鋪類型的各個(gè)星級(jí)店鋪數(shù)量的比例。（3）詞云（時(shí)間段內(nèi)詞云）該視圖可視化了綿陽市所有店鋪熱門評(píng)論的詞云，以及各個(gè)類型的店鋪熱門評(píng)論的詞云，詞頻越高顯示的字體越顯著、尺寸越大。4）選擇列表（餐館類型）該選擇器主要功能是可以選擇綿陽市所有的店鋪類型，和環(huán)圖、詞云產(chǎn)生聯(lián)動(dòng)。5）可視化呈現(xiàn)界面圖四、可視化交互方案可視化交互模型和方法（1）選擇用戶可

21、以選擇自己想要的時(shí)間段，從而分析出時(shí)間段內(nèi)的一些信息。用戶可能需要關(guān)注春夏秋冬或者不同的時(shí)間段上的數(shù)據(jù)。（2）過濾用戶可以只看某種餐飲類型。因?yàn)橛脩艨赡苤粚?duì)某一種類型感興趣。在展示餐館星級(jí)數(shù)量的環(huán)形圖上，用戶可以選擇過濾出自己想要的星級(jí)。（3）探索用戶可以主動(dòng)尋找并調(diào)用可視化程序去尋找感興趣的數(shù)據(jù)。在探索過程中，通常需要在可視化中就會(huì)加入新數(shù)據(jù)或者去除不相關(guān)的數(shù)據(jù)。（4）布局用戶看到的條形圖、環(huán)圖、詞云可視化結(jié)果都會(huì)依靠排序算法。可視化交互結(jié)果1)選擇2)2015-01-01-2015-02-12五H四五為30234n了2930&137S曲101123456761213141516171B9W

22、111131415ig20212223242S116171B1920212226272829303123242526272B44呂3)布局五、方案評(píng)估1)自我評(píng)估本次課程設(shè)計(jì)達(dá)到了預(yù)期目標(biāo)，基本完成了設(shè)計(jì)任務(wù)優(yōu)點(diǎn)：利用少量的數(shù)據(jù)屬性深入地挖掘出許多新的、有價(jià)值的信息；利用多個(gè)視圖來關(guān)聯(lián)同一層次的多個(gè)數(shù)據(jù)屬性；各個(gè)視圖的交互性以及視圖之間的交互性是反復(fù)修改后的精心設(shè)計(jì)，許多細(xì)節(jié)都是為了提高用戶體驗(yàn)，視圖之間達(dá)到了聯(lián)動(dòng)性，增加界面活力，讓用戶認(rèn)知過程更為自然。例1：條形圖的兩個(gè)按鈕代表四種狀態(tài)，帶有明確的目的性，互相不產(chǎn)生沖突，助力交互體驗(yàn)；例2：餐館類型選擇器是為了布局美觀增加的，簡(jiǎn)單的功能猶如畫龍點(diǎn)睛；選用點(diǎn)擊而不是觸摸來觸發(fā)視圖變化，也是