本代码库对应清华大学-计算机系春季学期课程《数据可视化》,由张松海老师任课。代码库内容主要围绕2020年开始新加入的D3.js编程讲解,其中的框架可作为大作业与其他可视化编程的基础,同时所有样例可供大家参考。任何同学有任何问题,欢迎在Github上issue或给我发邮件([email protected])。
D3.js课上用幻灯片(讲义):slides文件夹;
D3.js课上录屏: 哔哩哔哩-BiliBili;
课程希望各位同学可以有编程基础,这里编程基础不限制哪门具体的语言(虽然更希望是JavaScript与Python)。关于可视化编程需要用到的编程语言(JavaScript),在D3.js介绍的时候,会一并为大家介绍。如果没有编程基础,也完全可以参与课程学习,但需要无编程基础的同学课下用额外的时间补习JavaScript的基础知识。
引言会为大家介绍D3周边的知识,包括HTML、JavaScript、Web环境配置等。对于本门课程而言,这些内容是学习D3.js所要了解的基础。Introduction中会包含使用D3所必备的知识,但对每个部分的讲解具体还是需要参考其专门的教学课程。
第二章节Manipulation会为大家介绍如何使用D3.js操控图元(SVG),包括对于select、append、attr这些基础函数使用与演示。同时,本次将为大家带来一个静态柱状图的编程实例,实例将加强大家对于图元操控的熟练度。
第三章节Data-Join将进入D3.js的一个核心机制:将图元与数据绑定。我们将介绍如何将数据与图元绑定,并如何通过数据设置图元属性。同时,本章节包含经典的Data-Join,即'enter'、'update'与'exit'三种数据绑定状态的用法与Data-Join的各种接口。实例为一个动态的散点图,来加强大家对于Data-Join的熟悉程度。
第四章节的主角是'path',一个SVG中最强大的图元之一,仅凭这一种图元就可以实现线段、圆弧、地图、主题河流等多种可视化方案。当然,path的强大在于其'd'属性,而在HTML中,'d'属性的设置又略微复杂,而D3.js是如何帮助我们设置'd'属性的呢?实例会展现一个动态的折线图,让大家感受D3.js中的'd'属性设置。
第五章节较为特殊,我们将‘实现一个可交互的地图’贯穿整个章节。通过这个实例,会循序渐进的从‘如何使用D3展现一幅地图’,到‘如何在地图中加入交互’,再到如何通过层叠式样式表(CSS)来美化可视化效果,来为大家介绍地图、交互与CSS的内容。同时,本章节会介绍一个用于辅助D3.js但独立于它的库:D3-Tip,可让我们方便地在可视化图标上浮现对话框。
第六章节将介绍D3中的一个数据预处理机制:堆叠数据。D3中提供了很多方便、易用的数据预处理接口,本章节将会围绕其中一个来展开。实例会应用D3.js中的数据预处理机制,来完成一个堆叠的柱状图。
... ... ...
... ... ...
为大家提供的框架本身搭建非常简单,即使用Python-Flask构建,其中的主要内容是我们课上会用到的Demo与一些我们制作的可视化展示。Python的安装请参考官方网站,安装后请打开命令行,输入如下命令安装服务器端需要的flask库:
pip install flask flask_cors
如果安装成功,即可直接运行服务器。
进入项目根目录(包含main.py的目录),打开命令行并输入如下指令:
python main.py
若出现如下类似的信息则表示服务器启动成功:
* Serving Flask app "main" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Restarting with stat
* Debugger is active!
* Debugger PIN: 331-382-827
* Running on https://0.0.0.0:11666/ (Press CTRL+C to quit)