Not only MordernWeb,But also Data Club—閱讀建議、文章索引、結語

2021 iThome 鐵人賽

DAY 30

Modern Web

從原料到燃料，從資料到預料—資料駕馭網頁之理科的美學系列第 30 篇

13th鐵人賽 d3.js

DannyChen

團隊好想工作室V5.0

2021-10-15 21:31:28

1176 瀏覽

分享至

繪製自己鐵人賽文章資料所構成的圖表

最後一天就來做個本次文章系列的總結吧，我用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都得花上一段時間~~

以下附上表格和連結作為閱讀建議和文章綱要

文章	概要
Day1~Day2	D3、資料視覺化簡介
Day3~Day12	D3核心(入門篇)
Day13~Day14	D3動畫、事件(進階篇)
Day15~Day21	D3繪製地圖(進階篇)
Day22~Day27、Day29	圖表製作教學及範例(進階篇)
Day28~Day29	擷取資料(特別篇)

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完成製作的壓軸，畫出圖表座標軸

進階篇

擷取資料(特別篇)

Documents-Delivered-Data,Data-DrivenDocuments—爬蟲D3做成D3(上)
統計學的陷阱區，用資料繪製盒鬚—爬蟲D3做成D3(下)

D3函式索引

這邊也附上索引值來方便大家查看，如果對於某些函式忘記如何使用，我這邊已經整理好第一次被使用到該函式或是有撰寫該函式說明的文章都呈現在下方表格了。

d3API	文章名稱
`select()、selectAll()、selection.append()、selection.text()`	Day04一同來見識 D3起手式—用D3寫Helloworld
`selection.attr()`	Day05Bar拉BarBarBar，作伙來畫吧—畫個bar chart長條圖
`selection.style()`	Day06這包什麼餡，原來是折線—繪製折線圖
`d3.text()、d3.json()、d3.csv()、d3.dsv()、d3.image()、d3.html()`	Day08做為視覺化圖表的燃料，從網路擷取檔案的資料—fetch Data]
`selection.data()、selection.datum()、`	Day09 資料元素來綁定，讓你元素有內定—資料綁定]
`selection.enter()、selection.exit()、 selection.join`	Day10遇到元素資料不相等，用函式解決高人一等
`d3.scaleLinear()、continuous.clamp、d3.max()、d3.min()、continuous.domain()、continuous.range()`	Day11 觀測時候別鐵齒，拿出你的比例尺
`d3.axisTop()、d3.axisRight、d3.axisBottom、d3.axisLeft()、axis.ticks()、axis.tickFormat()`	Day12完成製作的壓軸，畫出圖表座標軸
`selection.transition()、transition.attr()、transition.delay()、transition.duration()、d3.easeLinear()、d3.easePolyIn()`	Day13 讓資料擁有過渡動畫，讓各位觀眾看見神話—過渡動畫
`selection.on()、d3.randomInt()、selection.remove()`	Day14不想圖表被冰凍，那就做一點互動—事件互動
`geoEqualEarth()、geoPath()、d3.geoMercator()、projection()、topojson.feature()`	Day16 It's map birth,It's from path—生成地圖
`d3.scaleSequential()、d3.hsl()、color.formatRgb()、projection.center()、projection.rotate()、projection.scale()、d3.zoom()`	Day17 Fill the color,Zoom in on center—地圖各項操作及填色
`selection.html()、`	Day19 地圖加入了事件，地點資料就呈現—為地圖加入互動事件
`d3.group()、d3.mean()`	Day20筆畫面量彩色圖塗色彩亮面畫筆—地理面量圖(上)
`d3.interpolateRdYlGn()、d3.scaleSequential()`	Day21筆畫面量彩色圖，塗色彩亮面畫筆—地理面量圖(下)
`tickSize()、tickSizeOuter()、tickSizeInner()`	Day22給我兩個以上的變數，給你呈現資料的散佈—散佈圖
`selection.node()、selection.call()`	Day23 三槍俠的電磁砲，三個變數的氣泡—氣泡圖(上)
`d3.arc()、arc.innerRadius()、arc.outerRadius()、arc.startAngle()、arc.endAngle()、arc.cornerRadius()、d3.pie()`	Day25圈圈圓圓圈圈，甜甜黏黏甜甜—圓餅圖與環圈圖
`d3.pie().value()、d3.schemeTableau10、transition.attrTween()`	Day26圓圈圖的實戰力，直轄市人口比例-帶入真實資料做圓圈圖
`d3.hierarchy()、node.links()、d3.tree()、tree.size()、node.descendants()、d3.linkVertical、d3.linkHorizontal()、`	Day27What's the tree?Let me see—樹狀圖(tree diagram)
`continuous.nice()`	統計學的陷阱區，用資料繪製盒鬚—爬蟲D3做成D3(下)

感謝與結語

最後感謝好想工作室夥伴們給我文章撰寫範例的靈感，~~還有感謝他們聽我講幹話給我歡樂的動力持續寫文XD~~還有感謝我在理解函式過程當中，國內外撰寫過D3Js文章的Bloger們。
另外要說的是D3Js是一個龐大的函式庫，我介紹到的部分僅是核心的DataBinding和冰山一角的常用圖表繪製，D3函式庫還可以繪製的圖表包括但不限於力圖、泡泡圖、TreeMap、AreaChart還有任何你能發揮創意巧思並且運用強大D3Js客製化工具所展現的視覺畫圖表，希望藉由這系列文章旅程能~~成為我們的夥伴，一起航向偉大的航道~~帶領你成為學習的基礎，變成後續學習的要領。最後再說一次本篇文章的重點數字本身沒有意義，數字的意義來自於人們賦予意義，統計的意義也不是數字本身，而是理解統計背後的含意~~重點就這句而已(誤)~~，以上。