为了账号安全,请及时绑定邮箱和手机立即绑定

使用D3制作图表

LuckyYang 其它
难度中级
时长 1小时52分
学习人数
综合评分9.5
32人评价 查看评价
9.9 内容实用
9.2 简洁易懂
9.3 逻辑清晰
简介:现在是大数据时代,我们每天都会产生很多的数据,如何通过更直观的方式来展示这些数据并可以让用户马上就可以获得海量信息中的规律呢?使用D3!这个课程会通过实际的例子讲解如何使用D3这个javascript库来制作几种常用类型的图表,让我们来初探数据可视化的奥秘吧!

1章 课程介绍

介绍了本课程的主要内容:1. 为什么要使用图表;2. 有哪些常用的图表;3. 什么是D3和D3能给我们带来什么;4. 你会学到什么
  1. 1-1 课程简介 (04:33)

2章 线型图表与坐标轴

线型图表是我们最常见的图表了,这一章里我们就来学习一下如何生成线型图表,我们还会学习到如何添加坐标轴。
  1. 2-1 画布制作 (10:10)
  2. 2-2 绘制曲线 (14:10)
  3. 2-3 select与selectAll区别 (04:45)
  4. 2-4 坐标系绘制 (04:26)
  5. 2-5 Y轴添加文本标签 (04:54)

3章 面积图表

面积图表一般有很强的视觉冲击力,因为它是由大块的颜色填充的。而生成面积图表却不那么难,只要你学习了上一章中如何制作线型图表。
  1. 3-1 面积图表 (03:11)

4章 柱狀图表与数据文件

这一章里我们会讲解两种柱狀图表的制作:水平柱狀图表和竖直柱狀图表,并学习如何使用D3来解析数据文件来获取生成图表所用的工具。
  1. 4-1 水平柱状图表 (13:32)
  2. 4-2 竖直柱状图表 (05:24)
  3. 4-3 使用数据文件 (10:25)
  4. 4-4 添加字母刻度的坐标轴 (16:24)

5章 饼状图

饼状图也是很有视觉冲击力的一种图表,通过饼状图我们可以很快地知道每个部分所占的比例是多少。通过本章我们可以学到如何使用D3中的svg.arc()和layout.pie()方法来生成饼状图
  1. 5-1 饼状图(上) (12:38)
  2. 5-2 饼状图(下) (05:28)

6章 课程总结

D3不是你的菜? 看看另外的这些图表工具怎么样吧
  1. 6-1 总结课程 (01:32)
课程须知
有html,css和javascript基础的同学学习这门课程会比较容易一些。没有基础的同学,也可以通过课程里面的例子加深自己对相关知识的理解。
老师告诉你能学到什么?
如何使用select和selectAll选择DOM元素、如何使用append添加DOM元素、如何使用line,area等方法生成图表曲线、如何使用数据文件让我们的图表可以随着数据变化而动态更新。
意见反馈 常见问题 APP下载
官方微信
hv128