Logo
☆☆☆☆☆
0.0
Intermediate
24h

掌握 D3.js 进行数据可视化

在本课程中,你将学习使用 D3.js(一个非常流行的 JavaScript 库)为网页创建自己的交互式数据可视化。 课程从基础开始,你将学习 SVG、选择集、类与样式,以及如何展示数据。这些内容将为你掌握更高级的概念打下坚实基础。 掌握基础知识后,你将开始练习绘制各种散点图,并在此过程中了解创建出色可视化效果的最佳实践。 最后,你将深入学习比例尺,以及更具趣味性的部分:添加动画和交互功能。 完成本课程后,你将掌握一个强大的新工具,可为你的简历增色,同时具备将数据转化为有意义洞察的能力。

8 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
掌握 D3.js 进行数据可视化
在本课程中,你将学习使用 D3.js(一个非常流行的 JavaScript 库)为网页创建自己的交互式数据可视化。 课程从基础开始,你将学习 SVG、选择集、类与样式,以及如何展示数据。这些内容将为你掌握更高级的概念打下坚实基础。 掌握基础知识后,你将开始练习绘制各种散点图,并在此过程中了解创建...

Content

8 Lessons • 0 Quizzes • 0 Challenges

概述
  1. 1

    简介

  2. 2

    理解 D3 与数据可视化

SVG 基础知识
  1. 1

    了解 SVG

  2. 2

    SVG 中的基本图形

  3. 3

    路径

  4. 4

    测验:SVG

D3 基础知识
  1. 1

    添加 D3

  2. 2

    选择

  3. 3

    添加元素

  4. 4

    转换方法

  5. 5

    类与样式

  6. 6

    连接数据

  7. 7

    Enter 选择集

  8. 8

    退出选择

  9. 9

    显示数据

  10. 10

    进入、更新和退出

  11. 11

    更新模式

  12. 12

    从外部加载数据

  13. 13

    测验:基础知识

绘制散点图
  1. 1

    散点图简介与项目准备

  2. 2

    绘制图像

  3. 3

    添加边距

  4. 4

    访问器函数

  5. 5

    理解规模

  6. 6

    编写可扩展的代码

  7. 7

    将比例尺应用于可视化图表

  8. 8

    优化规模

  9. 9

    添加坐标轴

  10. 10

    优化 X 轴

  11. 11

    Y轴

  12. 12

    翻转Y轴

  13. 13

    优化坐标轴刻度

  14. 14

    总结

  15. 15

    测验:散点图

数据比例尺(Scales)
  1. 1

    连续型与离散型数据

  2. 2

    线性比例尺(scaleLinear)

  3. 3

    热力图简介

  4. 4

    绘制热力图

  5. 5

    使用线性比例尺的颜色

  6. 6

    “scaleQuantize()” 比例尺

  7. 7

    “scaleQuantile()” 比例尺

  8. 8

    “scaleThreshold()” 比例尺

  9. 9

    量化、分位数与阈值比例尺的比较

  10. 10

    颜色标尺

  11. 11

    理解对数尺度

  12. 12

    对数比例尺('scaleLog()')

  13. 13

    总结

  14. 14

    测验:规模

动画与交互性
  1. 1

    动画与交互简介

  2. 2

    什么是直方图?

  3. 3

    准备直方图

  4. 4

    理解问题

  5. 5

    创建分箱

  6. 6

    直方图的收尾工作

  7. 7

    通过事件更改指标

  8. 8

    更新图表

  9. 9

    过渡动画

  10. 10

    理解问题

  11. 11

    修复过渡问题

  12. 12

    修复退出过渡效果

  13. 13

    调整柱状图和标签

  14. 14

    添加均值

  15. 15

    添加一个工具提示

  16. 16

    鼠标事件

  17. 17

    格式化

  18. 18

    理解 Voronoi 图

  19. 19

    创建 Voronoi 图

  20. 20

    修复 Voronoi 图

  21. 21

    测验:动画与交互性

更多图表!
  1. 1

    下一步是什么

  2. 2

    准备折线图

  3. 3

    时间尺度与解析

  4. 4

    线条生成器

  5. 5

    添加坐标轴

  6. 6

    准备工具提示

  7. 7

    理解二分查找器

  8. 8

    自定义二分查找分割点

  9. 9

    完成工具提示

  10. 10

    开始学习饼图

  11. 11

    绘制圆弧

  12. 12

    理解顺序尺度

  13. 13

    使用序数比例尺

  14. 14

    添加标签

  15. 15

    修复饼图

  16. 16

    准备堆叠条形图

  17. 17

    栈函数

  18. 18

    波段比例尺

  19. 19

    绘制堆叠条形图

  20. 20

    绘制坐标轴

  21. 21

    收尾工作

  22. 22

    响应式图表

  23. 23

    测验:更多图表!

结论
  1. 1

    最后的思考

  2. 2

    配置你的编辑器

  3. 3

    附录

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:Anonymous User

Reviews

Read reviews from students who have taken this course and share your own experience.

Reviews & Comments (0)