百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

宿爽

一个希望科技发展总体来说对大部分人类生活有积极意义的程序员

共发布 4个任务,已经有 144名学生在这里学习上课
课程结束

难度:进阶时间:大约需要1

68人在学习该课程,有35人已经完成该课程

ECharts No.4 - 可视化前的数据预处理

任务目的 学会使用 Node.js 将获取的 csv 格式的数据转换成能够用 echarts 展现的格式。 为什么要『数据预处理』? 我们拿到数据,或者自己整理数据,常使用『电子表格』(例如微软的 Excel、苹果的 Numbers)。csv 是这些电子表格软件都能识别的文件格式,这种格式很简单(只用逗号和换行符分隔数据)。而图表库一般都有自己的数据格式要求。例如 JavaScript 图表库要求数据的输入是 JSON 或者 JavaScript Array 格式:[ [20090821, A, 25.6, 25.61, 25.22, 25.55, 34758], [20090824…

课程结束

难度:进阶时间:大约需要0

33人在学习该课程,有22人已经完成该课程

ECharts No.5 - 动态数据

任务目的 了解如何动态的修改图表中的数据 实现时序数据的实时更新 任务描述 在前一个任务(ECharts No.4 - 可视化前的数据预处理)的基础上,将展示改为: 首次进入,显示 30 天时间窗口的数据。 每隔 200ms 将时间窗口往后推一天,动态更新图表。 任务注意事项 除了我们提供的数据外可以也使用其它的时序数据。 可以参考这个教程:异步数据加载和更新 前一个任务(ECharts No.4 - 可视化前的数据预处理)要求使用 dataZoom 组件,本任务中可不使用。 …

课程结束

难度:进阶时间:大约需要1

25人在学习该课程,有15人已经完成该课程

ECharts No.6 - 绘制人物关系图

任务目的 学习一些常见的关系数据(网络数据)可视化手段 任务描述 从 http://www-personal.umich.edu/~mejn/netdata/ 选择一份关系数据下载 用 gephi 对数据进行处理,布局,分类后导出成 gexf 格式。 解析 gexf 格式后用 ECharts 的 graph 类型图表展现。 任务注意事项 这个是 graph 图的 配置项手册。 echarts 中目前默认提供了两种『自动布局』方式:径向布局 和 力引导布局。另外,echarts 也支持展示『预先布局』好的数据(如例子)。 小数据集可以直接在 echarts 中用 力引导布局 布局。 …

课程结束

难度:困难时间:大约需要3

18人在学习该课程,有1人已经完成该课程

WebGL & ECharts - 【综合】绘制三维地图

任务目的 更深入的了解 GeoJSON 的格式 能够处理顶点数据,学会显示自定义的 WebGL 图形。 任务描述 解析 绘制地图 任务中得到世界地图的 GeoJSON 文件,用代码实时转成三维的模型后绘制。并且能够有一定的交互,比如点击高亮某个区域。 展现的效果如图(下图是中国地图,请自行替换成世界地图)https://github.com/100pah/ife/blob/master/2017Q1/echarts_3d_map/geo3d.png …