数据可视化课程设计

西南科技大学计算机学院20192020学年

第1学期本科生课程

《数据可视化》课程设计

绵阳市餐饮数据可视化

组长：佐助

木叶村

组员：鸣人

木叶村

as：____________

木叶村

指导老师：

2019年11月

课程设计说明和要求

本课程设计依据西南科技大学本科生课程《数据可视化》的教学

大纲要求制定。课程设计满分为100分，占《数据可视化》课程考核

成绩的60%o要求所有选课学生严格按照要求完成课程设计，按时提

交课程设计报告和可执行程序，并参加小组答辩。具体要求如下：

一、各组学生自行收集用于课程设计的数据，采用D3、Processing或

其他可视化软件和工具，独立完成一个数据可视化案例。教师根据各

小组提交的案例质量、文档质量、成员贡献三个方面给出分数。具体

要求和评分细则见下页《课程成绩表》。

二、课程设计撰写及提交注意事项

1、课程设计请勿抄袭。如发现课程设计抄袭，该小组所有成员成绩

记。分。

2、课程设计必须在2019年12月20日（17周周五）前提交电子版。

电子版用word格式，与可执行程序一起，压缩后以课程设计的题目

命名，发送至任课老师指定邮箱，并在邮件中留下电话或其他联系方

式。纸质报告双面打印、左侧装订，课程答辩时提交。课程答辩时间

和地点由任课老师指定。答辩时，所有成员需到场参与课程答辩，接

受提问。

3、为保证报告格式规范和统一，请勿修改本报告的版面布局、字体、

字号等格式。

课程成绩表

项目评分细则成绩

45分：可视化目标明确、任务具体

目标

34分：可视化目标基本明确、主要任务清楚

任务

03分：可视化目标模糊、任务单一或过于简单

810分：数据处理方案可行，处理结果符合可视化要求

数据68分：数据处理方案可行，处理结果基本能满足可视化要

处理

06分：数据处理方案有缺陷，处理结果达不到可视化要求

案例

2025分：可视化呈现方案合理、结果美观

质量呈现

1520分：可视化呈现方案基本合理，有确切结果

方案

（60

015分：可视化呈现方案设计存在缺陷，无确切结果

分）

1215分：交互方案设计合理、功能全面、使用方便

交互

912分：交互方案设计合理、功能基本满足可视化要求

方案

09分：交互方案过于简单、功能设计存在缺陷

45分：能较全面、客观、准确地评估课程设计方案

方案34分：能在一定程度上对课程设计方案的某些方面做出评

评估

03分：对课程设计方案的评估虚浮，缺乏有效性

文档1620分：文档结构完整，内容充实，重点突出，撰写规范

质量1216分：文档结构基本完整，内容较充实，规范性尚可

（20012分：文档结构散乱，内容空洞浮泛，排版混乱

分）

成员

佐助鸣人小樱

贡献

（20

分）

总分

绵阳市餐饮数据可视化

一、可视化目标与任务

1.可视化目标

(1)有效呈现数据的重要特征；

(2)揭示数据的客观规律；

(3)将大量的、多维度的、不完全的、随机的数据，通过可视化提取出隐含

在其中的、未知的、潜在有用的信息和知识；

(4)引导用户从可视化结果分析和推理出有效信息，提升信息认知的效率；

(5)美学形式与功能齐头并进，有效传达与沟通信息。

2.可视化任务

(1)通过分析顾客与老板的需求，与餐饮店铺评论数据建立联系；

(2)确立数据挖掘的方向，筛选出相关联的数据，进行处理；

(3)分析、预测处理后的数据的特征、规律，寻找出与其相关联的其他维度

数据，进行处理；

(4)选择合适的多个视图美观地可视化多维度数据信息，使视图之间产生联

动；

(5)利用可视化交互更容易、直观、多角度地了解数据信息。

3.采用的编程语言或工具

(1)编程语言:Python、JavaScript

(2)代码编辑器：PyCharmCE>VisualStudioCode

(3)前端框架：React

(4)前端组件样式：AntDesign

(5)词云可视化：wordcloud2.js

二、数据处理方案

1.数据说明

(1)数据来源

绵阳市某团购网站

(2)数据规模

时间:2015.1.1至2015.11.11期间

数量：3623家餐饮类店铺数据的基本信息及30572条评论信息。

(3)数据样本

10023099",

HnameM:"圣岛咖啡（一代天骄店）”,

“star”：4・0,

“cost”：。.。,

,,M

tast:7.6f

'•environment":7.8,

HserviceH:7.6,

,,review.count,,:,148条点评”，

,,,,

item_pic:nullr

咖啡厅|人民公园临园路东段55号，一代天骄大厦3楼”,

“item_key_word”:null

},

“data_id“：“100008028”,

“usejid“：“176610304”,

Hitem_idM:H21015857'\

M

rating":50.0r

“tast”：4・0,

“environment”:%。,

“service”:%。，

“times"”02-19”,

“review"：“团购点评味道非常好，谷粉，方竹羿好，苕粉久煮不烂”，

•'user_picH:Hhttp:\/\/\/s\/img\/uc\/default-avatar48c48.png'\

“recommend"：null,

HH,,n

user-name:QQ_0427579815,

Huser_rankH:1.0

},

(4)样本说明

a.店铺基本信息表中包含：店铺id、店铺名称、店铺星级、服务评分、

口味评分、环境评分、评论数量、店铺地址、店铺类型等；

b.评论属性表中包含：评论id、用户id、店铺id、综合评分、口味评

分、环境评分、服务评分、评论内容、评论时间、用户名、用户等级

等。

2.数据预处理

(1)店铺基本信息表

a.删除表中属性"review_count"值中的中文，仅保留数字：

b.删除表中两个空值属性"item_pic"和"item_key_word";

c.对表中属性"item_infb"的值进行分割，分别存储给两个新的属性

"item_type"(存放店铺类型)和"item_address"(存放店铺地址)；

(2)评论属性表

a.删除表中空值属性"recommend";

b.统一修改表中属性"times"值的格式为"YYYYMMDD";

c.对表中属性"review"值为团购点评的评论，删除评论开头"团购点评"

这4个汉字；

(3)效果

数据预处理目的是规范化数据格式，大部分预处理后的数据后期会被数

据处理工作多次使用，为此带来了便捷性、有效性、准确性、可靠性、

一致性等；

3.数据处理

(1)目的：便于条形图可视化各类店铺评论数量随时间变化；

数据：店铺基本信息表("item_id">"item_type")>评论属性表

("item_id'\"times"):

数据处理：通过属性"item_id"关联店铺基本信息表和评论属性表，统计

每种店铺类型的评论时间，并且整合每个评论时间当天的评论数量，最

后按照评论时间进行排序：

难点及理由：难点是将两个表中的属性联系在一起处理，因为这是根据

可视化需求才会想到的解决方案。

(2)目的：便于环图可视化各类店铺各个星级比例；

数据:店铺基本信息表("star">"item_type");

数据处理：统计每种店铺类型不同星级的店铺数量；

难点及理由：一些店铺类型的某一种星级店铺数量为0,导致数据处理

后仅保留下来店铺数量大于0的星级数据；所以再次处理数据，补全店

铺数量为0的星级数据。

(3)目的：提高评论属性表中属性"review"值的准确性；

数据：评论属性表("review")；

数据处理：利用Python第三方库jieba,基于TFIDF算法的抽取出评论

数据的关键词，词性限制为地名、名词、动名词、动词；

难点及理由：由于原数据中属性"review"的值是个句子且不规范，所以需

栗修改成适合词云可视化的数据。

(4)目的：提高词云可视化数据的准确性;

数据：店铺基本信息表("item_id">"item_type")>评论属性表

("item_id">"times'\"review");

数据处理：根据中文分词结果，统计每种店铺类型的每个评论时间内的

不同词出现的数量；

难点及理由：为了使词云可视化可以呈现出评论的热门、冷门话题，需

要提前统计出每个评论词的数量。

(5)目的：美化词云可视化结果呈现效果；

数据：店铺基本信息表("item_id"、"item_type")、评论属性表

("itemid","times","review");

数据处理：利用标准差标准化(归一化处理方法)词云可视化数据；

难点及理由：词云可视化是根据词频来呈现，由于之前未标准化处理的

数据，会导致词频极高的词和词频极小的词显示异常，所以需要对数据

进行归一化处理。

三、可视化呈现方案

1.可视化布局

(1)条形图

概述：条形图是用宽度相同的条形的高度或长短来表示数据多少的图

形。条形统计图可以清楚地表明数量的多少，它是统计图资料中最常用

的图形。按照排列方式的不同，条形图可以横置或纵置，纵置时也称为

柱形图。此外，条形图有简单条形图、复式条形图等形式。

工作原理：使用水平的柱子显示类别之间的数值比较。其中一个轴表示

需要对比的分类维度(店铺类型)，另一个轴代表相应的数值(评论数

量)。当用户初始设置起始日期、终止日期，通过两个按钮可以设置条形

图工作的四种状态，条形图随着时间轴的变化，通过降序排列方式动态

调整各个店铺类型的位置。

特点：a.能够使人们一眼看出各个数据的大小；b,易于比较数据之间的差

另卜c.能清楚的表示出数量的多少，辨识效果良好。

合理性和有效性：对比分类数据的数值大小，当分类情况过多时，条形

图的文本为了排布合理，需要进行旋转，不利于阅读，相比于纵向条形

图，横向柱状图更适用于此类分类较多的场景。而数据集中的店铺类型

有21种，属于分类较多的场景，条形图既能显示各个店铺类型之间评论

数量的差异，而且随时间轴的变化显示信息明确，兼容性很好，扩展性

强，可有效显示大量信息。

(2)饼图(环图)

概述：饼图广泛得应用在各个领域，用于表示不同分类的占比情况，通

过弧度大小来对比各种分类。饼图通过将一个圆饼按照分类的占比划分

成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类

占总体的比例大小，所有区块（圆弧）的加和等于100%。可以很好地

帮助用户快速了解数据的占比分配。环图，其本质是饼图将中间区域挖

空。

工作原理：环图根据各个部分的数据占比情况，根据比例将环形绘制成

成面积不同、颜色不同的扇形，随着给定数据集的变化，环形图会动态

发生变化，通过筛选给定的属性标签，可以可视化出不同属性之间的数

据差异。

特点：a.用环形的面积表示部分在总体中所占的百分比；b.易于显示每组

数据相对于总数的大小；c.易于表达各个部分的数量差异。

合理性和有效性：饼图的整体性太强，会将注意力集中在比较饼图内各

个扇形之间占整体比重的关系。但如果将两个饼图放在一起，饼图很难

同时对比两个图。环图在解决上述问题时，采用了让用户更关注长度而

不是面积的做法。这样就能相对简单的对比不同的环图。同时环图相对

于饼图空间的利用率更高，比如我们可以使用它的空心区域显示文本信

息，比如标题等。此外，环图美观、简洁方面比基础饼图更胜一筹。

（3）词云图

概述：词云就是通过形成“关键词云层”或“关键词渲染”，对数据集文

本中出现频率较高的“关键词”的视觉上的突出。词云图过滤掉大量的

文本信息，某种程度上提供了“第一印象”，权重最高的词一目了然，使

用户只要一眼扫过文本就可以领略文本的主旨。

工作原理：词云使用字体的大小与颜色对关键词的重要性进行编码。越

重要（权重越大）的关键词的字体越大。根据用户需求进行文本处理；

以合适的视觉编码和视觉布局方式呈现文本特征；不同用户感兴趣的部

分可能各不相同，通过其他视图的交互，可以联动词云，提供了在可视

化视图中浏览和探索感兴趣部分的手段。

特点：a.快速感知最突出的文字：b.快速定位按权重顺序排列的文字中相

对突出的部分；c.可以从不同维度展现数据：词汇本身、频率（词汇大

小）、以及词汇的颜色：d.相比其他视图吸引注意力：e.占用排版空间；f.

相同大小的词汇很难比较，人眼不擅长于分辨区域活词汇的大小。

合理性和有效性：由于评论内容数都为中文长句，对其数据处理（提取

关键词）后，非常适合利用词云来呈现文本核心信息。不同的用户对信

息的理解和需求各不相同，数据集中中评论内容的关键词就是介绍该店

铺类型的核心内容，而词云可以在大量数据下筛选有效的关键词来展

示，并且突出显示权重更高的关键词，极大程度满足用户的需求。

2.可视化编码

（1）标记

标记定义为用来映射数据的几何单元，例如点、线、面、立方体和椭圆

等。标记可以用维度来区分。一维的标记是点；二维的标记有曲线和平

面标记，包括方形、长方形、圆形和椭圆形；三维的标记包括三维的面

和体，如立方体、球面、椭球面和椭球体。本次课程设计用的标记主要

是是二维标记中的平面标记。

（2）G2视觉通道的设计

,position（位置），二维坐标系内可以映射到x,y,三维坐标系可以映

射到x,y,z

,color（颜色），包含了色调、饱和度和亮度

•size（大小），不同的几何图形对大小的定义有所差异

•shape（形状），几何图形的形状决定了某个图表类型的表现方式。例

如点图，可以使用圆点、三角形、小的图片表示；线图可以使用折

线、曲线、点线等表现形式

•opacity（透明度），图形的透明度，这个属性从某种意义上来说可以

使用颜色代替，需栗使用'rgba'的形式，所以在G2中我们独立出

来。

（3）标记和视觉通道的优先级

a.条形图中，优先级为：size（大小）、position（位置）、color（颜色）、

shape（形状）、opacity（透明度）；因为长度（即大小）是典型的定

量视觉通道，用户直觉地用长度去描述同一数据属性的不同的值，且

该视图呈现数据是排序之后的，用户直觉地用位置去描述同一数据属

性的不同的值，各个类型又由不同颜色表示；

b.环形图中，优先级为：size（大小）、shape（形状）、position（位置）、

color（颜色）、opacity（透明度）；因为面积（即大小）是典型的定量

视觉通道，而用户直觉地用面积去描述同一数据属性的不同的值，且

该视图呈现数据也是排序之后的，各个类型由不同颜色表示；

c.词云中,优先级为：size（大小）、shape（形状）、position（位置）、

color（颜色）、opacity（透明度）；词云呈现的效果主要跟词频有关，

而词频越高，显示的size就越大。

3.可视化呈现结果

（1）条形图（评论数量可视化）

该视图通过设置起始时间、终止时间，以及选择4种速度之一，可以呈

现出绵阳市各类餐饮评论数量排名前10的店铺类型，随时间轴的变化。

（2）环图（店铺星级数量可视化）

该视图可视化了绵阳市各个星级店铺数量的比例，以及各个店铺类型的

各个星级店铺数量的比例。

（3）词云（时间段内词云）

该视图可视化了绵阳市所有店铺热门评论的词云，以及各个类型的店铺

热门评论的词云，词频越高显示的字体越显著、尺寸越大。

(4)选择列表(餐馆类型)

该选择器主要功能是可以选择绵阳市所有的店铺类型，和环图、词云产

生联动。

(5)可视化呈现界面图

四、可视化交互方案

1.可视化交互模型和方法

(1)选择

用户可以选择自己想要的时间段，从而分析出时间段内的一些信息。用

户可能需要关注春夏秋冬或者不同的时间段上的数据。

(2)过滤

用户可以只看某种餐饮类型。因为用户可能只对某一种类型感兴趣。在

展示餐馆星级数量的环形图上，用户可以选择过滤出自己想要的星级。

(3)探索

用户可以主动寻找并调用可视化程序去寻找感兴趣的数据。在探索过程

中，通常需要在可视化中就会加入新数据或者去除不相关的数据。

(4)布局

用户看到的条形图、环图、词云可视化结果都会依靠排序算法。

2.可视化交互结果

(1)选择

2015-01-01-2015-02-12

1月20152月2015

—二四£六日—二四五六H

O234①

5678910112345678

1213141516171891011IB131415

1920212223242516171819202122

262728293031O232425262728O

(2)过滤、探索

四星吸》46窜

(3)布局

五、方案评估

(1)自我评估

本次课程设计达到了预期目标，基本完成了设计任务;

优点：利用少量的数据属性深入地挖掘出许多新的、有价值的信息；利

用多个视图来关联同一层次的多个数据属性；各个视图的交互性以及视

图之间的交互性是反复修改后的精心设计，许多细节都是为了提高用户

体验，视图之间达到了联动