数据可视化课程的教学设计与实践探索

穆翠霞

摘要：为了提高新开设课程数据可视化的教学质量和改善学生学习体验，从知识、职场和学生三个维度阐述了教学需求的调研、分析和准备，在此基础上进行了教学目标、内容和活动的设计，教学实施和反馈证实了教学设计的合理性，并总结了下一步课程教学改革的方向。

关键词：数据可视化;教学设计;Echarts;D3.JS

中图分类号：G642.0      文献标识码：A

文章编号：1009-3044（2020）34-0104-05

Abstract： In order to improve the teaching quality of the new course data visualization and improve students' learning experience， this paper elaborates the investigation， analysis and preparation of teaching needs from three dimensions of knowledge， workplace and students. On this basis， the teaching objectives， contents and activities are designed. The teaching implementation and feedback confirm the rationality of the teaching design， and summarize the direction of the next teaching reform.

Key words： data visualization; teaching design; Echarts; D3.JS

在本校計算机科学与技术、数字媒体技术的专业培养计划中，数据可视化是一门较新的专业方向必修课程，刚完成两轮教学。为了顺利开展教学，实现教学目标，提高教学质量，开展了细致的教学调研分析与准备、教学设计、教学实施反馈等工作，并总结出了下一步教学改革的方向，下文就从这几个方面进行详细阐述。

1 教学调研分析与准备

对于一门新开设课程，为了顺利开展教学并实现教学目标，需要从知识、职场、学生三个维度上[1-2]进行教学需求调研、分析和准备。

1.1 知识维度

针对知识体系维度，主要从课程教学大纲、相关教材和专业书籍、课程平台技术博客和案例作品等三个方面开展教学需求调查、分析和准备。

1）课程教学大纲

主要研究参考了中北大学和中国传媒大学的课程教学大纲，并与两位数据可视化的课程主讲教师进行了交流。

中北大学软件学院软件工程专业的数据可视化技术课程，共48学时，理论32加实践16，是专业方向选修课。教学目标为学习数据可视化的基本理论，学会不同类型数据（统计数据、文本数据、地理数据等）可视化的相关理论，并掌握使用Excel和Echarts实现数据可视化，以Echarts为主。实践环节采用了章鱼大数据实验训练平台，实验中给定数据和具体要求。期末考核成绩为平时实验作业成绩30%加上期末笔试成绩70%。该大纲在教学内容（理论+实践）、实现工具、考核方式等都提供了详细、有价值的参考。

中国传媒大学计算机学院计算机科学与技术专业和软件工程专业的数据可视化课程，共32学时，包括理论讲授、上机实验和作业展示等环节。可视化基本理论内容较少，以工具实现不同类型可视化为主。实现工具包括Echarts和D3，以D3为主，实现常用统计图表、词云、力导向图、地图等。实践环节分为两类：规定性任务和创新型任务，前者完成规定数据的规定样式的可视化设计与实现，后者自选数据自选样式的可视化设计与实现，其中作业展示分享环节促进学生互相交流与学习。该大纲在D3相关教学内容、创新型任务以及作业展示等方面提供了有价值的参考。

2）相关教材和专业书籍

广泛搜集可视化相关的教材和专业书籍，通过比较选取其中经典、有特色的进行研究，对于完善知识体系非常必要。

浙江大学陈为等编著的《数据可视化的基本原理与方法》，从理论内容体系上可以作为本校本科教学的重要参考教材，但对于具体实践环节的支持力度不足。陈为等编著数据可视化除了更完善系统的理论内容体系，还有更丰富的案例分析，更前沿的研究信息，因此可以作为教与学过程中的理论和案例方面的重要参考书;精彩案例虽然有难度，不能在教学过程中直接实现，但可以开阔视野，尤其在学生大作业设计中给以思路启发。

可视化达人Nathan Yau的《鲜活的数据：数据可视化指南》和《数据之美：一本书学会可视化设计》，可以作为实践环节教学设计和准备的重要参考书，前者主要介绍工具及案例来提供技术指南，后者描述数据及其可视化的过程和思想，两者互为补充。

网络分享颇多的技术达人吕之华编写的经典教材《精通D3.JS》以及中国传媒大学李春芳等编写教材《数据可视化原理与实例》，为D3深入学习提供了详细的技术和案例支持，而且教材阐述通俗易懂，对本科学生来说很适用。

3）MOOC类课程平台、技术博客专栏、精彩案例作品等

围绕数据可视化进行视频课程、技术文章和精彩案例作品等的搜集、梳理、选择和学习，向资深教师和技术人员学习，进一步梳理课程知识体系，完善理论和实践环节的内容及学时安排。

中国大学MOOC和智慧树平台上的大数据可视化课程，由浙大陈为和巫英才老师主讲，理论讲授为主，主要包括数据可视化概念、发展、基本流程、视觉感知与视觉通道、不同数据类型（空间、地理、时变、文本、树结构、图结构等）的可视化理论与案例、可视化工具比较等。该课程为我们理论部分的教学设计提供了有力的支持，视频片段也会在教学过程中直接穿插采用。

中国大学MOOC（www.icourse163.org）的数据可视化课程，中国传媒大学的李春芳老师主讲，面向数据科学与大数据技术专业、计算机专业，新媒体专业等。课程以当前流行的数据可视化技术D3.JS为主要开发工具，通过实例分析和讲述数据可视化的实现，包括饼图、南丁格尔图、力导向图、词云图、地图等，与教材《数据可视化原理与实例》配套使用。该课程为D3实践环节提供了技术和案例支持，也方便学生课下自主扩展学习。

针对学生通常先有个初步感受能更利于深入学习的心理需求，搜集和学习了3门入门类课程。可以学习从从业技术人员角度如何带领学生顺利入门，也可以提供给学生课前自主学习和课后巩固复习之用。一是网络CSDN学院的吕之华《D3.JS飞速入门》视频课程，主讲老师也是经典教材《精通D3.JS》的作者，讲解了D3.JS基础、柱形图、坐标轴、折线图、散点图等以及简单布局应用。二是慕课网（www.imooc.com）上的《Echarts3.0入门基础与实战》，主讲老师是Web前端工程师“蜗牛老湿”，课程介绍Echarts的入门使用，并通过实战小项目加深对Echarts的理解，涉及柱形图、折线图、饼图，仪表盘、地图以及K线图、雷达图、散点图、地图等。三是学途无忧网的视频教程《Echarts从入门到上手实战》主讲老师童金浩是微软数据分析讲师，具有10多年软件行业从业经验，课程共12个小时70课，包括了Echarts常用图表类型和应用案例讲解。另外，经典的技术学习网站的分享和利用，为教与学提供了很大的便利，比如W3school、菜鸟教程等。

在教学过程中精彩案例作品的整理、分析和利用，可以激发学生的学习兴趣，开阔学生的专业视野，启发学生的设计灵感，让学生对数据可视化的应用有个直观、总体的感受。下面这3个作品都是非常值得欣赏和学习的，新华网数据新闻联合浙江大学可视化小组研究团队开发的可视化作品《宋詞缱绻，何处画人间》和《唐女诗人群像》，还有中国传媒大学媒介大数据与全球传播课题组与中央广播电视总台英语环球节目中心（CGTN）共同制作的大数据交互新闻作品《外国人在中国》。

1.2 职场维度

针对职场维度调研需求，通过毕业生反馈信息以及网络招聘相关岗位要求信息，结合文献[1]中信所的职场维度调研分析结论，进行调研信息汇总，这在指导教学内容和教学活动的设计中发挥重要作用。

1）一图胜千言，用户体验很重要，适当的图表和可视化展示，更利于决策和沟通。

2）锻炼实践操作应用能力和团队协作能力很重要。可视化教学不能停留教材和理论，应该通过任务和目标来引导学生学习工具、完成任务，并在完成任务的过程中锻炼可视化思维，能根据应用场景选择合适的图表类型。完成一个任务，从选题策划，到数据采集和处理，最后可视化设计和实现，需要团队协作各自发挥优势完成。

3）可视化的可交互性很重要。可交互是改善用户体验和个性化服务中不可或缺的元素。

1.3 学生维度

针对学生维度，主要从本校专业课程设置情况及本校学生的具体学习基础和能力情况分析。

首先，梳理计算机科学与技术和数字媒体技术两个专业的课程设置情况，尤其是跟数据可视化相关的前置和同期课程，如表1所示。两个专业的学生在前期知识基础积累上是有一定差别的，需要在教学内容安排时兼顾不同的需求，在课堂上适当补充，或者提供自主学习视频补充，或者推荐网络资源补充等。两个专业的学生在UI设计和编程能力两方面也有一定的差别，数字媒体技术专业学生在前端UI设计方面基础更好，计算机科学与技术专业学生在数据采集、处理以及数据库编程方面基础更好，因此在分组大作业时可以不同专业学生进行组合，各自发挥优势，团队协作完成任务。

另外，两个专业的学生对可视化的了解程度普遍不高，其中计算机科学与技术专业学生在小学期中接触了简单的Echarts应用。两个专业的学生都在一定程度上比较熟悉常用Excel图表。通过前面5个学期的学习，已经适应了专业课程重视实践作业及分组合作完成目标任务并展示答辩的考核模式，而且普遍认同完成项目的学习方式更能获得成就感，专业实践能力提高也更快。

考虑到两个专业的学生学习基础和能力具体情况，选择实现工具[3-5]也会采用难度从小到大，逐步体验、适应的阶梯式学习过程策略，从交互式Excel热身，到熟悉配置式Echarts，再到编程式D3，这样可以避免过早产生畏难情绪。另外，课程学习结束后，每个同学也可以根据自己的具体情况，有选择地进行深入学习不同的实现工具Echarts或D3。

2 教学设计

通过知识、职场、学生三个维度上进行的教学需求调研、分析和准备，接下来对课程教学目标、内容、活动等进一步完善设计[2][3]。

2.1 教学目标

数据可视化是计算机科学与技术、数字媒体技术的专业方向必修课程，通过课程理论学习和上机实践，使学生了解数据可视化的相关概念和基本原理，掌握不同类型数据的常用可视化方法，实现典型的可视化设计，使学生初步具备数据展示能力;培养学生根据不同类型数据的呈现需要，选择合适的数据可视化方法的意识。

2.2 教学内容

沿着主线即理论→方法→应用案例，从整体上梳理教学内容[6][7]。理论内容上包括了可视化基础概念、发展历程、可视化流程与设计原则、视觉感知与视觉通道、不同数据类型的可视化方法、Echarts和D3基础知识。从数据角度包括了一般统计数据，还有时变数据、地理数据、文本数据、网状结构数据等。从图表类型包括了常用统计图表（柱形图、折线图、饼图、散点图等）、热力图、地图、词云图、力导向图等。从实现工具角度包括了Excel、Echarts和D3，并根据教学内容进度来搭配使用不同工具进行可视化案例实现。在此基础上制定教学进度计划，如下表2所示。

2.3 教学活动[8]

下面从理论方法讲授环节、实践环节、资讯与案例工具分享环节、测试与考核环节等的设计分别进行阐述。

1）讲授环节[8]

根据教学讲授内容的安排，主要采用PPT课件、编程环境代码来完成理论方法和设计实现的讲授。在理论方法部分，课堂中会根据具体内容有选择地穿插陈为老师慕课视频片段。在设计实现部分，除了任课教师主讲，也会根据具体教学进度，安排课前预习和课后扩展学习视频，视频来源于上文所述的Echarts和D3入门相关课程。另外，Echarts案例实现的讲授部分，由于图表类型多，除了课堂讲授部分，也会选择一些经典有趣的图表类型案例来录制教学视频，供学生课下自学。任课教师主讲，辅助浙大陈为教授视频以及从业技术人员视频讲解，给学生提供多角度多层次的学习过程，丰富学生的学习体验。

2）实践环节

根据课程教学前期调研分析和教学进度，安排选择了Excel+Echarts+D3的可视化实现工具组合。实践分为平时实验作业和大作业设计，其中平时实验作业包括了Excel、Echarts和D3共三部分，下面按照教学进度顺序分别进行阐述。

①平时实验作业

在第1、2周时，讲授可视化基本理论占用学时较多，因此先采用容易上手的交互式Excel完成可视化实践进行热身，让学生对可视化实现有个初步的认识。学生要个人独立完成，提供相关实践讲义资料，给定实验数据，提供结果样文和操作视频，自学完成实验作业，不占用课堂讲授学时。另外，会根据学生的Excel基础情况安排难度和熟悉度不同的实践内容，比如对于学生熟悉的柱形图、折线图和饼图，实践中要求注意避免讲授过的那些常见错误和问题，增加双y坐标轴练习，增加柱形图和折线图搭配练习等。再比如，增加学生接触较少的散点图、动态图表、地图等内容。也会根据实践学时，进行必做和选做内容的安排，留给不同水平学生选择学习的空间。Excel实践部分为后面Echarts奠定了图表基础知识，便于快速进入Echarts教学。

在第3至8周时，选择两人一组，小组成员合作，自行选择感兴趣的主题，并搜集、处理数据，采用Echarts实现不同数据类型的可视化设计。要实现的图表类型也根据教学内容分为必做和选作，选择权留给小组成员。一共安排3次实验作业，每次作业评阅并记录成绩。作业会抽查展示和点评，这样利于学生们互相学习，发现典型问题及时进行分析讲解，这样也可以为完成大作业设计打好基础。

在第9至11周时，在已整理的实验数据基础上，小组合作完成D3柱形图、饼图、折线图、标签云、地图等内容，共安排2次实验作业，作业评阅记录成绩并抽查展示点评，发现问题及时分析讲解。

②大作业

大作业设计目的：两人一组，小组成员分工合作，在平时实验作业的基础上通过围绕一个主题收集、处理数据并设计数据可视化作品，使学生进一步理解数据可视化的基本原理和流程，掌握不同类型数据的常用可视化方法，实现典型的可视化设计，初步具备根据不同类型数据的呈现需要，选择合适的数据可视化方法的意识，锻炼学生团队协作能力。

设计内容、要求及组织形式包括：数据权威，要有原文或超链接到数据源官网，数据相对完整;页面布局要求全屏展示，色调与主题和谐统一，页面美观，布局合理（使用5种以上布局方式，力导向、词云图和地图至少使用其中两种，其他布局方式可选。另外，要求页面中有配合可视化展示的文字信息，用于说明可视化设计的基本情况等。可视化展示尽量放在一个页面中或者通过一个页面可以链接到所有可视化页面。）;可视化技术要求Echarts至少实现4种布局，D3至少实现1种布局;数据存储要尽量通过读取文件或者数据库来配置数据;交互和动画要求设计人性化交互以及适合的动画效果;实验报告要求在报告中要说明实验过程和报告的具体分工合作情况，可以按布局个数拆分，可以按照前后端程序代码拆分等;分组合作要求2人一组，要独立完成，可相互讨论，可参考各种资料等。

考核形式及成绩评定：在第12周课堂进行各小组展示，促进互相学习，学生和老师共同评分，实验报告由教师评分。大作业成绩组成为大作业设计展示评分75%+大作业实验报告25%。其中，大作业展示评分包括数据权威15%+页面布局40%+可视化技术要求10%+数据存储5%+交互和动画设计5%。

3）资讯与案例工具等分享环节

为了让学生及时了解前沿趋势和从业情况，会在课堂上或者课程微信群里进行资讯、案例工具等分享。比如在课程微信群中提议学生收看《大数据与可视化技术及应用》的公益直播讲座，分享作品《宋词缱绻，何处画人间》《外国人在中国》等。在课堂上小组3分钟分享Echarts表格工具、主题构建工具、分词工具、精彩案例等。在最后一次课的小组展示结束后，邀请一直从事数据可视化相关工作的学姐进行从业经验分享。

4）测试与考核环节

数据可视化注重学习过程和实践能力考核，设定课程总成绩包括平时实验作业、小测试和小组分享共占50%，考勤占10%，期末大作业设计占40%。平时实验作业、小组分享以及大作业在上文中已经阐述。3次小测试包括Excel自学部分、第1章和第2章理论部分、第3章理论部分，小测试通过问卷星平台利用课下时间不限时完成。

3 教学实施反馈与改进方向

在教学过程中及时跟学生沟通，通过雨课堂投票等功能以及微信群信息，了解学生对于教学内容难度大小、教学节奏快慢、作业多少及难度等反馈信息，并及时做出回应和合理调整。在Excel实验作业完成后，通过问卷星进行了Excel实践内容相关的调查，并调查了对于教学所选择的实现工具组合的认同程度。在課程结束后，对整体上的课程教与学进行了问卷星调查。学生对于教学内容和过程的反馈信息，有助于下一步进行更有针对性地改进教学。

3.1 问卷调查结果

教学班级共56位同学，收回56份问卷，部分结果如下：

1）对数据可视化作业量94.74%表示可以接受;

2）Excel可视化练习的整体难易程度，36.84%表示整体比较简单但可以练习热身，15.79%表示整体有点难度且值得练习，47.37%表示个别题目有难度且值得练习;

3）Echarts教学和实践难度，91.23%表示适中，7.02%表示比较难;Echarts个人掌握情况，56.14%表示大部分内容掌握了，33.33%表示基本掌握了，10.53%表示小部分掌握了;Echarts讲授和实践安排，68.42%表示自学有一定难度且讲授可以更好地学习掌握，10.53%表示需要安排讲授和实践，21.05%表示可以微课自学;

4）D5难度，43.86%表示适中，50.55%表示比较难，5.26%表示很难;D3内容个人掌握情况，35.09%表示大部分内容掌握，15.79%表示基本掌握了，49.12%表示小部分掌握;

5）整体教学内容和实践安排，96.49%表示内容充实，讲授时间偏多，实践时间偏少，但整体上可以接受;课程教学满意度，50.88%表示很满意，49.12%表示基本满意;

6）将可视化实现工具组合分成了不同的方案，方案A Excel+Echarts，方案B集中学习D3，方案C Excel+Echarts+D3三者都涉及，但区分掌握要求，以后有需要再深入研究，方案D Echarts+D3两者都学习，以后有需要再专门深入研究，方案E集中学习Echarts。对可视化实现工具组合的偏好倾向，开课初期对不同方案做了排序调查，根据每位学生排序计算评价得分从高到低依次为：C、A、D、E、B。课程结束后，对不同方案做了偏好倾向选择调查，C方案为50.88%，A方案为15.79%，D方案为28.07%，E方案为3.51%，B方案为1.75%。两次调查结果明显差别在于课程结束后，A和D方案之间更多同学倾向于D，也就是Echarts和D3的组合，而目前采用的C方案在课程开始和结束时都是认同度最高的。

3.2 学姐从业分享后反馈

看完2012级学姐的从业分享视频，21位学生积极反馈，大体总结如下：学姐进课堂热心分享的形式不错，了解了实际数据可视化工作的场景和知识技术需求，分享内容很实用，知道了自己所欠缺的和努力的方向。

3.3 改进方向

在整个教学开展过程中，任课教师也会不断总结每个教学环节得失，尽量及时调整，或者为下一步调整做好经验与教训的分析记录及准备。总结分析教与学的反馈意见和经验教训，教学内容和教学活动的设计与实施从整体来看基本是合理、满意的，但在几个方面仍然需要进行改进完善：

1）Excel+Echarts+D3技术组合方案基本合理，但Echarts和D3的学时比例需要调整，适当加大D3学时。

2）Echarts课堂讲授学时需要适当缩减，相应地需要开发更多Echarts微课资源用于课下自主学习。

3）进一步整合完善部分课堂教学案例，为学生大作业设计提供参考。

4）开发SVG、数据库相关案例的教学微课资源。

5）研究混合教学模式在数据可视化课程教学中的应用，并持续完善教学内容体系和教学活动设计。

4 结束语

目前，数据可视化课程已开展了两轮教学，进行了较充分的教学需求调研和教学活动设计，在教学实施过程中积极了解学生反馈信息并及时进行调整，因此取得了较好的教学效果，学生满意度也很高。但是，课程教学是一个长期的不断探索、不断打磨的过程，还需要结合专业特点、学生具体情况等不断总结经验教训，完善教学知识体系和教学活动设计，开发教学案例和视频资源，探索创新教学模式，充分调动学生学习积极性，改善学生学习体验，提高教学质量。

参考文献：

[1] 望俊成，武山山，梁娜，等.基于“知识维-职场维-用户维”的课程需求调查研究——以《数据可视化》课程需求调查为例[J].情报学报，2016（8）：793-799.

[2] 望俊成，李幸，郭传斌，等.中信所《数据可视化》课堂的设计：基于翻转课堂的理念[J].情报学报，2016（8）：800-805.

[3] 陈小燕，干丽萍，郭文平.大数据可视化工具比较及应用[J].计算机教育，2018（6）：97-102.

[4] 左圆圆，王媛媛，蒋珊珊，等.数据可视化分析综述[J].科技与创新，2019（11）：82-83.

[5] 郑戟明，柳青.Echarts在数据可视化课程中的应用[J].电脑知识与技术，2020，16（2）：9-11.

[6] 马天.基于“学生中心，成果导向”的数据可视化课程大纲设计[J].科技视界，2019（1）：63-64.

[7] 陈为.数据可视化[M].北京：电子工业出版社，2013.

[8] 王賀艳，何南思.数据可视化课程的线上线下混合式教学[J].福建电脑，2019，35（6）：147-148.

【通联编辑：谢媛媛】