iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 531 瀏覽

鐵人賽 Modern Web DAY 30

適用於傳產從業人員的實用報表製圖術系列第 30 篇

技術【Day 30】客製化的 “D3” 圓餅圖和甜甜圈圖

前言圓餅圖主要是用來表示數量的占比，可以從扇形的面積觀察數量的多寡，適合用在分類少，比例有明顯差異的資料。取得資料下載三階段人口的資料，取 110 年台灣...

rita0124 ‧ 2022-10-05 ‧團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣

0 Like 0 留言 411 瀏覽

鐵人賽 Modern Web DAY 29

適用於傳產從業人員的實用報表製圖術系列第 29 篇

技術【Day 29】客製化的 “D3” 散佈圖

前言散佈圖是用來觀察兩個變數之間的關聯性，又稱為相關圖。取得資料 *　受僱員工每人每月總薪資－按行業分*　台灣地區傷害保險個人職業分類表　整理資料 *　整...

rita0124 ‧ 2022-10-04 ‧團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣

0 Like 0 留言 511 瀏覽

鐵人賽 Modern Web DAY 28

適用於傳產從業人員的實用報表製圖術系列第 28 篇

技術【Day 28】客製化的 “D3” 多系列折線圖

前言今天要畫折線圖，折線圖常用來呈現東西隨時間的變化趨勢，但今天要用 D3 重頭開始實作，更深入了解運作的原理。取得資料到漁產品行情走勢下載石斑、吳郭魚、...

rita0124 ‧ 2022-10-03 ‧團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣

0 Like 0 留言 344 瀏覽

鐵人賽 Modern Web DAY 27

適用於傳產從業人員的實用報表製圖術系列第 27 篇

技術【Day 27】客製化的 “D3” 直條圖

前言今天要使用 D3 客製化直條圖，學習畫一張直條圖需要由哪些部分組成。取得資料下載鯖魚價格的 csv 檔案整理資料排除沒有價格的市場開始畫圖...

rita0124 ‧ 2022-10-02 ‧團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣

0 Like 0 留言 593 瀏覽

鐵人賽 Modern Web DAY 21

適用於傳產從業人員的實用報表製圖術系列第 21 篇

技術【Day 21】使用 “D3” 畫 Bar-line Chart

前言今天要結合前面介紹過的長條圖和折線圖，可以同時看出兩個指標值隨時間變化的趨勢，第一個 y1 軸用長條圖表示，第二個 y2 軸用線表示，橫軸是時間的變化。...

rita0124 ‧ 2022-09-26 ‧團隊㊣乂溪湖煞氣a汴頭保安宮乂㊣

0 Like 0 留言 2345 瀏覽

鐵人賽自我挑戰組 DAY 2

從範例學 D3.js 系列第 3 篇

技術 [03] 從範例學 D3.js - Zoom

中斷了。那就再繼續吧這次將上次的範例修改，可以透過 d3.zoom() 來達成縮放分布圖與座標軸上一篇目標上次遇到的問題是，對於坐標軸轉換、圖形位置的轉...

豆腐 ‧ 2020-09-23

0 Like 0 留言 1185 瀏覽

鐵人賽自我挑戰組 DAY 2

從範例學 D3.js 系列第 2 篇

技術 [02] 從範例學 D3.js - Scaling

這次要學甚麼?這次透過一個範例，使用 scaleLinear() 做出可以縮放的分布圖首先，本篇是基於這個範例時做出來的 Efrat Vilenski -...

豆腐 ‧ 2020-09-17

0 Like 0 留言 785 瀏覽

鐵人賽自我挑戰組 DAY 1

從範例學 D3.js 系列第 1 篇

技術 [01] 從範例學 D3.js - Introduction

為何現在研究 d3.js？最近在工作上開始接觸 d3.js 要客製一個圖表，呈現大量分群資料，投射至二維空間上的對應位置。從之前了解到，d3.js 是很適合，...

豆腐 ‧ 2020-09-16

0 Like 0 留言 3330 瀏覽

鐵人賽 Data Technology DAY 24

讓你資料美美的(d3.js+vue.js) 系列第 24 篇

技術 D3這邊可以再多一點互動嗎？

這次要再增強一點互動性 drag 有時候就是會想要把東西拉來拉去啦！在d3中，如果想要拖拉物件可以使用drag來達成drag分為三個事件(階段) start...

Eric ‧ 2018-01-12

0 Like 0 留言 2085 瀏覽

鐵人賽 Data Technology DAY 20

讓你資料美美的(d3.js+vue.js) 系列第 20 篇

技術 D3長條圖的最後一步

這次要在之前的長條圖上加上Ｘ軸來將這個長條圖完成 X軸要加上Ｘ軸，需要使用另一種比例尺，序數比例尺(d3.scaleBand) 定義的方法與之前的線性比例尺相...

Eric ‧ 2018-01-08

0 Like 0 留言 4084 瀏覽

鐵人賽 Data Technology DAY 19

讓你資料美美的(d3.js+vue.js) 系列第 19 篇

技術 D3的座標軸

座標軸在製作圖表時，很多時候都會需要座標軸，而在SVG中並沒有座標軸這個元件可以使用，只有一些基本的圖形，所以如果要使用SVG來繪製座標軸的話會需要使用gro...

Eric ‧ 2018-01-07

0 Like 0 留言 12460 瀏覽

鐵人賽 Modern Web DAY 29

WebGL 與 Three.js 初探系列第 29 篇

技術 [Day29] Aframe 範例 - 3D 與 d3.js

除了 3D 場景製作比較方便之外，我們可以使用 aframe 搭配其他不同的框架來做另類的前端呈現。今天的介紹主要是讓各位了解，除了遊戲場景的應用之外，我們也可...

愷開 ‧ 2017-01-12

2 Like 1 留言 4951 瀏覽

鐵人賽開發技術 DAY 30

SVG 與 D3.js 系列第 30 篇

技術 D3.js 鐵人賽的結束

這次參加鐵人賽，我也猶豫了很久，在開始前我已經準備好了近十篇另一個主題(視覺前端與前端技術)，但是牙一咬就報名了另一個主題d3.js，用意是想學d3.js。學習...

卡斯伯 ‧ 2014-10-29

1 Like 0 留言 7408 瀏覽

鐵人賽開發技術 DAY 29

SVG 與 D3.js 系列第 29 篇

技術 PDF轉CSV，利用Tabula

D3.js最重要的就是資料，所以需要有許多不同的資料轉換方式。PDF是常見的檔案格式，因為製作方便，又可以跨裝置，所以PDF也是經常取得的檔案格式之一，相信大家...

卡斯伯 ‧ 2014-10-28

1 Like 0 留言 3953 瀏覽

鐵人賽開發技術 DAY 28

SVG 與 D3.js 系列第 28 篇

技術柯P的財務報表套用 D3js Partition Layout

完整範例：http://wcc723.github.io/d3js/2014/10/27/Ironman-30-days-28/ 看到KP API裡面有提供競選...

卡斯伯 ‧ 2014-10-27

1 Like 0 留言 7189 瀏覽

鐵人賽開發技術 DAY 27

SVG 與 D3.js 系列第 27 篇

技術 d3.js 再看更多layout前，先來轉換json結構

完整範例：http://wcc723.github.io/d3js/2014/10/26/Ironman-30-days-27/ 上次提到d3.js有包含許多的...

卡斯伯 ‧ 2014-10-26

1 Like 0 留言 6819 瀏覽

鐵人賽開發技術 DAY 26

SVG 與 D3.js 系列第 26 篇

技術 d3.js layout (以環保局資料為例)

完整範例：http://wcc723.github.io/d3js/2014/10/25/Ironman-30-days-26/ 介紹這麼多，但是還沒有介紹到d...

卡斯伯 ‧ 2014-10-25

1 Like 0 留言 2601 瀏覽

鐵人賽開發技術 DAY 25

SVG 與 D3.js 系列第 25 篇

技術 D3.js 也可以像音樂一樣動吃動吃動(2)

完整範例請看：http://wcc723.github.io/d3js/2014/10/24/Ironman-30-days-25/ 上一篇介紹了資料的來源以及...

卡斯伯 ‧ 2014-10-24

1 Like 0 留言 1866 瀏覽

鐵人賽開發技術 DAY 24

SVG 與 D3.js 系列第 24 篇

技術 D3.js 也可以像音樂一樣動吃動吃動(1)

完整範例：http://wcc723.github.io/d3js/2014/10/23/Ironman-30-days-24/ 學習D3之後會常思考有什麼樣的...

卡斯伯 ‧ 2014-10-23

1 Like 0 留言 3544 瀏覽

鐵人賽開發技術 DAY 23

SVG 與 D3.js 系列第 23 篇

技術像jQuery 一樣的D3.js，柯P野生官網API

D3.js其實最重要的還是資料，恰巧有一位候選人做了Open data，他的API格式相當優良，如果對於找不到合適資料，但需要做些練習，不如試試看柯文哲野生官網...

卡斯伯 ‧ 2014-10-22

1 Like 0 留言 4119 瀏覽

鐵人賽開發技術 DAY 22

SVG 與 D3.js 系列第 22 篇

技術 D3.js 資料數量增減

完整範例：http://wcc723.github.io/d3js/2014/10/21/Ironman-30-days-22/ 資料很多時候需要比較、切換，所...

卡斯伯 ‧ 2014-10-21

2 Like 0 留言 4085 瀏覽

鐵人賽開發技術 DAY 21

SVG 與 D3.js 系列第 21 篇

技術 D3.js Transition動態效果

完整範例：http://wcc723.github.io/d3js/2014/10/20/Ironman-30-days-21/ 先前的資料，都是固定的，沒有任...

卡斯伯 ‧ 2014-10-20

1 Like 0 留言 3813 瀏覽

鐵人賽開發技術 DAY 20

SVG 與 D3.js 系列第 20 篇

技術 D3.js 超粘的Voronoi Diagram繪圖

完整範例：http://wcc723.github.io/d3js/2014/10/19/Ironman-30-days-20/ Voronoi Diagram...

卡斯伯 ‧ 2014-10-19

1 Like 0 留言 2681 瀏覽

鐵人賽開發技術 DAY 19

SVG 與 D3.js 系列第 19 篇

技術 D3.js 圈圈小效果

完整範例：http://wcc723.github.io/d3js/2014/10/18/Ironman-30-days-19/ D3js除了繪製圖表外，還有許...

卡斯伯 ‧ 2014-10-18

2 Like 0 留言 3712 瀏覽

鐵人賽開發技術 DAY 18

SVG 與 D3.js 系列第 18 篇

技術 D3.js 究竟搭不搭捷運與死亡率有沒有關係？(3) - 將資料繪製成折線圖

完整範例：http://wcc723.github.io/d3js/2014/10/17/Ironman-30-days-18/ 有了資料跟一些D3.js基礎後...

卡斯伯 ‧ 2014-10-17

3 Like 0 留言 2159 瀏覽

鐵人賽開發技術 DAY 17

SVG 與 D3.js 系列第 17 篇

技術 D3.js 究竟搭不搭捷運與死亡率有沒有關係？(2) - Google 試算表

上一篇提到資料是放在Google 試算表上，然後再透過web 前端去接資料，當初會想這麼做的原因有以下幾點：資料路徑穩定，不易掛點技術上只要成功一次，以後...

卡斯伯 ‧ 2014-10-16

3 Like 0 留言 3695 瀏覽

鐵人賽開發技術 DAY 1

SVG 與 D3.js 系列第 1 篇

技術 2014 鐵人賽慢慢開始跑 [d3js 與 SVG]

和朋友有聊到鐵人賽這次的發文問題，確實問題挺多的...，或許這也是鐵人的挑戰之一吧，不過還好我有自備Blog，建議可以連到我提供的網址觀看～以下文章同步發表於...

卡斯伯 ‧ 2014-09-30

技術 【Day 30】客製化的 “D3” 圓餅圖和甜甜圈圖

技術 【Day 29】客製化的 “D3” 散佈圖

技術 【Day 28】客製化的 “D3” 多系列折線圖

技術 【Day 27】客製化的 “D3” 直條圖

技術 【Day 21】使用 “D3” 畫 Bar-line Chart