[中文课程] 零基础学 D3.js 数据可视化

这门课程将会从最基本的网页前端开发开始,

而逐步涵盖 D3.js 与数据可视化的概念,

入门至高端并穿插实作范例与练习

逐步带领大家实际走入网站数据可视化的世界

为什么学 D3.js 

D3.js 目前正广泛应用于成千上万的网页中,可分为几种类型:

  1. 各式新兴媒体透过创造出具交互式图表的网站来与用户交互
  2. 透过信息仪表板来传达即时信息
  3. 使用各式地图来呈现地理数据集合

可见,可视化对于数据的重要性与需求性逐渐上升。网络时代里,搜集数据已经不再稀奇,能够将繁杂的数据有效的呈现,并加以利用和传播,有效率地与他人沟通,让更多人理解数据所传达的消息,进而解决问题,才是重点。

D3.js 本质上是 JavaScript,却将产生可视化的复杂步骤精简到几个简单的函数,大大简化了JavaScript 操作数据的难度。除了大大减少开发者的工作量外,只需要输入几个简单的数据,就能够转换为各种绚丽的图表。

为什么使用 D3.js ? Python 、R 语言、Excel 不也能做数据可视化 ? 毕竟 Python、R 语言并非浏览器的默认的开发语言。虽然可以利用套件达到可视化的效果,但每个语言有他们各自的强项,无法面面俱到。 D3.js 是以  JavaScript 为基础的函式库,而 JavaScript 正是浏览器引擎默认的脚本语言。

课程特色

  • D3.js 可以让你将手边的数据数据透过使用 HTML、SVG 及 CSS 绘制出图表,不光是一般的长条图、圆饼图或折线图,还可以在网页中做出各式各样高交互性的动态图表
  • 课程内容亦会穿插实作范例与练习,来强化对于数据视觉呈现与交互的理解
  • 学会如何更深入使用 D3.js 等工具来制作可视化原型以完成设计,从而向观众或读者有效地传达信息或见解
  • 课程加量不加价。持续更新。
  • 教学风格循序渐进、深入浅出、以实例代替抽象,容易吸收。

适合我吗? 需要哪些课程准备?

适用对象

  • 较无基础但愿意勤奋自学「数据可视化」及「网页开发」
  • 对「数据可视化」有兴趣并稍熟悉 HTML、CSSJavaScript 

工具准备

  • 本课程将使用初学者易上手的跨平台 Adobe Brackets 做为主要 D3.js 网页开发环境。而D3.js本身则不需要额外安装任何框架或是套件。学员皆可自行下载并安装于任意系统的笔电中进行学习。

知识准备

课程介绍 (共 16.8 小时)

从零开始,这门课将带给您五大重点

1️⃣  基础前端网页设计概念和语法

HTML + CSS + JavaScript 是前端网页必备的技能,这堂课会再以重点精华的形式,带您了解基础网页的构成,以及加深基本语法的熟悉度。

d3js1.jpg

d3js2.png

d3js3.png

2️⃣  D3.js 重点观念和 SVG 矢量图形绘制技巧

视觉的东西常常做出来会与我们想像中的不一样,其实有时候仅是观念清晰度和语法熟悉的问题罢了。这里让您一次就搞懂D3.js 的内核观念与实际应用方式,如何透过现有手边的数据快速进行数据可视化。

d3js4.png

d3js5.gif

3️⃣  视觉图形、布局交互、地图绘制,从 基础 → 高端 → 实作演练

在课程的第八章开始,我将带您学利用数据来绘制圆饼图、泡泡图、长条图,并创建视觉交互的特效。让您能很清晰地了解从基础到实际操作的流程。最后透过绘制「台湾登革热疫情点位置图」来进行实作演练,从无到有地完成多个属于您自己的D3 作品!

d3js6.jpg

d3js7.jpg

d3js8.png

4️⃣  常见的数据格式与应用方式

常常听到人家在讲到CSV、JSON、XML 听都听不懂?数据交换格式的用法与差异性。这里通通告诉你。

d3js9.png

5️⃣  网络爬虫与数据可视化的亲密关系

说到数据可视化,不免就要提一下「网络爬虫」。一般我们常见会用 R、Python撰写一只网络爬虫,抓取网络上的「数据」,并将其加以过滤整理,再透过可视化呈现。在课程的章节里,将会讲解网络爬虫的基础原理,并示范快速打造一支网络爬虫,节省撰写爬虫的时间,让您能专注在数据可视化的技术上。

d3js10.jpg

讲师介绍

lintse

学历

  • 国立台湾大学 信息网络与多媒体研究所 硕士
  • 国立交通大学 信息工程学系 学士

经历

  • 2016 台大创新与创业学程 网管
  • 社区舆情观测与分析网页平台系统开发
  •  2014起至今担任大数据应用相关专案: 科技部、工研院、中央银行等单位-数据挖掘与分析专案研究员
  • 法务部调查局干部训练所-数据可视化及舆情分析研习班 讲师

得奖纪录

  • IndieCade’15 美国独立游戏设计大赛3D Jam-世界第七名
  • 美国计算机协会ACM 人机交互会议CHI’15 学生游戏竞赛-创新界面组 TranSection Top 3
  • 100年台电全国电力沟通宣导与多媒体广告竞赛 – 大专组第一名
  • 中华民国汽机车协会「创意就是力量」第四、五届交通安全影音动画大赛 机车、汽车组 冠军
  • HackNTU’14 第二届台大黑客松-第二名&人气奖
  • Hackathon Taiwan 10th 台湾黑客松-最佳设计奖
  • MobileHero 2014 通信大赛 联发科穿戴式暨物联网竞赛-季军
  • 2016 智能城市黑客松 实践家组 优质创作奖
  • 2016 第十四届台大创新竞赛 评审团铜奖&人气赏

课程网址  去预览📈

hiskio-d3js

Sponsored by Hiskio

♥欢迎关注 Soft & Share 微博

 

发表评论

Powered by WordPress.com.

Up ↑

%d 博主赞过: