D3.js 教学记(下)

分享给朋友:

D3.js教学记是由Lynn Cherny授权数据新闻网翻译,原文见:http://blogger.ghostweather.com/2016/01/fall-student-d3js-projects.html
翻译:杨宇辰

前面的一篇讲了我上课的感受和总结,这篇后续文章主要介绍一下这门课上学生的结课项目。项目要求学生们使用联合国儿童基金会(UNICEF)提供的数据(配合其他相关数据)呈现一个关于儿童死亡率的数据专题。
最终评判项目分数的标准如下:

  • 20%使用了四种课上讲到的图表类型
  • 20%交互体验好,使用过渡动画、高亮、浮窗、筛选过滤等等功能
  • 15%文字:文字部分有介绍、总结、图注等,讲述完整,对问题解释清晰,写作风格专业
  • 10%讲故事:文字、图表等元素通过按钮或滚动导航等手段结合紧密,通过数据叙述一个有趣又有用的故事
  • 10%图表/图:坐标轴、浮窗、图例、数值、图说等得当且易于阅读
  • 10%整体视觉风格:色彩、图形设计统一,有吸引力并主次得当,适当借鉴UNICEF风格
  • 10%数据分析:分析结果准确并有趣,使用top10、结合相关数据信息增加信息量
  • 5%版式设计:使用css设计合理版式,网页结构完整(header和footer)并标注数据来源和项目信息,提供作者联系方式等外部链接

后来我才意识到我忘记了“好的用户体验”这一项。如果学生们使用了课上没有提到的形式和交互手段,或者结合了更多相关的数据进行分析和比对,我都会酌情加分。课上并没有计算机专业的学生,这也不是一个工程学院的课程,所以判分的标准中并没有代码是不是优秀这一点,而是集中在最终的呈现效果上,但是大家都很努力。另外要注意的一点就是课上有很多非英语母语的学生,所以对于语言的要求也就相对宽松了一些,毕竟在期末要求学生去找人帮他们校稿不太现实。

下面来介绍这些我觉得有意思的课程作业:

美国儿童死亡率Louise Whitaker

1
这是我最喜欢的作业之一,她在作业中使用折线图,散点图,柱状图和地图,结合了鼠标滚动、浮窗和鼠标点击更新多个关联图表的方式,分析了美国的数据并和世界各地的情况进行了对比。

 2
地图上的数据浮窗有多个相关的点图

3
多个互相动态关联的柱状图用来展示每个州在健康问题中的相对状况

儿童出生和死亡率Halina Mader

4

这个作业主要探讨了五岁以下儿童出生率和死亡率的关系,使用了分步的叙述手段,通过“上一步”和“下一步”进行操作。开头用一张地图展示了2015年全世界婴儿死亡率,浮窗中提供了很有意义的细节:所在国家的死亡率,世界平均的死亡率,和全世界最高的死亡率。

5
下一个阶段比较隐秘,地图的颜色会随着下方折线图的变化而变化,从而显现出在不同时间各国死亡率的情况以及变化趋势。

6
各种成因与数据结果的相关性和趋势分析也通过多个小图同时展现,鼠标悬停在任意一个国家则可看出其在各个分析中的表现。

7
在这个作业之前的一张互动折线图也获得了推特网友的好评。

马拉维和儿童死亡率Barbara Poon

8
这个作品通过精准独特的分析和视觉元素的帮助,讲述了非洲,尤其是马拉维地区的儿童死亡情况。其中鼠标滚动的导航叙事尤其精彩。

9
她同样使用了点图

 

战争的影响Shiyan Jiang

10
这个作品主要关注战争对于儿童死亡的影响。开篇仍是一个地图,浮窗中提供了死亡率-时间折线图作为参考。

11
通过滚动导航引导读者一步步的阅读她的数据故事,并通过高亮线图的一部分来展现战争带来的长远影响。

灾难和死亡Jiaxin Liu

12
这个作品的导航是通过转化成了按钮的图例来进行的。通过下面的折线图来反应不同的世界性灾难对儿童死亡率的影响。

13
除此之外在不同的图表之间还有同步的交互:左边折线图中高亮的国家亦在右边的散点图中得到了展现。

女性教育(Zhizhou Wang

14
这个作品探讨了女性教育和儿童死亡之间的联系。折线图,柱状图都和地图联系在一起,读者选择一个地区或国家,相关的图表则更新成该国家的内容。

15
她同样也使用了滚动的导航叙事为她的散点图说明。

悲伤的故事:撒哈拉以南非洲国家儿童死亡率Luis Melgar

16
这个作品关注撒哈拉以南非洲国家的故事。他参考了我课上介绍的制作多个互相链接的交互图表的内容,将地图,折线图,柱状图等都动态链接到了一起,做成了动态可交互的图表。

17

通过散点图和十一个不同的步骤对腹泻和肺炎对于儿童死亡的影响进行了进一步的探讨和解释。

这门课程会在今后不断的升级变化,请随时关注这个repo,以及作者博客

作者简介

杨宇辰

本科新闻,硕士信科。目前在伦敦游荡,目标成为一名有钱有闲有爱好的全栈设计师。