FreeCodeCamp学习笔记
我们目前的可视化，在技术实现上用的是前端相关的技能，我现在负责可视化小组，肯定得对于前端要有所了解才行，否则遇到一个需求，能不能实现、实现成本有多高，我根本没法评估；而且项目任务紧的时候，看着小伙伴们加班加点的赶进度，我也帮不上忙。因此最近准备学习下前端相关的知识。
网上看了一圈，很多人都推荐Free Code Camp，这个在github上的星也非常多，因此我选择通过这上面的练习题来入手学习。
Responsive Web Design
包括HTML和CSS基础，我是从7.7晚上开始做题的，期间利用工作的空档和晚上的时间做题，虽然之前没做过HTML和CSS的工作，但是很多内容平时也有所接触，有个一知半解，因此做起来非常快，基本没遇到什么大的卡顿，到7.13早上完成了所有题目，拿到了证书，总耗时应该在10-15个小时左右。
做完的一个感受就是：内容比较基础，涉及的东西并不多，且都是浅尝辄止，只是带你入个门。你还是需要自己额外从其他途径学习相关的知识，并且要进行大量的实践操作，才能真正掌握Responsive Web Design的技能。
Javascript Algorithms And Data Structures
JS我在12-13年写过一些，当时是用jQuery，会做简单的DOM操作(那个时候的WEB产品对于交互要求都很低，多以静态页为主)。我预估前面的基础题目会做得很快，但是后面可能会被一些题目卡住。预估JS会比前面的HTML+CSS耗时要长很多。
2019.07.14：
今天发现，获得证书并不需要把所有练习题都做一遍，只需要完成每个系列课程最后的项目题即可。
昨天晚上和今天上午，我做了一部分JS的基础题，感觉都是自己会的，这些题目做下去对于自己没有什么帮助，因此准备选择性的跳过一些题目，只做自己不会的，然后完成项目题，拿到证书。
第一个题目比较简单，通过ASCII码就可以实现了。
第二个题目需要先了解罗马数字的格式。这个格式我琢磨了半个小时，还是没有想出来确切的规律。后来发现是我网上找的这个规则答案，少了一条规则(左減時不可跨越一個位數。比如，99不可以用IC表示，而是用XCIX表示。（等同於阿拉伯數字每位數字分別表示)。另外FCC这个题目要求的内容其实只要能转换小于4999的数字即可。后来我看了hint，知道规则后，顺利做出来了。不过代码写得很烂，流水账的形式，没有体现编程思维。
这里有个小插曲：我因为一直没想出来算法，然后这个练习题就一直打开着，结果这个页面占用的内存逐渐升高，最终把我笔记本内存吃光了，页面挂了。这说明FCC的JS代码可能写得有问题。
2019.07.17：
今天把剩下的JS题目都做完了。Cash Register这个题目的单元测试有问题，我输出了符合他们要求的结果格式，但是单元测试判断我未通过。我猜想他们除了验证结果之外，还对代码做了一些检验，可能是课程里面涉及的一些函数吧。不过这个只是我猜测的，不确定一定是这个原因。
后来我看了他们的hint，重新写了一版后，通过了测试。
Cash Register给我的感触很大，我发现自己写代码缺乏全局观，找到一个点就开始搞，结果导致逻辑混乱，代码也是流水账，也没有体现程序设计；另外命名也是个问题，没有符合见文知义的准则。
总之：
1、今天拿到JS徽章了
2、发现了我编程中的很多问题
不好不坏的一天吧。
Front End Libraries
这个证书涉及的框架是React的，我们公司平时用的是Vue，因此这个证书的大部分课程我准备跳过，只学习下里面的Sass课程。
这个证书等我后面空了再回来拿吧。
Data Visualization
FCC居然专门给Data Visualization开设了一个证书，可见数据可视化是大势所趋啊。
这个证书主要包含D3.js和Ajax相关的内容，Ajax的我准备跳过，专注学习下D3.js，毕竟这个是我们组吃饭的家伙，还是得好好了解下的。
2019.07.19：
今天尝试直接做第一个项目题：画柱状图。结果比较凄惨，各种被卡住，感觉是靠蒙在做题，这样效率极低，且不利于我知识的积累，因此准备回头把D3.js的题目扫一遍。
接着把D3.js的题目做了一遍，感觉收获不多，只是提了下基础的一些功能，距离真正画个可用的图形，还差得比较远。
然后回头继续做第一个柱状图，感觉还是不大顺畅。
2019.07.20：
今天把柱状图做完了，耗时比较长。两天花在柱状图上的时间加起来估计有4-5个小时。
我总结下被卡住的问题：
- 属性名写错了，把CSS的transform属性写成了transfrom，导致y轴出不来
- 横坐标轴为日期时，应该用d3.scaleTime()，而不是之前的d3.scaleLinear()，且d3.scaleTime()的domain()传入的应该是Date对象，而不是直接的日期字符串文本。
- 边距padding没有考虑好，花了一些时间调试
- 给rect设置x属性时，忘记了调用xScale()进行比例处理，导致第10个测试用例卡了很久
- tooltip是自己单独用div实现，而不是通过给rect对象append(“title”).text(xxx)来实现
- tooltip是通过on()函数给rect绑定事件来交互的
- 获取鼠标当前的x、y坐标的函数，必须在事件触发的代码内部调用，否则event/window.event是undefined
2019.08.07：
距离上一次做题，间隔了半个月的时间，这期间主要是忙于做业务方的需求和月度总结计划去了。其实中间也是有时间做题的，只是人一旦懒惰起来，真的很可怕……
从昨天下午开始，我尝试完成热力图这个题目。昨天下午大约花了1小时，晚上花了3小时，今天下午花了1小时，因此总共加起来这个题目花了我5个小时，效率很低。总结下原因：
- 期间半个月没接触d3，前面的东西基本忘光了
- 对于边距、比例尺没有真正掌握，自己是靠蒙和不断调试来做题，有运气成分在里面，效率低下
- 不够专注
做这个题目给我最大的感触，就是d3会用到很多数学知识，虽然要求都不高，但是我太久没用数学了，思维上还是比较费力的。
针对比例尺的问题，我手绘了2张图，记录到Anki笔记中去了，算是一个不错的收获；边距问题还没弄清楚，尚待探索和实践。
接下来我要停一下了，准备先把《数据可视化实战手册》快速浏览一遍，然后再继续后面的题目。否则靠蒙去做题，弊大于利。
2019.08.13：
从昨天下午开始，我着手进行了D3最后两个题目的编写。
画美国地图这个卡了我好几个小时，最终发现是调用了不该用的函数导致的，具体原理尚待琢磨。
Treemap这个题目相对还好，难度不高，今天早上花了点时间，再加上下午大约花了2个小时(期间有处理其他事情)，通过了单元测试。
不过D3的题目，我的标准放得很低，都只是仅仅通过了单元测试而已，没有考虑还原度。里面有些功能我还是迷迷糊糊的，并没有掌握；另外代码也缺乏封装，是采用流水账的形式写的。
接下来我会暂停FCC的课程(其他课程对于目前的我来说，性价比不高)，重点放在复习和实践上，把这些知识点巩固起来。
做D3的题目，感触还是挺多的，总结如下：
- 遇到问题，先自己想办法实现，然后再对比别人的实现方式；否则单纯抄一遍代码，没有什么帮助
看书和看文档很重要，先整体有个了解，再去练习，做到理论+实践，也就是知行合一- 及时
复习，不然隔一段时间都忘光了，之前的学习就白费了 数据结构非常重要，D3是数据驱动的工具，一定要牢记这一点- 将一个功能
做精，比迷迷糊糊地做十个功能更好