CUC Summer Workshop 2018

Course info

• Date: 20180716 - 20180720
• Venue: CUC

The workshop is jointly offer by HUANG Zhimin, CHEN Hao, FANG Jie and HU Pili

Project and Student List

• Group 1, 王格，郭冬怡，徐健翔 张郁桐, 中国福布斯富豪排行榜分析, https://story-tellers.github.io
• Group 2, 胡亦含，庞佳音，魏隽轩, 感动中国十六年：是什么感动了中国, http://2xyh.github.io
• Group 3, 李思博，韩文榕，黄欣琪, 全球演唱会影响力分析 , https://noproblem123.github.io
• Group 4, 徐畅，张欣言，贾淑宜, 中国的外交进程 , http://group4-378.github.io
• Group 5, 于小凡，叶紫薇，郭晨晖 , 一个肥胖患者的死亡 , http://zuoxiajiao.github.io
• Group 6, 张逸群，张静文，杨晨靖 , emoji表情的使用率分布 , https://Yangerzhang.github.io
• Group 7, 张可，蒋铭君，孙逸，裴思童, 豆瓣与IMBDtop250的比较分析 , https://junjun0403.github.io
• Group 8, 李乐，王艺璇，闫霄 , 未来人口流动趋势：传统一线城市vs二线城市 , http://datanews0716.github.io

References

CSS Libs

• Icons via font: http://fontawesome.io/
• Stylish animation in CSS:
  • https://daneden.github.io/animate.css/
  • http://elrumordelaluz.github.io/csshake/
• Stylish tooltip in CSS:
  • https://kazzkiq.github.io/balloon.css/
  • http://kushagragour.in/lab/hint/
• Stylish hover effect in CSS: http://ianlunn.github.io/Hover/
• Button effects in CSS: https://jonsuh.com/hamburgers/
• Loading effect:
  • http://tobiasahlin.com/spinkit/
  • https://connoratherton.com/loaders

How to select a chart

• This PDF from A. Abela is a classical guide on chart selection by function
• http://datavizproject.com/ provides guide based on input data structure.
• https://datavizcatalogue.com/ provides useful tools for each type of chart.

eCharts resource

• Official site
• manuual of "option" for version 3
• mannual of "option" for latest version
• eCharts removed the map files from official repo since 2018 due to regulation reasons. One can convert standard geojson to eCharts map Javascript files but this takes quite some steps. You can find some ready to embed maps JS files: here. You only need to reference those map files using script tag like when you are using other JS libs.

Demo Pages

Class demos

• Basic HTML/CSS: index.html
• Use template from HTML5 Up: html5up-spectral/
• Embed flourish: flourish/
• eCharts bar: echarts-chart/
• eCharts China map: echarts-map-china/
• eCharts world map: echarts-map-world/
• Embed flourish charts locally: flourish-local/ (data/ chart credit: Group 1)

Demo of adding references & data sources

• Tools: eCharts, quicktime, flourish, VSCode, GitHub Desktop ...
• data table: namelist.xlsx