9号彩票开户

关注微信  |  微博  |  腾讯微博  |  RSS订阅
读者QQ群③:168129342,投稿请发dashuju36@qq.com
我要投稿

D3.js教学记(上)

D3.js教学记由Lynn Cherny授权数据新闻网编译

原文请见http://blogger.ghostweather.com/2016/01/teaching-semester-of-d3js.html

翻译:佳昕

之前的一个学期我在迈阿密大学新闻专业开设D3.js课程;疯狂的是,我要同时负责教授以及评分。哇哦,这一学期的教课真的很不易。教写代码,特别是教非计算机专业背景的学生真是一种特别的挑战。不过很幸运的是, 这第一学期的教学班规模很小,小白鼠学生们非常有耐心,而且很有积极性。

这堂课是为作品网站制作者们设计的,重点在于交互式可视化的新闻制作。 第一学期我们用了联合国儿童基金会(UNICEF)的数据,详情可见作品案例中。接下来这一学期就没有那么多新闻专业学生了,也就是说我们会做一些内容上的调整,这一过程我会在repo中再做梳理。这篇博客中,我会聊聊我们的经验以及挑战。下一篇博客中会具体展示学生们的作品。

网页交互以及新闻可视化

为何要教D3? 不止一个教过新闻专业学生的朋友跟我说过他绝对不会再做这件事了。就在我开启这次冒险之前我听到了这句话。但是,这堂课意在做数据交互的可视化,也就是说,一个图表不只是像一个静止的柱状图那样,读者们也不只是盯着那些柱状图看这么简单。我有一组关于交互式可视化设计的幻灯片, 里面我用到的绝大多数例子也是用D3建起来的,这就是业内现状的主要特点。

目前为止,在数据交互可视化设计的适配度以及和DOM页面交互上,还没有比D3更好的工具。我讲过Highcharts,第一周的一个作业就是用Highcharts来做几个图表。但是D3中的动画过渡效果(以及开放式的具有设计选项的模板)就是它的卖点,所有的学生都想在期末作品中做出很具想象力的艺术动画效果:动画地图,动画线条,地图上的动画线条,可以和地图同步变化的线条,你可以想象出的包含线条和地图的所有形式。(这同时也是对我自己施加压力,帮助他们做出可以想象出的效果。)

在我努力地学习D3的时候,我就很想知道怎样能更好地将图表和页面设计联动起来,但是现有的书籍未深入到任何酷炫的设计,大多数还停留在如何制作独立的静态图。然而静态图用其他D3以外的工具制作起来会更加容易(除非要做一种非比寻常的图表)。所以,在我的课上就更加注重D3代码的页面交互上。D3可以做很多活泼的 效果,像关系网络、平行坐标、桑基图等等。不过这堂课我还是重点放在一些基本的新闻可视化上面:

  1. 表格和热力图
  2. 横纵条形图
  3. 线形图,包括操作多重线形图
  4. 流图/面积图
  5. 分段/分组条形图
  6. 散点图
  7. 多倍制图
  8. 地图

我们也会涵盖一些重要的交互效果,比如转呈、置换数据库来动画出一张新图,如何联动(像选择菜单、按钮、滑动器这样的页面交互元素),制作复杂的提示框,用切换开关、点击鼠标或是鼠标悬停来连接两个独立的图表,标识特殊的数据点,加图例。在JavaScript中,重要的数据概念包括排序,取前十组(或前N组) 数据,导出可估计的变量。

设置工具:GITHUB以及服务器,噢我的天

让大家在第一天设置好服务器和GITHUB真是个 挑战,但是幸运的是,他们中大部分之前多多少少都会一点。不过,大部分学生都不知道怎么使用命令行,他们中的两个人用的Windows系统,所以这对包括 我在内的每个人都是个“挑战”。(我完全忘了不是所有人都自发地就会Unix和Windows命令行。这真把我绕得团团转。)在他们遇到困难的时候,我或 许过分吹嘘了“git stash”的用处,但是我毫不遗憾。不久,他们每周都可以运用自如地git pull(上传)作业,学会怎样使用gist了。

Gist 以bl.ocks的形式给用户构建属于他们自己的作品页面,是D3家族中的关键组成部分。同时,对我而言它们对于评分和除错也非常必要——尤其是在Ian Johnson (@enjalot) 已经发布了 blockbuilder.org之后,这让除错变得容易多了。

某种原因上来 讲,使用服务器确实让编程新手很难以适应。(在看到大家的挣扎之后,我上传了一些给新手看的d3常见问题系列的说明。)只习惯于做一些静态页面设计的人就 不是很理解你为何要使用服务器来观察及运行代码。大家没有意识到,单纯地双击文件会大大花费浏览时间。不,网址行一定要显示”localhost://” 而不是 file://。 前几周的很多问题都出在学生没有把他们的文件上传到服务器上,即使在他们已经设置了服务器之后。(要注意的是:这同样是另一个问题的例子,那就是远程电邮 来调试代码要比在他们身边直接检查难得多。这种例子比比皆是,因而我的办公室时间总是门庭若市。)

用D3来做JavaScript

这 堂课的必修前提是HTML以及CSS,但并没有怎么提及到JavaScript。 很捉急,这就是很多人怎样开始学习D3的,那么就让我们这样开始吧! 像我一样,很多走过这条路的人都知道JavaScript是帮你一点点掌握D3的重要途径,即便在你拿到了D3范例之后也不例外。但就理解D3范例(例如 Mike Bostock的例子)这点来讲就需要对JavaScript的深度理解。

对于所有的数据可视化来讲,数据处理都很困难,有时 候就是卡在数据设置的部分。你可以使用JavaScript以外的工具来处理数据(我比较推荐使用Excel),但是某种程度上讲,你需要掌握直接利用代 码本身来处理数据的能力。重组数据,在界面设计交互上能够得到一些特定数值是相当重要的。将数据库融合来做运算,或者了解并使用像forEach和 maps这样的函数代码来生成子数据组,这些事情对每个人都很难,即便对那些有着编程背景的学生来说亦是如此。我布置过一些纯JavaScript的作业,像调试代码、处理数据,但是坦白来讲,我应该多布置一些这样的作业。(另一方面,评分会更难一些,因为这通常需要很认真地观察每一位学生的代码…… 唔。)

同样,我也应该早一点开始教学生如何使用处理数据的工具。之前,我并没有立刻就教大家使用d3.nest,当时我帮一个可怜的学生 (说你呢,Luis!)写了一个非常麻烦的loop来嵌套他的数据。一小时后,我意识到,“要教他们所有的工具。要教他们nest()。”学生们需要了解 那些辅助性的函数,这会帮他们在这条路上节省很多时间。接下来就是做嵌套数据的作业了。在接下来的春季学期中我也会讲授lodash.js这一块知识。

缺少“复杂”的教学案例

很多现有的D3实例、书籍以及教材都非常基础,甚至是个“玩偶”(从现实框架中提取,未使用真实数据。)对于基础学习,最好的入门书是Scott Murray简单而不可怕的初级读本,Interactive Data Vis for the Web。当然,我们也就是从这里开始,但是当我们接触到更加复杂的动画和转呈元素的时候,里面可以在课堂上使用的优秀案例以及教材就越来越少了。

Jim Vallandingham 和 Nathan Yau在 Flowing Data上的教程是一个很重要的例外;同时,他们也都在各自网站上做新闻可视化教程。我从他们的网站中借用并调改了几个例子,比如多倍制图和地图制作。 Jim的代码会更“高级”一些,我做了一定程度的简化,对此我感受复杂,可忽略。对于Nathan的代码,我有时候会在她用了一些老D3方式或者可以更加 有效的时候我会做一些更新。我同时也会对Scott Murray的例子做一些更新,使用更多D3常用的语言(比如使用更多margin对象话语,去除for-loop)。

即便看到了如何在 D3中使用函数来更新模板,当大家开始做各自作品的时候,每个人又在整理代码这一块十分纠结。当我要求学生们只是把三个图表汇集在一张网页上,在全局范围 (global scope)互相冲突的部分局面大乱。我很了解,这些作品是要以用户端体验而非代码质量来作为评判标准的,代码结构问题让学生们在调代码过程中更加困难。 因而这学期我会更加注重代码结构这一块的讲解。

不幸的是,网络上有更多例子是使用Angular或者React而不是 JavaScript来构架大的作品的。显然,那些框架就解决了整理架构代码的问题,但我觉得这对于每一个教D3的人来说都是一个难题。我不想因框架问题 让那些只是学习JavaScript和D3的学生困惑不已 。

找寻数据故事很不易

选修这门课的大部分学生都修过 (Alberto Cairo)的静态信息图课程,但实际上,在数据中找寻故事是不易的,这堂课并不涵盖这部分内容。我给一些在选题上比较困难的学生推荐用Excel和 Tableau来挖掘数据内容,示范。幸运的是,有一些学生已经有使用Tableau的经验了。(我用PowerBI做了简单尝试,印象深刻!)不过,他 们作品中的数据故事直到学期尾声才流露出来。众所周知,给非真实的数据做“设计”是非常困难的(如果手动画草图就只能这样),不能熟练使用探究数据工具就 会给学生们带来障碍。

而接下来这一学期的课就没有那么强的新闻性,我会扩展对作品的评分要求,对于数据驱动的故事不做强求,允许更宽泛的数据可视化。我也会用数据探索作为开端来拓展设计过程,然后在推展到界面设计的草图,之后再进入阶段性开发以及反馈的循环中。

调试代码也很艰辛

我意识到我应该教一些调试代码的知识,我也这么做了,但是我觉得只能点到为止。看着别人做这个工作非常无聊,但是这很有必要。让学生学会如何使用谷歌浏览器JavaScript控制台的断点是无可避免之灾害,因为这是一点点堆叠跟踪的过程。

调试代码里更难的步骤是你必须要很熟练地知晓哪一部分容易出错,能够猜出来这一次会是哪里出错了。在这上面会花费大量时间。这部分很难教,它需要实践练习时间。

学生们会找到并且复制你的所有错误

因为学习D3的一个自然而然的常规性做法就是找例子然后模仿修改它们来适配到你自己的数据上,我也打算这样来教授这门课。由我来做一些例子,然后学生们使用 他们的数据(最好的情况是他们刚好可以把这些联系运用到最后的作品中)。这就意味着,可能我写代码过程中的马虎、错误和一些不好的习惯就会被学生们一遍一 遍地复制开来,包括不尽如人意的界面设计,有一个例子就是有一个线条图用了不尽如人意的颜色组合被复制应用到了若干个作业当中。

而我的作业就是,修复repo中上述所有错误,努力不把它们带到更多的作品中。

鸣谢我借鉴、联系或修改过的一些内容:

如下各位的repo对这门课贡献卓著: Mike Bostock, Scott Murray, Jim Vallandingham, Nathan Yau, Mike Freeman, Ian Johnson。

课程材料:

课程所用repo(接下来的这学期我会继续改良)在这。我希望会加更多的案例,像canvas,crossfilter/dc.js,可能还会有一些其他的设计。甚至可能会有一些数据“艺术”。我会在接下来一周左右的时间把学生作品的链接和例子公布出来。

via:jdchina

End.

转载请注明来自36大数据(36dsj.com):36大数据 » D3.js教学记(上)

36大数据   除非特别注明,本站所有文章均不代表本站观点。报道中出现的商标属于其合法持有人。请遵守理性,宽容,换位思考的原则。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
友情链接:宏发彩票  北京赛车pk拾网站制作  重庆幸运农场技巧  迅雷彩票  北京赛车pk拾彩赔率多少  

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!