Not only MordernWeb,But also Data Club—阅读建议、文章索引、结语

绘制自己铁人赛文章资料所构成的图表

最後一天就来做个本次文章系列的总结吧，我用puppteer爬取了我前29天的文章字数，带入d3呈现了视觉化图表如下图

这边附上一些先前没用过的函式的程序码简单讲解一下

let firstDay = Date.parse(sortByDate[0].postTime);
let lastDay = Date.parse(sortByDate[sortByDate.length-1].postTime); //转换从1970-1-1 00:00:00 UTC到该时间的毫秒数
const scaleX  = d3.scaleTime().domain([firstDay,lastDay]).range([0,1200]).nice(); //创建以时间构成的比例尺，里面的值须带入1970-1-1 00:00:00UTC到该时间的毫秒数
const axisX =  d3.axisBottom(scaleX).tickFormat(d3.timeFormat("%Y-%m-%d")).ticks(40).tickSize(-600); //timeFormate转换日期显示的样式

另外计算了一些统计常用的数据

let variance = Math.round(d3.variance(sortByDate,d=>(d.articleStrNum)*100))/100; //回传变异数并且四舍五入到小数第二位
let deviation = Math.round(d3.deviation(sortByDate,d=>(d.articleStrNum)*100))/100;//回传标准差并且四舍五入到小数第二位

至於这张图表剩下的程序码呢？想要我的程序码吗？想要的话可以全部给你，去找吧！我把所有的程序码都放在前面二十九天了。(某卡通经典台词)，希望前二十九天的帮助，你也可以实作剩下的程序码。

章节回顾与心得

这次会挑选这个主题主要是因为平常都是观看其他人撰写的部落格或者文章来吸收程序的知识，而D3JS网路上中文的资源比较少加上有些说明的版本也比较旧，函式的写法已经有所更新，所以才撰写这次的文章，虽然自己目前的程序码也还有许多进步空间，但希望还是能带给阅读我文章的人一点什麽。

在入门篇的部分从安装到写程序以及关键字Highlight，另外附上许多MDN的连结，希望给Javascript不够熟悉的人也可以在临时需要的时候补充知识，另外也从中一起试错、附上d3官方API说明和console.log()各种方法後的结果，希望能让大家感受到彷佛像我在学习这个函式库的时候一样再观看官方文件，进阶篇的撰写部分讲解部分可能会比较迅速，适合对Javascript有一定基础或入门篇弄熟的人观看，最後特别篇希望带到一下资料获取和统计的部分，才能构成整个资料视觉化的要素，毕竟数字本身没有意义，数字的意义来自於人们赋予意义，统计的意义也不是数字本身，而是理解统计背後的含意。

最後讲一个不重要的事情，我运用了回文、英文和中文押韵完成了三十天的标题OhYA，每次想标题要押韵和Match都得花上一段时间

以下附上表格和连结作为阅读建议和文章纲要

D3、资料视觉化简介

Day01 资料视觉化 图表说说话—介绍篇
Day02 学学D3JS 技能提高SSS—为什麽D3

入门篇

Day03可缩放向量图型 不用怕图片不行—SVG简介
Day04一同来见识 D3起手式—用D3写Helloworld
Day05Bar拉BarBarBar，作伙来画吧—画个bar chart长条图
Day06这包什麽馅，原来是折线—绘制折线图
Day07不懂资料格式，那就会我们曾相识，只是不合适—档案格式介绍
Day08做为视觉化图表的燃料，从网路撷取档案的资料—fetch Data
Day09 资料元素来绑定，让你元素有内定—资料绑定
Day10 遇到元素资料不相等，用函式解决高人一等
Day11 观测时候别铁齿，拿出你的比例尺
Day12完成制作的压轴，画出图表座标轴

进阶篇

D3动画、事件

Day13 让资料拥有过渡动画，让各位观众看见神话—过渡动画
Day14不想图表被冰冻，那就做一点互动—事件互动

D3绘制地图

Day15 了解WEB地图学，先懂一点地理学—web地图的科学
Day16 It's map birth,It's from path—生成地图
Day17 Fill the color,Zoom in on center—地图各项操作及填色
Day18 不让资料进坟墓，秒懂农产品分布—实际资料画地图
Day19 地图加入了事件，地点资料就呈现—为地图加入互动事件
Day20笔画面量彩色图涂色 彩亮面画笔—地理面量图(上)
Day21笔画面量彩色图，涂色彩亮面画笔—地理面量图(下)

图表制作教学及范例

Day22给我两个以上的变数，给你呈现资料的散布—散布图
Day23 三枪侠的电磁炮，三个变数的气泡—气泡图(上)
Day24 三枪侠的电磁炮，三个变数的气泡—气泡图(下)
Day25圈圈圆圆圈圈，甜甜黏黏甜甜—圆饼图与环圈图
Day26圆圈图的实战力，直辖市人口比例-带入真实资料做圆圈图
Day27What's the tree?Let me see—树状图(tree diagram)
(特别篇)统计学的陷阱区，用资料绘制盒须—爬虫D3做成D3(下)

撷取资料(特别篇)

Documents-Delivered-Data,Data-DrivenDocuments—爬虫D3做成D3(上)
统计学的陷阱区，用资料绘制盒须—爬虫D3做成D3(下)

D3函式索引

这边也附上索引值来方便大家查看，如果对於某些函式忘记如何使用，我这边已经整理好第一次被使用到该函式或是有撰写该函式说明的文章都呈现在下方表格了。

感谢与结语

最後感谢好想工作室夥伴们给我文章撰写范例的灵感，还有感谢他们听我讲干话给我欢乐的动力持续写文XD还有感谢我在理解函式过程当中，国内外撰写过D3Js文章的Bloger们。
另外要说的是D3Js是一个庞大的函式库，我介绍到的部分仅是核心的DataBinding和冰山一角的常用图表绘制，D3函式库还可以绘制的图表包括但不限於力图、泡泡图、TreeMap、AreaChart还有任何你能发挥创意巧思并且运用强大D3Js客制化工具所展现的视觉画图表，希望藉由这系列文章旅程能成为我们的夥伴，一起航向伟大的航道带领你成为学习的基础，变成後续学习的要领。最後再说一次本篇文章的重点数字本身没有意义，数字的意义来自於人们赋予意义，统计的意义也不是数字本身，而是理解统计背後的含意重点就这句而已(误)，以上。