《数据可视化》课程设计-西南科技大学

1、西南科技大学计算机学院20192020学年第1学期本科生课程数据可视化课程设计绵阳市餐饮数据可视化组长：佐助木叶村组员：鸣人木叶村组员:小樱木叶村指导老师：2019年11月课程设计说明和要求本课程设计依据西南科技大学本科生课程数据可视化的教学大纲要求制定。课程设计满分为100分，占数据可视化课程考核成绩的60%。要求所有选课学生严格按照要求完成课程设计，按时提交课程设计报告和可执行程序，并参加小组答辩。具体要求如下：一、各组学生自行收集用于课程设计的数据，采用D3、Processing或其他可视化软件和工具，独立完成一个数据可视化案例。教师根据各小组提交的案例质量、文档质量、成员贡献三个方面给

2、出分数。具体要求和评分细则见下页课程成绩表。二、课程设计撰写及提交注意事项1、课程设计请勿抄袭。如发现课程设计抄袭，该小组所有成员成绩记0分。2、课程设计必须在2019年12月20日（17周周五）前提交电子版。电子版用word格式，与可执行程序一起，压缩后以课程设计的题目命名，发送至任课老师指定邮箱，并在邮件中留下电话或其他联系方式。纸质报告双面打印、左侧装订，课程答辩时提交。课程答辩时间和地点由任课老师指定。答辩时，所有成员需到场参与课程答辩，接受提问。3、为保证报告格式规范和统一，请勿修改本报告的版面布局、字体、字号等格式。课程成绩表项目评分细则成绩案例质量（60分）目标任务45分：可视化

3、目标明确、任务具体34分：可视化目标基本明确、主要任务清楚03分：可视化目标模糊、任务单一或过于简单数据处理810分：数据处理方案可行，处理结果符合可视化要求68分：数据处理方案可行，处理结果基本能满足可视化要求06分：数据处理方案有缺陷，处理结果达不到可视化要求呈现方案2025分：可视化呈现方案合理、结果美观1520分：可视化呈现方案基本合理，有确切结果015分：可视化呈现方案设计存在缺陷，无确切结果交互方案1215分：交互方案设计合理、功能全面、使用方便912分：交互方案设计合理、功能基本满足可视化要求09分：交互方案过于简单、功能设计存在缺陷方案评估45分：能较全面、客观、准确地评估课程

4、设计方案34分：能在一定程度上对课程设计方案的某些方面做出评估03分：对课程设计方案的评估虚浮，缺乏有效性文档质量（201620分：文档结构完整，内容充实，重点突出，撰写规范1216分：文档结构基本完整，内容较充实，规范性尚可012分：文档结构散乱，内容空洞浮泛，排版混乱，员献20)分成贡分佐助鸣人小樱总分绵阳市餐饮数据可视化一、可视化目标与任务1.可视化目标（1）有效呈现数据的重要特征；（2）揭示数据的客观规律；（3）将大量的、多维度的、不完全的、随机的数据，通过可视化提取出隐含在其中的、未知的、潜在有用的信息和知识；（4）引导用户从可视化结果分析和推理出有效信息，提升信息认知的效率；（5）

5、美学形式与功能齐头并进，有效传达与沟通信息。2.可视化任务（1）通过分析顾客与老板的需求，与餐饮店铺评论数据建立联系；（2）确立数据挖掘的方向，筛选出相关联的数据，进行处理；（3）分析、预测处理后的数据的特征、规律，寻找出与其相关联的其他维度数据，进行处理；（4）选择合适的多个视图美观地可视化多维度数据信息，使视图之间产生联动；（5）利用可视化交互更容易、直观、多角度地了解数据信息。3.采用的编程语言或工具（1）编程语言：Python、JavaScript（2）代码编辑器：PyCharmCE、VisualStudioCode（3）前端框架：React（4）前端组件样式：AntDesign（5）

6、词云可视化：wordcloud2.js二、数据处理方案1.数据说明（1）数据来源绵阳市某团购网站2)数据规模时间：2015.1.1至2015.11.11期间数量：3623家餐饮类店铺数据的基本信息及30572条评论信息3)数据样本item-id:1B023099,Fm”:“圣岛d啡（一代天骄店汕,starH.e,costie.O,tastiV.e.environment：7.8,l,serwiceM:7.6jreview-CounfiB条点评”，item_pic,:nulV,11:1啡厅|人民公园幅园路东段55号，一代天骄大厦3楼“iteni_key_cird:nulldata_idl：100

7、00602B,Juser-id:176610304,itefli.id:21015057,rating;50,tastl,:4.0,environment1:4卫.service:4,0(“tim衣“；”耽-1刖,|(review:团购点评味道非常好，苕粉，方忖爭好，苕粉久孺不烂“，user_pic:httpiVX/iBdpfile*com/s/.img/uc/default-avatar48c48.prigIRfrecommend；null,user_name:(M_fl427579B15Hf*user_rank:1.0h(4)样本说明店铺基本信息表中包含：店铺id、店铺名称、店铺星级、服务

8、评分、口味评分、环境评分、评论数量、店铺地址、店铺类型等；评论属性表中包含：评论id、用户id、店铺id、综合评分、口味评分、环境评分、服务评分、评论内容、评论时间、用户名、用户等级等。2.数据预处理店铺基本信息表删除表中属性reviewcount值中的中文，仅保留数字;删除表中两个空值属性item_pic和item_key_word;对表中属性item_info的值进行分割，分别存储给两个新的属性item_type(存放店铺类型)和item_address(存放店铺地址)；评论属性表删除表中空值属性recommend；统一修改表中属性times值的格式为YYYYMMDD;对表中属性revie

9、w值为团购点评的评论，删除评论开头团购点评这4个汉字;(3)效果数据预处理目的是规范化数据格式，大部分预处理后的数据后期会被数据处理工作多次使用，为此带来了便捷性、有效性、准确性、可靠性、一致性等;3.数据处理目的：便于条形图可视化各类店铺评论数量随时间变化;数据：店铺基本信息表(item_id、item_type)、评论属性表(item_id、times);数据处理：通过属性item_id关联店铺基本信息表和评论属性表，统计每种店铺类型的评论时间，并且整合每个评论时间当天的评论数量，最后按照评论时间进行排序;难点及理由：难点是将两个表中的属性联系在一起处理，因为这是根据可视化需求才会想到的解

10、决方案。目的：便于环图可视化各类店铺各个星级比例;数据：店铺基本信息表(star、item_type)；数据处理：统计每种店铺类型不同星级的店铺数量；难点及理由：一些店铺类型的某一种星级店铺数量为0，导致数据处理后仅保留下来店铺数量大于0的星级数据；所以再次处理数据，补全店铺数量为0的星级数据。目的：提高评论属性表中属性review值的准确性；数据：评论属性表(review);数据处理：利用Python第三方库jieba,基于TFIDF算法的抽取出评论数据的关键词，词性限制为地名、名词、动名词、动词；难点及理由：由于原数据中属性review的值是个句子且不规范，所以需要修改成适合词云可视化的数

11、据。目的：提高词云可视化数据的准确性；数据：店铺基本信息表（item_id、item_type）、评论属性表（item_id、times、review）；数据处理：根据中文分词结果，统计每种店铺类型的每个评论时间内的不同词出现的数量；难点及理由：为了使词云可视化可以呈现出评论的热门、冷门话题，需要提前统计出每个评论词的数量。（5）目的：美化词云可视化结果呈现效果；数据：店铺基本信息表（item_id、item_type）、评论属性表（item_id、times、review）；数据处理：利用标准差标准化（归一化处理方法）词云可视化数据；难点及理由：词云可视化是根据词频来呈现，由于之前未标准化处

12、理的数据，会导致词频极高的词和词频极小的词显示异常，所以需要对数据进行归一化处理。三、可视化呈现方案1.可视化布局（1）条形图概述：条形图是用宽度相同的条形的高度或长短来表示数据多少的图形。条形统计图可以清楚地表明数量的多少，它是统计图资料中最常用的图形。按照排列方式的不同，条形图可以横置或纵置，纵置时也称为柱形图。此外，条形图有简单条形图、复式条形图等形式。工作原理：使用水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度（店铺类型），另一个轴代表相应的数值（评论数量）。当用户初始设置起始日期、终止日期，通过两个按钮可以设置条形图工作的四种状态，条形图随着时间轴的变化，通过降序

13、排列方式动态调整各个店铺类型的位置。特点：a.能够使人们一眼看出各个数据的大小；b.易于比较数据之间的差另U;c.能清楚的表示出数量的多少，辨识效果良好。合理性和有效性：对比分类数据的数值大小，当分类情况过多时，条形图的文本为了排布合理，需要进行旋转，不利于阅读，相比于纵向条形图，横向柱状图更适用于此类分类较多的场景。而数据集中的店铺类型有21种，属于分类较多的场景，条形图既能显示各个店铺类型之间评论数量的差异，而且随时间轴的变化显示信息明确，兼容性很好，扩展性强，可有效显示大量信息。（2）饼图（环图）概述：饼图广泛得应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类。饼图

14、通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于100%。可以很好地帮助用户快速了解数据的占比分配。环图，其本质是饼图将中间区域挖空。工作原理：环图根据各个部分的数据占比情况，根据比例将环形绘制成成面积不同、颜色不同的扇形，随着给定数据集的变化，环形图会动态发生变化，通过筛选给定的属性标签，可以可视化出不同属性之间的数据差异。特点：a.用环形的面积表示部分在总体中所占的百分比；b.易于显示每组数据相对于总数的大小；c.易于表达各个部分的数量差异。合理性和有效性：饼图的整体性太强，会将注意力集中在比较饼图内

15、各个扇形之间占整体比重的关系。但如果将两个饼图放在一起，饼图很难同时对比两个图。环图在解决上述问题时，采用了让用户更关注长度而不是面积的做法。这样就能相对简单的对比不同的环图。同时环图相对于饼图空间的利用率更高，比如我们可以使用它的空心区域显示文本信息，比如标题等。此外，环图美观、简洁方面比基础饼图更胜一筹。（3）词云图概述：词云就是通过形成“关键词云层”或“关键词渲染”，对数据集文本中出现频率较高的“关键词”的视觉上的突出。词云图过滤掉大量的文本信息，某种程度上提供了“第一印象”，权重最高的词一目了然，使用户只要一眼扫过文本就可以领略文本的主旨。工作原理：词云使用字体的大小与颜色对关键词的重

16、要性进行编码。越重要（权重越大）的关键词的字体越大。根据用户需求进行文本处理；以合适的视觉编码和视觉布局方式呈现文本特征；不同用户感兴趣的部分可能各不相同，通过其他视图的交互，可以联动词云，提供了在可视化视图中浏览和探索感兴趣部分的手段。特点：a.快速感知最突出的文字；b.快速定位按权重顺序排列的文字中相对突出的部分；c.可以从不同维度展现数据：词汇本身、频率（词汇大小）、以及词汇的颜色；d.相比其他视图吸引注意力；e.占用排版空间；f.相同大小的词汇很难比较，人眼不擅长于分辨区域活词汇的大小。合理性和有效性：由于评论内容数都为中文长句，对其数据处理（提取关键词）后，非常适合利用词云来呈现文本

17、核心信息。不同的用户对信息的理解和需求各不相同，数据集中中评论内容的关键词就是介绍该店铺类型的核心内容，而词云可以在大量数据下筛选有效的关键词来展示，并且突出显示权重更高的关键词，极大程度满足用户的需求。2.可视化编码（1）标记标记定义为用来映射数据的几何单元，例如点、线、面、立方体和椭圆等。标记可以用维度来区分。一维的标记是点；二维的标记有曲线和平面标记，包括方形、长方形、圆形和椭圆形；三维的标记包括三维的面和体，如立方体、球面、椭球面和椭球体。本次课程设计用的标记主要是是二维标记中的平面标记。（2）G2视觉通道的设计position（位置），二维坐标系内可以映射到x,y,三维坐标系可以映射

18、到x,y,zcolor（颜色），包含了色调、饱和度和亮度size（大小），不同的几何图形对大小的定义有所差异shape（形状），几何图形的形状决定了某个图表类型的表现方式。例如点图，可以使用圆点、三角形、小的图片表示；线图可以使用折线、曲线、点线等表现形式opacity（透明度），图形的透明度，这个属性从某种意义上来说可以使用颜色代替，需要使用rgba的形式，所以在G2中我们独立出来。（3）标记和视觉通道的优先级条形图中，优先级为：size（大小）、position（位置）、color（颜色）、shape（形状）、opacity（透明度）；因为长度（即大小）是典型的定量视觉通道，用户直觉地用长

19、度去描述同一数据属性的不同的值，且该视图呈现数据是排序之后的，用户直觉地用位置去描述同一数据属性的不同的值，各个类型又由不同颜色表示；环形图中，优先级为：size（大小）、shape（形状）、position（位置）、color（颜色）、opacity（透明度）；因为面积（即大小）是典型的定量视觉通道，而用户直觉地用面积去描述同一数据属性的不同的值，且该视图呈现数据也是排序之后的，各个类型由不同颜色表示；词云中，优先级为：size（大小）、shape（形状）、position（位置）、color（颜色）、opacity（透明度）；词云呈现的效果主要跟词频有关，而词频越高，显示的size就越大。

20、3.可视化呈现结果（1）条形图（评论数量可视化）该视图通过设置起始时间、终止时间，以及选择4种速度之一，可以呈现出绵阳市各类餐饮评论数量排名前10的店铺类型，随时间轴的变化。（2）环图（店铺星级数量可视化）该视图可视化了绵阳市各个星级店铺数量的比例，以及各个店铺类型的各个星级店铺数量的比例。（3）词云（时间段内词云）该视图可视化了绵阳市所有店铺热门评论的词云，以及各个类型的店铺热门评论的词云，词频越高显示的字体越显著、尺寸越大。4）选择列表（餐馆类型）该选择器主要功能是可以选择绵阳市所有的店铺类型，和环图、词云产生联动。5）可视化呈现界面图四、可视化交互方案可视化交互模型和方法（1）选择用户可

21、以选择自己想要的时间段，从而分析出时间段内的一些信息。用户可能需要关注春夏秋冬或者不同的时间段上的数据。（2）过滤用户可以只看某种餐饮类型。因为用户可能只对某一种类型感兴趣。在展示餐馆星级数量的环形图上，用户可以选择过滤出自己想要的星级。（3）探索用户可以主动寻找并调用可视化程序去寻找感兴趣的数据。在探索过程中，通常需要在可视化中就会加入新数据或者去除不相关的数据。（4）布局用户看到的条形图、环图、词云可视化结果都会依靠排序算法。可视化交互结果1)选择2)2015-01-01-2015-02-12五H四五為30234n了2930&137S曲101123456761213141516171B9W

22、111131415ig20212223242S116171B1920212226272829303123242526272B44吕3)布局五、方案评估1)自我评估本次课程设计达到了预期目标，基本完成了设计任务优点：利用少量的数据属性深入地挖掘出许多新的、有价值的信息；利用多个视图来关联同一层次的多个数据属性；各个视图的交互性以及视图之间的交互性是反复修改后的精心设计，许多细节都是为了提高用户体验，视图之间达到了联动性，增加界面活力，让用户认知过程更为自然。例1：条形图的两个按钮代表四种状态，带有明确的目的性，互相不产生冲突，助力交互体验；例2：餐馆类型选择器是为了布局美观增加的，简单的功能犹如画龙点睛；选用点击而不是触摸来触发视图变化，也是