D3.js教學記(下)
來自: http://djchina.org/2016/02/19/d3-course-2/
D3.js教學記是由Lynn Cherny授權數據新聞網翻譯,原文見: http://blogger.ghostweather.com/2016/01/fall-student-d3js-projects.html
翻譯:楊宇辰
</div>
</div>
前面的一篇講了我上課的感受和總結,這篇后續文章主要介紹一下這門課上學生的結課項目。項目要求學生們使用聯合國兒童基金會(UNICEF)提供的數據(配合其他相關數據)呈現一個關于兒童死亡率的數據專題。
最終評判項目分數的標準如下:
- 20%使用了四種課上講到的圖表類型
- 20%交互體驗好,使用過渡動畫、高亮、浮窗、篩選過濾等等功能
- 15%文字:文字部分有介紹、總結、圖注等,講述完整,對問題解釋清晰,寫作風格專業
- 10%講故事:文字、圖表等元素通過按鈕或滾動導航等手段結合緊密,通過數據敘述一個有趣又有用的故事
- 10%圖表/圖:坐標軸、浮窗、圖例、數值、圖說等得當且易于閱讀
- 10%整體視覺風格:色彩、圖形設計統一,有吸引力并主次得當,適當借鑒UNICEF風格
- 10%數據分析:分析結果準確并有趣,使用top10、結合相關數據信息增加信息量
- 5%版式設計:使用css設計合理版式,網頁結構完整(header和footer)并標注數據來源和項目信息,提供作者聯系方式等外部鏈接
后來我才意識到我忘記了“好的用戶體驗”這一項。如果學生們使用了課上沒有提到的形式和交互手段,或者結合了更多相關的數據進行分析和比對,我都會酌情加分。課上并沒有計算機專業的學生,這也不是一個工程學院的課程,所以判分的標準中并沒有代碼是不是優秀這一點,而是集中在最終的呈現效果上,但是大家都很努力。另外要注意的一點就是課上有很多非英語母語的學生,所以對于語言的要求也就相對寬松了一些,畢竟在期末要求學生去找人幫他們校稿不太現實。
下面來介紹這些我覺得有意思的課程作業:
美國兒童死亡率 ( Louise Whitaker )
這是我最喜歡的作業之一,她在作業中使用折線圖,散點圖,柱狀圖和地圖,結合了鼠標滾動、浮窗和鼠標點擊更新多個關聯圖表的方式,分析了美國的數據并和世界各地的情況進行了對比。
地圖上的數據浮窗有多個相關的點圖
多個互相動態關聯的柱狀圖用來展示每個州在健康問題中的相對狀況
兒童出生和死亡率 ( Halina Mader )
這個作業主要探討了五歲以下兒童出生率和死亡率的關系,使用了分步的敘述手段,通過“上一步”和“下一步”進行操作。開頭用一張地圖展示了2015年全世界嬰兒死亡率,浮窗中提供了很有意義的細節:所在國家的死亡率,世界平均的死亡率,和全世界最高的死亡率。
下一個階段比較隱秘,地圖的顏色會隨著下方折線圖的變化而變化,從而顯現出在不同時間各國死亡率的情況以及變化趨勢。
各種成因與數據結果的相關性和趨勢分析也通過多個小圖同時展現,鼠標懸停在任意一個國家則可看出其在各個分析中的表現。
在這個作業之前的一張互動折線圖也獲得了推特網友的好評。
馬拉維和兒童死亡率 ( Barbara Poon )
這個作品通過精準獨特的分析和視覺元素的幫助,講述了非洲,尤其是馬拉維地區的兒童死亡情況。其中鼠標滾動的導航敘事尤其精彩。
她同樣使用了點圖
戰爭的影響 ( Shiyan Jiang )
這個作品主要關注戰爭對于兒童死亡的影響。開篇仍是一個地圖,浮窗中提供了死亡率-時間折線圖作為參考。
通過滾動導航引導讀者一步步的閱讀她的數據故事,并通過高亮線圖的一部分來展現戰爭帶來的長遠影響。
災難和死亡 ( Jiaxin Liu )
這個作品的導航是通過轉化成了按鈕的圖例來進行的。通過下面的折線圖來反應不同的世界性災難對兒童死亡率的影響。
除此之外在不同的圖表之間還有同步的交互:左邊折線圖中高亮的國家亦在右邊的散點圖中得到了展現。
女性教育( Zhizhou Wang )
這個作品探討了女性教育和兒童死亡之間的聯系。折線圖,柱狀圖都和地圖聯系在一起,讀者選擇一個地區或國家,相關的圖表則更新成該國家的內容。
她同樣也使用了滾動的導航敘事為她的散點圖說明。
悲傷的故事:撒哈拉以南非洲國家兒童死亡率 ( Luis Melgar )
這個作品關注撒哈拉以南非洲國家的故事。他參考了 我課上介紹的制作多個互相鏈接的交互圖表的內容 ,將地圖,折線圖,柱狀圖等都動態鏈接到了一起,做成了動態可交互的圖表。
通過散點圖和十一個不同的步驟對腹瀉和肺炎對于兒童死亡的影響進行了進一步的探討和解釋。
</div>